Flutter的基本介绍通过Flutter的第一个项目

前言

Flutter从2018年2月底在世界移动大会（MWC）发布第一个bata版；5月的GoogleI/O大会上发布 bata3；6月底GMTC宣布了首个预览版；9月谷歌开发者大会上发布预览版2；12月宣布发布正式版1.0版。而且5月I/O大会后据说闲鱼已经在使用了，可谓发展之迅速，应该还是很被大家看好的。

本文算是看了谷歌官方文档及flutter文档的翻译加上自己的肤浅理解的总结吧。原文可查看官方文档链接：

https://mp.weixin.qq.com/s/hCIN42OMmmc6HkOveegwWQ

https://flutter.io/docs/get-started

基本概念

跨平台的UI工具包。即一套代码可以同时在iOS和Android上构建，逻辑层还是可以由不同平台各种实现。可以把 Flutter 理解为应用内置的一个引擎，把这个引擎引入到现有的工程里。

优点

• 在Flutter里几乎所有内容都是widget，通过不同的widget堆叠任何图形、文本、视频和控件。不受框架局限性的干扰，同时适用于iOS和Android。
• 速度快，它基于 Skia 2D 硬件加速图形引擎，该引擎也同样用在了 Chrome 和 Android 平台。Flutter 的代码基于 Dart 平台，它可以被编译成 iOS 和 Android 平台上 32 位和 64 位的 ARM 代码。
• 高效。Flutter 引入了 Stateful Hot Reload（保持应用状态的热重载），可在应用运行时修改应用UI而不用重新启动。
• 开放的。Flutter 是一个基于 BSD-style 许可的开源项目。

安装环境及下载插件

参考官网地址：https://flutter.io/docs/get-started/install/macos

1、下载flutter源码并解压

2、配置环境变量

我选择配置全局的

• 打开终端，在根目录下使用open .bash_profiler打开bash_profiler.
• 添加flutter的环境变量：export PATH=$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin,也就是flutter的bin目录。
• 执行命令刷新文件：source .bash_profiler
• 验证是否配置成功：echo $PATH，输出的环境变量中有flutter的变量。

3、检查flutter需要的软件是否齐全

输入命令：flutter doctor，会出现以下类似文案，表明的是需要的环境是否已OK，如果需要更新，跟着提示的命令行走即可。

[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14 18A391, locale
    zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with
      Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install with Brew:
        brew install ios-deploy
[✓] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

1. 已安装flutter稳定版
2. Android 工具链不完善—使用提示的命令完善
3. iOS工具链不完善(iOS真机调试)
4. AS没有安装flutter插件，打开AS-preference-添加插件。

完善iOS工具链注意点：

1. brew update 可能需要较长的时间。

2. brew install --HEAD usbmuxd 出现错误：

   An exception occurred within a child process:
     RuntimeError: /usr/local/opt/autoconf not present or broken
   Please reinstall autoconf(或者是automake\libtool\pkg-config). 
   

   **解决办法：**重新安装autoconf，如果系统中有autoconf，先执行brew unlink autoconf,然后执行brew reinstall autoconf

3.brew install --HEAD usbmuxd 出现错误：

make install
Last 15 lines from /Users/zeng/Library/Logs/Homebrew/usbmuxd/03.make:
        uint64_t ri_system_time;
        ^
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.14.sdk/usr/include/sys/resource.h:213:2: error: unknown type name 'uint64_t'
        uint64_t ri_pkg_idle_wkups;
        ^
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.14.sdk/usr/include/sys/resource.h:214:2: error: unknown type name 'uint64_t'
        uint64_t ri_interrupt_wkups;
        ^
fatal error: too many errors emitted, stopping now [-ferror-limit=]
20 errors generated.
make[1]: *** [collection.lo] Error 1
make[1]: *** Waiting for unfinished jobs....
20 errors generated.
make[1]: *** [socket.lo] Error 1
make: *** [install-recursive] Error 1

READ THIS: https://docs.brew.sh/Troubleshooting

**这里寻找了很多解决版本解决不了，如各位有好的解决办法烦请告知！**这些错误不影响Flutter项目的构建，只不过不能使用iOS真机调试，模拟器还是可以的，但是不知道是上面报错的原因还是电脑问题，每次使用iOS的模拟器，电脑的风扇就转的特厉害，发热的特厉害。android模拟器和真机没有问题。

项目架构

• android: Android平台代码

• ios:ios 平台代码

• lib:跨平台代码，也就是Flutter项目的主要代码

  • main.dart :Flutter项目的入口文件

• test:测试代码

• pubspec.lock :由pub生成的已经被pull下来的包及其版本号。

• pubspec.yaml ：项目描述文件，这里填写项目名称、版本号，构建环境，添加的依赖

  name: flutter_app    //项目名称
  description: A new Flutter application. //描述
  
  version: 1.0.0+1  //构建版本
   
  environment:
    sdk: ">=2.0.0-dev.68.0 <3.0.0"
  
  //正式版添加的依赖，最后编译到程序中
  dependencies:
    flutter:
      sdk: flutter
    cupertino_icons: ^0.1.2
    english_words: ^3.1.0
    
  //开发版本添加的依赖，不会编译到程序中
  dev_dependencies:
    flutter_test:
      sdk: flutter
      
  //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.
    //是否适用material-design 的icon
    uses-material-design: true
  
  //将资源添加到这里才可以使用
    # To add assets to your application, add an assets section, like this:
    # assets:
    #  - images/a_dot_burr.jpeg
    #  - images/a_dot_ham.jpeg
  

程序编写

1. **引入三方包：**在pubspec.yaml 文件中添加包名。

   dependencies:
     flutter:
       sdk: flutter
   
     cupertino_icons: ^0.1.2
     english_words: ^3.1.0  //添加的第三方包名称及版本号
   

2. 在文件中引入包名：import ‘package:包名/类名’

Flutter 的入口方法：

///入口
void main() => runApp(MyApp());

///StatelessWidget 无状态,使得app本身就是一个weight
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
//    final word = WordPair.random();

    return MaterialApp(
      //应用标题
      title: 'Flutter Demo',
      home: RamdowWords(),

      ///Scaffold 提供一个默认的 bar title  body属性
//      home: Scaffold(
//        appBar: AppBar(
//          title: Text("welcome to flutter"),
//        ),
//        body: Center(
////          child: Text("Hello world"),
////          child: Text(word.asPascalCase),
//          child: RamdowWords(),
//        ),
//      ),
    );
  }
}

说明：

• 在Flutter中几乎所有东西都是widget。

• StatelessWidget:无状态weight，不可变，也就是他们的属性无法被改变，都是使用final修饰。

• StatefulWidget:有状态widget，可以在生命周期内发生状态的改变。 创建有状态的部件一般需要创建两个类：一个继承StatefulWidget，重写：createState()方法，另一个State class，主要处理程序的大部分逻辑及状态。

• HotReload:需要保持App运行，不能关闭App。

//有状态的weight
class RamdowWords extends StatefulWidget {
  //创建他的State class
  @override
  State createState() {
    // TODO: implement createState
    return new RamdowWordsState();
  }
}

//State class
//处理程序的大部分逻辑和状态
class RamdowWordsState extends State {
  final _suggestiOns= [];
  final _fOntSize= const TextStyle(fontSize: 18.0);

	//重写build 方法
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
//    final wordPair = WordPair.random();
    //创建 数组
//    return Text(wordPair.asPascalCase); //首字母大写

      return Scaffold(
        appBar: AppBar(
          title: Text("generator name"),
        ),
        body: _buildSuggestions(),
      );
  }
}

生成Listview 的方法

 //添加生成list view的方法
  Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(16.0),
        //每次都会回调到这
        itemBuilder: (context, i) {
          if (i.isOdd) return Divider(); //1像素的分割线

          // i 依次/2 的商,这将计算ListView中实际的单词配对数量减去分频器小部件。
          final index = i ~/ 2;
          //达到底部，多添加 10个item
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10));
          }

          return _buildRow(_suggestions[index]);
        });
  }
  
   
   //设置每一行的名字
  Widget _buildRow(WordPair wordPair) {
      return ListTile(
          title: Text(wordPair.asPascalCase,style: _fontSize,),

      );
  }
}

效果图（使用官方图）：