flutter 当初是越来越火了，当初作为一个 iOS 开发，如果你不会 flutter 都如同不算个正常人似的？而且当初的 flutter 状况，有点像 2012 年那会儿刚刚衰亡的 iOS，Android 开发一样，会点皮毛 UI 就能够晋升不少身价 … 这些年过去，有有数的前端跨平台框架衰亡。却只有 flutter 一家独秀，阐明它还是有两把刷子的。明天这篇文章内容是基于 Mac 和 Android Studio 根底来开发 flutter 的，如果你还没有配置好开发环境，能够在网上搜寻，或者间接到官网装置。这篇文章次要用来记录我学习 flutter 的过程，如果你也对 flutter 感兴趣能够跟着一起练习。

配置好 Flutter 环境之后，开始创立咱们的第一个 Flutter 工程

创立第一个 Flutter 工程

关上 iTerm2，cd 到~/AndroidStudioProjects 目录，输出以下命令，没有 iTerms 的应用 Mac 零碎自带的 Terminal 也行。
flutter create flutter_demo
这里须要留神，AndroidStudio 项目名称不能应用大写字母，这里举荐应用小写字母加下划线给工程命名。

关上对应的目录，能够看到新建了一个 flutter_demo 目录

接下来，cd 到 flutter_demo 目录，在终端输出 flutter run 命令，它就会运行我的项目，如果你电脑连贯了真机，就会主动运行到真机上，没有真机会去寻找模拟器并运行，模拟器也没有，就会关上一个 Chrome 网页运行我的项目(flutter 我的项目目前能够运行在 iOS，Android，web 上)。我这里连上了 iPhone 真机，运行我的项目会报一个 BUILD FAILED 的谬误:

起因是 flutter_demo 我的项目生成的 iOS 我的项目默认的 bundle identifier 咱们用不了，去 iOS 我的项目外面批改一下就好了

这里留神咱们收费的开发者证书，在 iPhone 上最多装置 3 个开发中的 APP，多了就装置不了，删掉之前的 APP 就好了，再次运行flutter run

能够看到这里给出了 flutter 运行的一些要害命令，Hot reload 热重载，这个个性对咱们开发 UI 时还是比原生的体验好不少的，它不必咱们从新运行我的项目就能看到 UI 的一些扭转。Hot restart 热重启，意思不必退出 APP，就间接从新运行了。此时真机上就关上了咱们的第一个 flutter 工程的 APP

HelloFlutter

下面是通过命令创立一个 flutter 我的项目，当然在理论开发过程我，咱们个别不会这么操作。应用 Android Studio 来创立 flutter 我的项目。没有这个选项的同学，在 Android Studio 的插件外面抉择 flutter 并装置就有了，如果提醒还须要装置 Dart 就一块装置了，flutter 应用的是 Dart 语言。iOS 开发者没必要被这个新语言给吓到了，古代的语言根本都差不了太多，敲着敲着就相熟了

点击后会呈现以下界面，目前咱们抉择 Flutter App 就好了

下一个界面会让咱们设置工程名称，工程地位，工程形容，工程组织，Android 语言，iOS 语言等等 … 我这里设置工程名称为 hello_flutter, 其余的默认抉择就好了 … 也能够依据你本人的须要抉择

点击 Finish 之后就能够看到残缺的工程目录了，flutter 工程的主入口，跟咱们 iOS 我的项目一样有一个 main.m 文件，flutter 的是 main.dart 文件，能够看到这个文件外面曾经有不少初始的代码了，明天是咱们第一次接触 flutter 我的项目，就不要这里的代码，全副删掉，咱们从第一行代码开始本人敲进去

• 导入 material.dart 头文件(相当于 iOS 中 UIKit)
• 写一个 main()函数作为主入口
• 调用 runAPP()函数
• Center 类是用来布局的类，示意一个地位，child 属性示意他有的子控件的意思。Text 类就是咱们文本类，有点儿咱们 iOS 的 UILabel 的意思，Text 类的第一个参数就是具体的文本，省略了参数名，第二个参数 textDirection 示意文本显示方向，咱们习惯的从左至右就是TextDirection.ltr，left to right。像一些阿拉伯语言，希伯来语的文字就是从右到左显示的，我这里试了一下 hello world 的方向并没有变动，可能还须要其余设置吧 …

首先作为一个开发者，有一个学习的气氛跟一个交换圈子特地重要，这是一个我的 iOS 开发公众号：编程大鑫，不论你是小白还是大牛都欢送入驻，让咱们一起提高，独特倒退！（群内会收费提供一些群主珍藏的收费学习书籍材料以及整顿好的几百道面试题和答案文档！）

运行之后 iPhone 显示如下：

自定义 Widget

flutter 外面的 Widget 类叫作小部件，是 flutter 外面常常用到的，它分为有状态的 Stateful 和 Stateless 无状态的。其中无状态的比较简单，咱们先自定义一个类 CustomWidget 继承自 StatelessWidget。咱们自定义的 Widget 想要显示到屏幕上须要实现一个 build 的函数，零碎会调用这个函数来渲染咱们想要显示到屏幕上的内容

这个时候，如何将咱们的 hello flutter 显示到屏幕呢，能够看到 runApp 函数外面有一个 Center 类，咱们 CustomWidget 类的 build 办法也是返回的一个 Center 类，所以能够间接将咱们 CustomWidget 初始化给 runApp 作参数

有些时候，咱们发现 hot reload 无奈更新界面，能够应用 hot restart，如果 hot restart 还是无奈更新界面，那就须要从新运行一下就能够了。此时咱们发现 main()函数外面就只有一句调用 runApp()代码，在 Dart 语言中，函数定义如果只有一句代码，那么能够省略成如下箭头模式

设置文字款式 style

按住 command 再用鼠标左键点击 Text 类，就会跳到一个 text.dart 文件，会看到一个 this.style 属性，再次按住 command 点击，会来到 style 的申明局部：

这里的 final 示意不可变，常量的意思，相似于 Swift 外面的 let。能够看到 style 是一个 TextStyle 类型, 查看 TextStyle 类，会发现外面很多的属性，比方 color，backgroundColor，fontSize，fontWeight… 这些都是很相熟的属性, 接下来咱们设置一下 hello flutter 的一些文字款式

应用 Android Studio 快捷键 command + \ 查看界面

Material App

在 flutter 提供的头文件 material.dart 中，提供了一个疾速构建 APP 的类型 MaterialApp，咱们能够应用它来疾速构建一个 APP 的根底框架。
咱们先新建一个 App 类来写咱们的代码

而后咱们在 App 的 build 办法中，返回一个 MaterialApp 类，如果 MaterialApp 不传入任何参数的话，运行后会发现 APP 整个屏幕变成红色，并且显示了一行文字，意思是出错了之类的，阐明咱们的 MaterialApp 应该是须要传入一个必要的参数的。

没错就像咱们 iOS 的 APP 同样须要一个 rootViewController 一样，MaterialApp 函数须要一个 home 参数，home 参数能够传一个 Widget 类，如果传入咱们刚刚写的 CustomWidget 类，运行后发现有了一点不一样的中央

右上角有一个 debug 的图标，hello flutter 上面也呈现了两条横线。

flutter 还提供了一个 Scaffold 的类，这个类翻译过去叫作脚手架，有点像是咱们 iOS 中的一些根底控制器 (比方 UITabBarController，UINavigationController) 的封装。咱们来应用一下这个类，这个 Scaffold 类有一个 appBar 的属性，这个属性就跟咱们的 UINavigationController 的 UINavigationBar 一样，appBar 是一个 AppBar 类型，它的 title 属性能够传入一个 Widget，咱们传入一个 Text 类试试看。Scaffold 类除了 appBar 属性，还有一个 body 属性示意的内容，把这个 body 设置为咱们刚刚的 CustomWidget，看看是什么成果，代码如下：

APP 上显示成果：

这个时候，是不是发现像那么回事了

MaterialApp 还有一个 theme 的属性，这个属性用了配置 app 的主题，设置一下主题颜色代码如下：

APP 上显示成果：

初探 ListView

在摸索 ListView 之前，咱们先把模型实现一下，咱们这里展现的一组对于汽车的图片和名字，就定义一个 Car 类，咱们新建一个 car 文件用来寄存咱们的模型代码，代码如下：

再定义一个数组，用来寄存一组汽车模型，我这里放了一组网络图片，你能够间接应用，也能够本人在网上找几张图片，填入模型数组中

final List<Car> cars = [
  Car(
    name: '保时捷 918 Spyder',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '兰博基尼 Aventador',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '法拉利 Enzo',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-a1d64cf5da2d9d99?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: 'Zenvo ST1',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-bf883b46690f93ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '迈凯伦 F1',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-5a7b5550a19b8342?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '萨林 S7',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-2e128d18144ad5b8?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '科尼赛克 CCR',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-01ced8f6f95219ec?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '布加迪 Chiron',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-7fc8359eb61adac0?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '轩尼诗 Venom GT',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-d332bf510d61bbc2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '西贝尔 Tuatara',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-3dd9a70b25ae6bc9?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  )
];

而后回到 main.dart 文件新建一个 Home 类，用来寄存咱们 ListView 相干代码, 和 Xcode 一样 Android Studio 同样有代码块性能，间接输出 stl 就会呈现提醒，回车就会生成 StatelessWidget 类相干代码。咱们将 Scaffold 相干的代码挪到 Home 中来。

接下来就是正式开始应用 ListView 了，ListView 跟其余个别的类不太一样，它的初始化须要调用 build 办法，并且传入两个参数，一个是 itemCount，一个是 itemBuilder，有点相似咱们 UITableView 的 cellForRow 办法，只不过咱们 UITableView 应用的是代理的设计，而这里的 ListView 应用的代码块回调的设计。

这里说一个 Android Studio 的比 Xcode 好用的中央，如图的 itemCount 应用了 cars.length 然而提醒 cars 报错，是因为没有导入 car.dart 文件，给了个小红灯泡。这个时候，咱们光标挪动到 Car 类上，而后应用 option + 回车会弹出一个菜单，再按一次回车就能够导入咱们的 car.dart 文件了

itemBuilder 属性就是一个代码块，用来配置每个 item 的款式，咱们能够先对立返回一个 Text 文本看看成果。

显示成果就是相似于 tableView 一样的一行行的文本

接下来介绍一个相似于 UIView 的容器类 Container，它跟 UIView 相似，能够设置一些色彩，间距，子控件之类的，咱们来试一下，将 Text 改为 Container，child 属性就是子控件的意思，再给 child 设置为 Text，文本就是 cars 外面的 name，代码如下：

再看一下显示成果

那么如果咱们当初想要显示图片加文字的话应该怎么做呢？这里再介绍一个 Column 类, 和后面介绍 Center 类相似，同样是属于布局的类，Column 示意高低的布局，因为咱们想把图片和文字高低摆放，所以须要用到 Column 这个类。而后对于图片的显示，这里咱们先不讲怎么去网络申请，而是间接应用 Image 类提供的一个办法去加载网络图片，代码如图：

显示成果如图：

这个时候，你应该也猜到了，如果移动 children 外面 Text 和 Image 和程序，会发现图片和文字的程序就替换了，是不是很容易了解。如果想要调整图片和文字之间的间距怎么调呢，应用 SizedBox 类，传一个 height 就能够调整间距了，也能够持续应用 Container, 代码如下：

如果感觉 itemBuilder 的代码太长，也能够将它的代码封装到一个办法外面，例如我这里应用 iOS 中的_cellForRow 来命名这个办法。应用下划线的意义的是示意这是一个公有办法。

APP 右上角会发现有一个 debug 图标，这个图标的显示在 MaterialApp 类外面有一个属性能够管制显示暗藏。debugShowCheckedModeBanner: false

罕用 Widget 介绍

在介绍罕用 Widget 之前，咱们想把刚刚写的 ListView 相干代码，封装到一个文件内，这样不便当前咱们回头学习。listView_demo 代码如下：

这个时候，main.dart 文件内的 Home 类的 build 办法里，返回咱们的 ListViewDemo 初始化办法就行了。

而后再新建一个新的 base_widget 文件，用来寄存咱们将要介绍的根底 Widget 代码。

能够在 main.dart 文件中间接应用我的 BaseWidgetDemo 初始化办法，这样咱们就不须要再去 main.dart 文件批改代码了。每介绍一个新 Widget 间接批改 BaseWidgetDemo 的 build 办法返回值为咱们的自定义类 xxxDemo()就好了

第一个介绍是 Text

Text

Text 咱们一开始讲过了，这里就再讲一点对于字符串相干的，如果须要拼接字符串能够应用 $ 符号，如果字符串中有特殊符号，那就应用 ${}。其余 Text 罕用的属性，跟咱们 iOS 中都差不太多，须要留神的是 Text 的款式，是在 style 外面设置的。上面看一下 APP 显示的成果

RichText

RichText 就是富文本，它的 text 属性能够传一个 TextSpan 的类，这个 TextSpan 类能够设置 text 文本，设置 style 款式，还能够设置 children 子控件，这样就能够有限加花色拼接各种字符串在一起，代码如下

APP 上显示的成果：

Container，Row

Container 是个容器，Row 是个用于布局的类，跟 Column，Center 相似，依据代码查看一下 APP 的显示，就能大略明确意思了，代码如下：

APP 显示如下：

总结

明天介绍了 Flutter 外面的许多的根底 Widget，有用于布局的 Center，Row，Column… 有用于显示文本的 Text，RichText，TextSpan… 有列表展现 ListView，有基础架构 Scaffold，MaterialApp 类，尽管货色有点多，但根本还没有什么难以了解的内容。