我们的文件结构类似于你在 React 或 Angular 中看到的那样，每个屏幕和组件都有自己的文件夹，包含我们的 Pug 和 Sass 文件。flutter-view 将根据这两个文件自动生成一个新的 Dart 文件。

* lib 📂 
  * screens 📂 
    * loader 📂
      * loader.pug 
      * loader.sass 
  * main.dart

一旦我们导入了 flutter-view 包，就可以开始使用 Pug 语法创建 Flutter widgets。只需添加一个标签并传递 (flutter-view)，就可以创建一个新的 stateless widget。

现在所有 widgets 都是小写字母，单词之间用连字符分隔，所以 appBar 变成 app-bar。创建一个新 class 将生成一个空的 container，我们可以在 Sass 文件中引用它。我们还可以使用 as 属性控制它在父 widget 中的标签名称。

home(flutter-view)
    scaffold
        app-bar(as='appBar')
            .siteName(as='title') Welcome

保存后，应该会生成一个新的 home.dart 文件，如果我们看一眼里面，会发现一些很酷的东西。

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_view_widgets/flutter_view_widgets.dart';

Scaffold Home() {
  return Scaffold( // project://lib\home\home.pug#4,2
    appBar: AppBar( // project://lib\home\home.pug#5,3
      title: 
      //-- 标题 ----------------------------------------------------------
      Container( // project://lib\home\home.pug#6,4
        child: Text( 
          'Alligator.io',
        ),
      ),
    ),
  );
}

flutter-view 甚至会为所有内容添加注释，便于你在调试时找到问题。

我们需要为 widget 声明的任何属性都可以作为普通参数传递，遵循与 widgets 相同的命名格式。如果你需要使用函数，可以在前面加 @ 将其包装在括号中，或者用 :^ 原样输出，这最适合箭头函数。

import(package='flutter_view_widgets/flutter_view_widgets.dart')

loader(flutter-view)
    scaffold
        app-bar(as='appBar' center-title=true).bar
            .siteName(as='title') Alligator.io 
        .bg(as='body') 
            column: array(as='children')
                .logo 
                .slogan Front-End Web Development, Chewed Up
                .subSlogan Angular 2+, Vue.js, React, Svelte JavaScript, CSS, Node.js...
                .btnText: button(:^on-pressed="() => print('Hello World')") See all posts

$solorized-light: #073642
$solorized-dark: #002b36

app-bar
    background-color: $solorized-light

.bg  
    background-color: $solorized-dark
    width: 500

@import '../global.sass'

.logo 
    background-image: url("https://aws1.discourse-cdn.com/netlify/original/2X/3/3c2117abab23d3cb409b49f75ca0ef8f46bb005c.png")
    height: 300
    width: 300
.slogan 
    color: #fff
    font-size: 30
    text-align: center

.subSlogan 
    @extend .slogan 
    margin-top: 15
    font-size: 15
    width: 300

.btnText 
    margin-top: 40
    font-size: 25
    width: 200
    height: 50
    border-radius: 40
    button 
        color: $solorized-light
        text-color: white

{
    "imports": [
        "package:flutter_view_widgets/flutter_view_widgets.dart"
    ],
    "tagClasses": {
        "button": "FlatButton"
    }
}