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'
    }
}

再次运行项目,终于见到了页面-:)

写在最后

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

    原文作者:sweetair
    原文地址: https://blog.csdn.net/u014199860/article/details/85221613
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞