尽管我热爱Ffltter，但当我从网络开发领域第一次接触到它时，我对它的结构有点不安。逻辑、样式和标记都放在一个地方，并且混合在过多的括号和逗号中。现在我已经发现了Ffltter-view，)，它立刻成为我使用Ffltter时的主要工具之一。
flutter-view并不是Dart的替代品，也不是完全让我们在flutter中使用Pug和Sass。它是我们工作流程的一个补充，让我们隔离视图并以更干净的方式开发它。我们已经知道了Pug和Sass（或者HTML和CSS)的语法，包括缩进、mixins、循环和其他一些好东西，但是我们仍然受到我们所使用的小部件的限制。这一点应该牢记在心，因为至少对我来说，它仍然很容易达到CSS允许的东西，并想知道为什么没有工作，如使用CSS网格或增加宽度的列部件。
如果你对帕格不熟悉或有点生疏，你可以重温一下here，或者细读一些Sass让你做的令人惊叹的事情](/sass/)。
安装设置
颤动视图仍然是一个很新的包，所以我建议查看最新的version和Docs)以了解任何更改。
1$ flutter create flutter_view_example
1[label package.yml]
2dependencies:
3 flutter:
4 sdk: flutter
5 flutter_view_widgets: ^1.0.6
现在你需要打开两个终端，一个用来运行‘fltter-view’，另一个用来运行你的应用程序。它所需要的只是我们要编译的代码的位置，通常是`lib‘文件夹，以及监视标志。
1$ flutter-view -w lib
PUG/Html
我们的文件结构类似于您在Reaction中看到的，或与每个屏幕和组件在各自文件夹中的角度类似，其中包含我们的PUG和Sass文件。颤振视图将根据它们自动生成一个新的DART文件。
1* lib 📂
2 * screens 📂
3 * loader 📂
4 * loader.pug
5 * loader.sass
6 * main.dart
一旦我们导入了颤动视图包，我们就可以开始使用PUG语法创建颤动小部件。我们可以创建一个新的无状态小部件，只需添加一个标签并传递它(fltter-view)即可。
现在所有的Widget都是小写的，单词之间用连字符分隔，所以appBar变成了app-bar。创建一个新类将生成一个空容器，我们将能够在Sass文件中引用它。我们还可以使用as属性控制它在其父小部件中被标记为什么。
1[label home.pug]
2home(flutter-view)
3 scaffold
4 app-bar(as='appBar')
5 .siteName(as='title') Welcome
当你保存这个文件时，应该已经生成了一个新的`home.dart‘文件，如果我们看一看里面，我们会发现一些很酷的东西。
1import 'package:flutter/material.dart';
2import 'package:flutter/cupertino.dart';
3import 'package:flutter_view_widgets/flutter_view_widgets.dart';
4
5Scaffold Home() {
6 return Scaffold( // project://lib\home\home.pug#4,2
7 appBar: AppBar( // project://lib\home\home.pug#5,3
8 title:
9 //-- TITLE ----------------------------------------------------------
10 Container( // project://lib\home\home.pug#6,4
11 child: Text(
12 'Alligator.io',
13 ),
14 ),
15 ),
16 );
17}
Ffltter-view甚至评论所有内容，以便在调试时轻松找到某些内容。
<$>[注意]如果编译器开始无缘无故地对缩进大发雷霆，重新启动您的编辑器，有时就会出现这种情况。<$>
我们需要为小部件声明的任何属性都可以作为普通参数传入，并遵循与小部件相同的命名格式。如果您需要对函数做任何操作，您可以在前面加上@将其括在方括号中，或者使用：^作为原样输出，这最好用于箭头函数。
1[label home.pug]
2import(package='flutter_view_widgets/flutter_view_widgets.dart')
3
4loader(flutter-view)
5 scaffold
6 app-bar(as='appBar' center-title=true).bar
7 .siteName(as='title') Alligator.io
8 .bg(as='body')
9 column: array(as='children')
10 .logo
11 .slogan Front-End Web Development, Chewed Up
12 .subSlogan Angular 2+, Vue.js, React, Svelte JavaScript, CSS, Node.js...
13 .btnText: button(:^on-pressed="() => print('Hello World')") See all posts
Sass
可悲的是，这不是你所知道的CSS，只是语法。我们没有CSS Grid，没有Flexbox，甚至没有任何rems或百分比。我们仅限于每个特定小部件上已经可用的属性。
我们可以直接选择容器，也可以使用它们的类/ID选择容器。
1[label global.sass]
2$solorized-light: #073642
3$solorized-dark: #002b36
4
5app-bar
6 background-color: $solorized-light
7
8.bg
9 background-color: $solorized-dark
10 width: 500
对于某些属性，有一些修改会影响生成的内容，所以现在background-image可以接受url（)或asset（)来使用本地或外部源的内容。你可以在这里找到修改后的属性的完整列表(https://docs.flutter-view.io/reference/css-properties)。
1[label home.sass]
2@import '../global.sass'
3
4.logo
5 background-image: url("https://aws1.discourse-cdn.com/netlify/original/2X/3/3c2117abab23d3cb409b49f75ca0ef8f46bb005c.png")
6 height: 300
7 width: 300
8.slogan
9 color: #fff
10 font-size: 30
11 text-align: center
12
13.subSlogan
14 @extend .slogan
15 margin-top: 15
16 font-size: 15
17 width: 300
18
19.btnText
20 margin-top: 40
21 font-size: 25
22 width: 200
23 height: 50
24 border-radius: 40
25 button
26 color: $solorized-light
27 text-color: white
一旦您习惯了这个过程，创建这样的东西将很容易花费标准DART一半的时间。
额外配置
flutter-view为我们提供了对生成文件的大量控制。你只需要在你的项目的根目录下有一个'flutter-view.json'文件，你就可以开始了。
在这里，我们只是告诉它默认情况下将flutter-view包添加到生成的文件中，并将button从RaisedButton重新映射到FlatButton。
1[label flutter-view.json]
2{
3 "imports": [
4 "package:flutter_view_widgets/flutter_view_widgets.dart"
5 ],
6 "tagClasses": {
7 "button": "FlatButton"
8 }
9}
结束语
仅用几行代码，我们就可以轻松生成2-3倍的Dart代码，而不必担心一个括号或类型错误。另外，有一种干净的方法来创建mixin、循环和条件，这使得开发更快，更愉快。
扑扑图已经迅速成为我所有个人项目的首选，我希望你也能这样做。