该文已授权公众号 「码个蛋」，转载请指明出处
上一节介绍了 Dart 的一些语法，以及配置环境的网址，这节我们就可以开始了解下 Flutter 了
主要包括 MaterialApp、Scaffold、Text、Image、Icon、Button 以及 AppBar 部分内容，准备出发~
Flutter runApp
新建 flutter 项目后，可以看到 lib 下的 main.dart 中 void main() => runApp(MyApp()); 这句就是程序的入口了。这里可以简单看下源码
void runApp(Widget app) { WidgetsFlutterBinding.ensureInitialized() ..attachRootWidget(app) ..scheduleWarmUpFrame();}///....static WidgetsBinding ensureInitialized() { if (WidgetsBinding.instance == null) WidgetsFlutterBinding(); return WidgetsBinding.instance;}///....void attachRootWidget(Widget rootWidget) { _renderViewElement = RenderObjectToWidgetAdapter ( container: renderView, debugShortDescription: '[root]', child: rootWidget ).attachToRenderTree(buildOwner, renderViewElement);}复制代码 首先会创建一个 WidgetsBinding 单例对象，然后把传入的 App 添加到 rootWidget 中，scheduleWarmUpFrame 方法比较长，这边看下对该方法的注释第一句就能了解方法的主要功能了
Schedule a frame to run as soon as possible
「安排框架尽快运行起来」(原谅我这渣英语，只能看懂不会翻译..大概就是「快速启动框架」的意思吧)
Flutter App
接着看下 MyApp 这个类，继承自 StatelessWidget 并在 build 方法返回一个 MaterialApp 实例，(偷偷讲下，其实这边还可以返回 CupertinoApp，这是一个 iOS 风格的 widget，基本上你看到部件带 「Cupertino」的都是 iOS 风格的 widget，这里先不讲 iOS 风格的部件，目前 flutter 对 Cupertino 系列的 widget 支持不是很好，包括部件的广度，多语言的支持等等方面都不是很友好，所以我们还是继续看 MD 风格的 Android 部件吧~)，这里先看下 MaterialApp 的构造函数，介绍一些常用的参数
const MaterialApp({ Key key, this.navigatorKey, this.home, // 主界面的内容 widget this.routes = const {}, // 带 router 和路由跳转有关 this.initialRoute, this.onGenerateRoute, this.onUnknownRoute, this.navigatorObservers = const [], this.builder, this.title = '', // *类似标题 this.onGenerateTitle, // 主要用于多语言情况下，需要根据当前语言替换 title，需要使用该值 this.color, // 主题色，如果该值未设置，取 theme.primaryColor,未设置 theme 则取蓝色 this.theme, // App 的主题风格，包括主题色，按钮默认颜色等等 this.locale, // 带 locale 的和多语言适配相关 this.localizationsDelegates, this.localeListResolutionCallback, this.localeResolutionCallback, this.supportedLocales = const [Locale('en', 'US')], this.debugShowMaterialGrid = false, this.showPerformanceOverlay = false, this.checkerboardRasterCacheImages = false, this.checkerboardOffscreenLayers = false, this.showSemanticsDebugger = false, this.debugShowCheckedModeBanner = true, // debug 模式下，是否显示 DEBUG 标示横幅 })复制代码 MaterialApp 继承自 StatefulWidget，它和 MyApp 所继承的类 StatelessWidget，就是日常开发中，自定义部件通常继承的抽象类了。
StatelessWidget是状态不可变部件，通过其构建的部件一般用来展示固定内容，例如需要展示固定的功能按钮列表，不需要根据不同界面状态进行修改其展示内容StatefulWidget是可改变状态的部件，比如我们需要通过网络或者数据库获取数据，然后修改部件锁展示的数据内容，则需要通过StatefulWidget来构建。当然，不是说StatelessWidget不能实现修改界面数据的功能，这就需要涉及到 状态管理 的概念了，后面有机会再讲，这边先埋坑【坑1】
Flutter Scaffold
进入 App 后就需要构建界面了，Flutter 提供了 Scaffold 来快速构建一个 MaterialDesign 风格的界面，还是先看下 Scaffold 的构造函数吧，了解几个比较常用的部分。
const Scaffold({ Key key, this.appBar, // 界面顶部的那条栏，这边需要返回一个 AppBar 实例 this.body, // 界面的内容部分 this.floatingActionButton, // 悬浮部分，可以通过 floatingActionButtonLocation 设置位置 this.floatingActionButtonLocation, this.floatingActionButtonAnimator, this.persistentFooterButtons, this.drawer, // 侧滑抽屉部分，从左侧滑出(应该和语言有关，和文字方向同向) this.endDrawer, // 侧滑抽屉部分，从右侧滑出 this.bottomNavigationBar, // 底部导航栏，就是通常看到的底部 TAB 切换部件 this.bottomSheet, // 展示从底部弹出的，起到提示作用的，通过 showModalBottomSheet 展示 this.backgroundColor, // 界面的背景色 this.resizeToAvoidBottomPadding = true, // 避免 body 被底部弹出部件填充，例如输入法键盘 this.primary = true, // 当前的 Scaffold 是否需要被展示在屏幕最上层 })复制代码 来张图吧，简洁明了
了解完 Scaffold 的整体构造后，我们从上到下，通过构造函数来了解下各个 Widget 的使用方法
AppBar
AppBar({ Key key, this.leading, // 用于设置 AppBar 前置的按钮，例如设置返回我们需要的返回按钮等 this.automaticallyImplyLeading = true, // 是否使用系统默认生成的按钮，如果替换 leading 的默认按钮，最好将该属性设置成 false this.title, // AppBar 所需要展示的组件，传入一个 Widget 实例，通常使用 Text 展示一个标题 this.actions, // AppBar 末尾悬浮的一些操作组件，例如常见的会在末尾设置一个「...」按钮，点击弹出一个 menue 提供给用户操作选择 this.flexibleSpace, // AppBar 的背景，可以设置颜色，背景图等等 this.bottom, // bottom 用于展示顶部导航 TAB this.elevation = 4.0, this.backgroundColor, // AppBar 的背景色，如果只需要修改颜色，可以不通过 flexibleSpace 修改 this.brightness, this.iconTheme, // 按钮的默认样式 this.textTheme, // 文字的默认样式 this.primary = true, this.centerTitle, // 是否将展示的 title 居中 this.titleSpacing = NavigationToolbar.kMiddleSpacing, // AppBar title 两侧的空白间隔 this.toolbarOpacity = 1.0, this.bottomOpacity = 1.0, })复制代码 在展示 AppBar 的 demo 之前，我们先学习几个基本的组件 Text、Image、Icon、Button 分布用于展示文字，图片，图标，按钮
Text
const Text(this.data, { // Text 需要展示的文字 Key key, this.style, // 文字的样式，包括颜色，大小，间距等等属性，这边就不继续展示 TextStyle 构造函数了，不然我怕大家都不想继续看了，稍后通过例子来说明 this.textAlign, // 文字的对齐方式，包括左对齐，右对齐，居中等，详见 TextAlign 类 this.textDirection, // 文字方向，ltr(left to right) 或者 rtl(right to left) this.locale, this.softWrap, // 当文字一行显示不完是否换行 this.overflow, // 如果超出限制的行数，以哪种方式省略未展示的内容 this.textScaleFactor, // 文字缩放比例 this.maxLines, // 最多展示的行数 this.semanticsLabel, })复制代码 说了那么多，相信很多小伙伴都要急着撸代码了吧，接着来展示一些 Text 的示例，接下来的例子都会直接替换 HomePage 内的展示内容，其余都是相同的，接下来请关注 Text 别的部件先忽略，后面会介绍，这边先埋坑【坑2】
import 'package:flutter/material.dart';void main() => runApp(DemoApp());class DemoApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, theme: ThemeData(primarySwatch: Colors.lightBlue), home: HomePage(), ); }}class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Container( padding: const EdgeInsets.only(top: 10.0), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('绿色背景黑色文字展示', style: TextStyle( color: Colors.black, // 设置文字颜色，不可和 foreground 同时设置 fontSize: 24.0, // 字体大小 letterSpacing: 2.0, // 每个字符之间的间隔 background: Paint()..color = Colors.green)), // 背景色 Text('这是一个带红色下划线的文字展示', style: TextStyle( color: Colors.black, fontSize: 24.0, // 文字装饰线，除了 underline 还有 overline, lineThrough， // 不同的样式小伙伴可以通过自己修改代码来查看 decoration: TextDecoration.underline, // 文字装饰线的类型，除了 solid 还有 double,dotted,dashed,wavy 可选 decorationStyle: TextDecorationStyle.solid, // 装饰线的颜色 decorationColor: Colors.red)) ], )), )); }}复制代码 该部分代码查看源码 text_main.dart 文件
最后的展示效果如下图：
Image
/坏笑 按照惯例，我们还是先看下 Image 的构造函数吧
const Image({ Key key, // 一个 ImageProvider 实例，但是 ImageProvider 是一个抽象类，Flutter 已经给我们提供如下 // AssetImage，NetworkImage，FileImage，MemoryImage 这四种图片加载器，为了方便调用 // 我们可以直接通过 Image.asset, Image.network, Image.file, Image.memory 简化， // 通过方法名，可以看出分别从 asset 文件，网络，文件，内存中加载图片 @required this.image, this.semanticLabel, this.excludeFromSemantics = false, this.width, // 图片宽度 this.height, // 图片高度 this.color, // 图片背景色 this.colorBlendMode, // color 和图片的混合模式(这个值比较多，可以一个个尝试) this.fit, // 图片填充方式 fill, cover, contain, fillWidth, fillHeight, scaleDown, none this.alignment = Alignment.center, // 对齐方式 this.repeat = ImageRepeat.noRepeat, // 若未填充满空间，重复展示的方式 this.centerSlice, this.matchTextDirection = false, this.gaplessPlayback = false, this.filterQuality = FilterQuality.low, })复制代码 好了好了，我知道你们又想自己写代码尝试下了，在这之前，需要你先准备一张本地图片，然后在项目的根目录，也就是 lib 文件夹同层，创建一个新的文件夹，命名为 images，把你准备好的图片放到这个目录下。放好之后打开 pubspec.yaml 把图片资源文件注册下
# The following section is specific to Flutter.flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true # 这边注册资源文件，以后有图片文件也可以只注册 images 文件夹，会自动读取内部的文件 assets: - images/ali.jpg复制代码
注册完成后，就可以继续愉快的撸代码了~
class HomePage extends StatelessWidget { final String _assetAli = 'images/ali.jpg'; final String _picUrl = 'https://timg05.bdimg.com/timg?wapbaike&quality=60&size=b1440_952&cut_x=143&cut_y=0&cut_w=1633&' 'cut_h=1080&sec=1349839550&di=cbbc175a45ccec5482ce2cff09a3ae34&' 'src=http://imgsrc.baidu.com/baike/pic/item/4afbfbedab64034f104872baa7c379310b551d80.jpg'; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Container( padding: const EdgeInsets.only(top: 10.0), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ // 这种展示图片方式和下一种会有相同的效果 Image(image: AssetImage(_assetAli), width: 80.0, height: 80.0), // 接下来加载图片都会使用这些比较方便的方法 Image.asset(_assetAli, width: 80.0, height: 80.0), // 加载一张网络图片 Image.network(_picUrl, height: 80.0, // 横向重复 repeat: ImageRepeat.repeatX, // MediaQuery.of(context).size 获取到的为上层容器的宽高 width: MediaQuery.of(context).size.width), // 通过设置混合模式，可以看到图片展示的样式已经修改 Image.asset(_assetAli, width: 80.0, height: 80.0, color: Colors.green, colorBlendMode: BlendMode.colorDodge), // 会优先加载指定的 asset 图片，然后等网络图片读取成功后加载网络图片，会通过渐隐渐现方式展现 // cover 方式按照较小的边布满，较大的给切割 // contain 会按照最大的边布满，较小的会被留白 // fill 会把较大的一边压缩 // fitHeight, fitWidth 分别按照长宽来布满 FadeInImage.assetNetwork( placeholder: _assetAli, image: _picUrl, width: 120.0, height: 120.0, fit: BoxFit.cover), // Icon 相对属性少了很多，需要传入一个 IconData 实例，flutter 提供了很多图标， // 但是实际情况我们需要加入我们自己的图标，这边再埋坑【坑3】 // size 为图标显示的大小，color 为图标的颜色，这边通过 Theme 获取主题色调 Icon(Icons.android, size: 40.0, color: Theme.of(context).primaryColorDark) ], )), )); }}复制代码 该部分代码查看源码 image_main.dart 文件
最后的效果如下：
Button
Flutter 提供了各种类型的 Button 几乎是大同小异的，这边就抽取一些比较常用的展示下效果，常用的主要有 RaisedButton 、FlatButton、IconButton、OutlineButton、MaterialButton、FloatActionButton、FloatingActionButton.extended
Button 都有一个 onPress 参数，是 VoidCallback 类型的参数，通过查看源码可以知道 VoidCallback 是无参无返回值的一种类型参数。如果该参数传入的值为 null 那么这个按钮的就不可点击状态，无点击效果，等会可以在例子中查看。还有就是 child 参数，这里就是传入你需要展示的内容，比如 Text、Icon 等等。别的参数基本可以通过参数名了解，这边不扩展了(再看源码我怕你们都不想继续看下去了...)
Talk is cheap, show me the code
class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Container( padding: const EdgeInsets.only(top: 10.0), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ RaisedButton( onPressed: () { print('This is a Rased Button can be clicked'); }, child: Text('Raised Enable'), ), RaisedButton(onPressed: null, child: Text('Raised Disable')), FlatButton( onPressed: () => print('This is a Flat Button can be clicker'), child: Text('Flat Enable'), ), FlatButton(onPressed: null, child: Text('Flat Disable')), IconButton(icon: Icon(Icons.android), onPressed: () {}), IconButton(icon: Icon(Icons.android), onPressed: null), MaterialButton(onPressed: () {}, child: Text('Material Enable')), MaterialButton(onPressed: null, child: Text('Material Disable')), OutlineButton(onPressed: () {}, child: Text('Outline Enable')), OutlineButton(onPressed: null, child: Text('Outline Enable')), ], )), ), floatingActionButton: FloatingActionButton.extended(onPressed: () {}, icon: Icon(Icons.android), label: Text('Android')), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, ); }}复制代码 该部分代码查看源码 button_main.dart 部分
最终的效果图：
这篇终于到末尾了，最后留了 3 个坑等以后解决
最后代码的地址还是要的：
-
文章中涉及的代码：
-
基于郭神
cool weather接口的一个项目，实现BLoC模式，实现状态管理： -
一个课程(当时买了想看下代码规范的，代码更新会比较慢，虽然是跟着课上的一些写代码，但是还是做了自己的修改，很多地方看着不舒服，然后就改成自己的实现方式了)：
如果对你有帮助的话，记得给个 Star，先谢过，你的认可就是支持我继续写下去的动力~