Flutter入门填坑记录

入坑记

选择入坑flutter，参考Flutter中文网

安装Flutter

配置环境变量$HOME/.bash_profile，flutter为中国区提供了镜像，避免开发者无法访问

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH={{flutter_sdk}}/flutter/bin:$PATH

这里{{flutter_sdk}}替换成稍后git clone下来得flutter路径。
配置之后，为使其永久生效，需要执行命令source ~/.bash_profile。
在你{{flutter_sdk}}目录下执行git clone -b dev https://github.com/flutter/flutter.git，
这一步完成之后，可以运行flutter doctor查看当前环境是否满足flutter配置。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, v1.1.4, on Mac OS X 10.14.2 18C54, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 27.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2018.3.2)
[✓] VS Code (version 1.30.1)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

如上所示[✓] 表明此项环境已达标。
当出现[✗]时，依据提示执行相关命令即可。

VSCode安装flutter插件，运行demo到模拟器

创建新的应用

1. 启动 VS Code
2. 调用 View>Command Palette…
3. 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
4. 输入 Project 名称 (如hello_world), 然后按回车键
5. 指定放置项目的位置，然后按蓝色的确定按钮
6. 等待项目创建继续，并显示main.dart文件

运行DEMO到IOS模拟器

1. 确保在VS Code的右下角选择了目标设备IOS Simulator
2. 按 F5 键或调用Debug>Start Debugging
3. 等待应用程序启动
4. 在IOS模拟器查看应用程序

运行demo到Android模拟器

1. 确保在VS Code的右下角选择了目标设备–通过Android Studio AVD创建的模拟器
2. 按 F5 键或调用Debug>Start Debugging
3. 等待应用程序启动
4. 在Android模拟器查看应用程序

填坑

然而，就是这个Android模拟器调试，跳了一个又一个坑。
先是VSCode一直报错，然后使用Android Studio运行，依然报相同的错误。终于，在经过了多次的摸索之后，打开了大门。

1. ANDROID_SDK_ROOT未配置报错

环境变量~/.bash_profile中添加如下配置

export ANDROID_HOME=/Users/haolican/Library/Android/sdk
export ANDROID_SDK_ROOT=/Users/haolican/Library/Android/sdk
export ANDROID_AVD_HOME=/Users/haolican/.android/avd

执行命令source ~/.bash_profile生效。

2. initialize gradle 失败

调试时一直提示initialize gradle失败，使用Android Studio创建项目运行依旧如此。
手动下载gradle-4.10.2-all.zipgradle官网下载地址，放置到/Users/{{username}}/.gradle/wrapper/dists/gradle-4.10.2-all/9fahxiiecdb76a5g3aw9oi8rv文件夹下，重新调试生成，就报下一个错了。?

3. 各种文件添加失败

修改{{project}}/android/build.gradle

buildscript {
    repositories {
        // google()
        // jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

allprojects {
    repositories {
        // google()
        // jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
}

修改/{{flutter_sdk}}/flutter/packages/flutter_tools/gradle/flutter.gradle(flutter_sdk为flutter路径)

buildscript {
    repositories {
        // google()
        // jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

再次运行项目，终于见到了页面-:）

写在最后

描述的内容不够详细，只是针对几个绊住脚步的点做了下记录。