非你网

一切皆有小小组合。用 flutter 开发一个完整的 app，所需要的设计的方方面面这里总结一下。

• 路由

写 flutter 越多，遇到的场景和用到组件就越多。这样，就有机会采坑。遇到的情况先记录下。

记录坑

• showModalBottomSheet 中的状态。
  https://www.jianshu.com/p/949a638cd465 外部中定义的状态，在该组件中就没用了。

• container 中 套 container。不仅是 container，比如 image 这些都会使得内部的元素的宽高都会是它明确父级的宽高。也就是即使你内部设置了宽高也会被强制到和明确父对象一样的宽高。 可以用 Column 和 Row 打破这个僵局。
  https://zhuanlan.zhihu.com/p/41801871

• TextField 的默认高度和显示文本的差异。这个不算坑，是对 api不太了解。设定 isCollapsed 为 true ，就可以解决莫名的高度了。

• 画虚线矩形。这个不是坑，这个是原生没有。https://blog.csdn.net/xfnbing/article/details/107209410

• ios 下webview_flutter_plus 配置 html 渲染。
  https://blog.csdn.net/xudailong_blog/article/details/108324984
  https://pub.flutter-io.cn/packages/webview_flutter_plus#ios
  两个都需要配置。

• mac 下，编译ios时遇到 error: compiling for iOS 8.0, but module ‘SwiftProtobuf’ has a minimum 问题处理。
  https://blog.csdn.net/boildoctor/article/details/111192691

• webview 的时候，状态栏高度处理。下边这种方式虽然不完美，却也是一个很快速实用的方法。

Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(1),
          child: Container(
            color: Colors.white,
          ),
        ),
        body: webView()
      )

学习链接

http://laomengit.com/flutter/widgets/PreferredSize.html

搭建好了环境，就是开发项目了。对于前端项目，用户比较关心的是路由，渲染，以及数据。路由可以缓一缓，数据也可以缓一缓。渲染肯定要先出来。渲染太底层的，也不用关心。那就直接关心渲染的上层布局。好吧，就布局。

要了解的信息

• 我们要知道 Scaffold。
• 我们要知道 Container、Row、Column、Stack 等。这些和 css flex 布局几乎一个模子。
• 我们要知道 Color。
• 我们要知道各种组件。
• 我们要知道好多好多信息。
• 我们就是从这里渐渐开始。