Flutter入门

一. 安装及环境配置

$ cd workspace  //切换到要安装的目录下
$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ git clone -b dev https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor    //运行完成后，根据给出的提示做相关缺失的处理

Android Studio安装Flutter插件（会要求同时安装Dart插件）

二. 新建一个项目，显示"Hello World"

1. widget的主要工作是提供一个build()方法来描述如何根据其他较低级别的widget来显示自己。
2. 在Flutter的响应式风格的框架中，调用setState() 会为State对象触发build()方法，从而导致对UI的更新
3. 热重载的时候，如果没有清除数据，那么之前运行的数据依旧还在（比如一个列表，热重载的时候修改数据，新数据追加在后面，之前运行的数据还在）
4. 在Flutter中，导航器管理应用程序的路由栈。将路由推入（push）到导航器的栈中，将会显示更新为该路由页面。 从导航器的栈中弹出（pop）路由，将显示返回到前一个路由。
   => 新页面的内容在在MaterialPageRoute的builder属性中构建，builder是一个匿名函数。
   => 添加Navigator.push调用，这会使路由入栈（以后路由入栈均指推入到导航管理器的栈）
   => ListTile的divideTiles()方法在每个ListTile之间添加1像素的分割线。 该 divided 变量持有最终的列表项。

N. 运行过程中遇到的问题

1. 新建项目，首次运行报错：Please review your Gradle project setup in the android/ folder.
   解决：多运行几次，未做任何修改，好了...
2. 编译没问题，但是点击运行按钮，不报错也不能安装apk，会突然没反应
   解决：运行flutter run，在窗口弹出错误信息

D8: Program type already present: android.support.v4.media.MediaBrowserCompat$ConnectionCallback$ConnectionCallbackInternal
The Gradle failure may have been because of AndroidX incompatibilities in this Flutter app.

根据错误信息提示，可知是由于安卓依赖版本不一致导致的，直接升级为AndroidX即可。步骤如下：
1》选中android文件夹，右键选择，Flutter ——> Open Android Module in Android Studio；
2》打开新窗口，初始化完成后，选择Refactor ——> Migrate to AndroidX；
3》检测完成后，下方会提示需要升级的地方，确认后点击“Do Refector”；
4》升级完成后，关闭窗口即可。
这个时候再运行Flutter，就没问题啦~~~~~~~~~~~~

3. 网络请求的时候报错：Unhandled Exception: FormatException: Invalid radix-10 number
   解决：

var uri = Uri.https("https://www.wanandroid.com/", "wxarticle/list/408/1/json");
去掉“https://”即可
var uri = Uri.https("www.wanandroid.com/", "wxarticle/list/408/1/json");

4. 数据解析出错
   解决：建议使用json_serializable库，具体接入链接

5. listView的item设置点击事件onTap，只在初始化item的时候执行一次，之后点击没反应
   解决：

错误写法：
onTap:  _itemClick(context, i);

正确写法：
onTap: () {
    _itemClick(context, i);
}

6. 不设置AppBar的时候，内容和状态栏重叠
   解决：内容的根布局写在SafeArea内

Widget commonPage(String titleStr, List actions, Widget bodyWidget) {
    return new MaterialApp(
        title: "forward_flutter",
        home: new Scaffold(
            appBar: titleStr == null && actions == null ? null :
                new AppBar(
                    title: new Center(child: new Text(titleStr),),
                    actions: actions,
                ),
            body: new SafeArea(child: bodyWidget, top: true,),
        ),
    );
}

7. 引入image_picker后，编译报错：com.android.builder.dexing.DexArchiveMergerException
   解决：在android/app/build.gradle中添加以下配置

android {
    defaultConfig {
        multiDexEnabled true
    }
}
dependencies {
  compile 'com.android.support:multidex:1.0.2'
}

改完后，将Android的依赖项全部升级为AndroidX，步骤参照问题2

N+1. 原生开发中加入Flutter（原生项目～/Desktop/workspace/MyApp）

1. 在原生项目所在的目录下，执行以下命令行

$ cd Desktop/workspace  //进入项目所在的目录下
$ flutter create -t module my_flutter  //创建一个名为my_flutter的Flutter Module

**问题： 其间，报错 -bash: flutter: command not found
解决：打开(或创建) $HOME/.bash_profile文件，添加下列内容

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH  //PATH_TO_FLUTTER_GIT_DIRECTORY为自己电脑上的flutter安装目录

接下来，运行 source $HOME/.bash_profile 刷新当前终端窗口。

2. 在文件中添加以下内容

// MyApp/settings.gradle
setBinding(new Binding([gradle: this]))                                 
evaluate(new File(                                                   
  settingsDir.parentFile,                                              
  'my_flutter/.android/include_flutter.groovy'             
))   

// MyApp/app/build.gradle
compileOptions {
  sourceCompatibility 1.8
  targetCompatibility 1.8
}

dependencies {
  implementation project(':flutter')
  ....
}  

⚠️ 注意：如果不想手动添加，可以选中MyApp，new Module时选择 “Import Flutter Module”，然后添加刚才创建的Flutter Module即可。推荐这种方式添加，避免settings.gradle中路径出错。

3. 进行flutter开发，之后正常运行即可