Flutter笔记（1）——初识Flutter

 

目录

一、环境搭建

二、连接设备

三、示例项目运行

---

最近接到了手机App的开发任务，而且决定选用最新的Flutter作为开发框架，完全不会，没关系，跟着互联网上的资料一点点学习，在此记录项目进行过程的关键节点及相关学习心得，供列位同道批评指正。

一、环境搭建

Flutter的搭建，在https://flutterchina.club/get-started/test-drive/中有非常详细的介绍，在此不做赘述，只记录笔者在实际搭建中的过程及注意事项。

1.安装Android Studio   下载Android Studio并安装Flutter及Dart插件

2.安装Flutter   此处需要你有Github的账号，在Github上搜索Flutter，找到相关项目，将其clone到本地。此处需要注意的是，Flutter后续在运行中，会从远程仓库中更新程序，所以此处不可以使用github的打包下载功能。如果你是第一次使用Github，去安装个git吧，在欲创建本地仓库的目录下右键菜单→Git Bash Here的弹出窗口中输入

git clone https://github.com/flutter/flutter.git

3.安装Flutter SDK   

更新环境变量

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

 运行Flutter目录下的flutter_console.bat，在弹出窗口中运行flutter doctor，检查本机的flutter环境，并自动下载所需内容。此处有一个比较坑人的地方：此bat是基于PowerShell5.0的，而在笔者的Win7中，PowerShell只有2.0，曾导致flutter doctor无法正常运行，需要手动下载并安装PowerShell5.0才可以继续。

等待flutter doctor运行结束并按照其的提示改过错误之后，会提示无设备连接，此时代表flutter已成功安装

二、连接设备

工欲善其事必先利其器，只有编辑器没有调试设备是没有灵魂的开发

这一步，本想以夜神模拟器进行调试，但是笔者一顿操作，还是没能成功，于是选择连接自己的华为手机进行调试

Android手机要进行调试一定要打开开发者选项并启用USB调试，打开的方法其实是大同小异的；打开设置，找到关于手机，点击版本号5次即可

正确连接后，手机会提示允许设备调试的信息，总是允许即可。

三、示例项目运行

手机能够连接上之后，再次运行flutter doctor你会发现设备已连接，此时就可以在你的手机中运行示例项目了。

打开Android Studio，创建一个Flutter项目，右上角选中你的设备，点击运行。你的示例项目就可以在手机上运行了！！

网上的大多数教程都是这么教我的，但是！！！

受限于国内的网络环境，根本不可能成功。

你需要做什么呢？

1.找到你电脑中的隐藏文件夹.gradle，比如笔者的文件夹在这里，下载gradle并解压进去

gradle下载地址：http://services.gradle.org/distributions/

笔者使用的是gradle-4.10.2-all版本

C:\Users\Administrator\.gradle

点击运行后，Android Studio会试图自动下载gradle，需要将下载好的gradle解压放进去，解压后路径应该类似这样：

C:\Users\Administrator\.gradle\wrapper\dists\gradle-4.10.2-all\9fahxiiecdb76a5g3aw9oi8rv\gradle-4.10.2

你看到的9fahxiiecdb76a5g3aw9oi8rv就是程序自动生成的目录了，你的也许会不一样，变通一下就好

2.找到Flutter SDK中的flutter.gradle文件，把其中的buildscript部分修改成如下形式

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

 3.修改项目中的build.grade文件，如图所示

4.保证自己的网络畅通，十分重要！！！（我的流量！！！/大哭）

再次点击运行，等待程序自动下载更新并安装好调试所需内容后，设备上可以正确启动App并看到示例项目。

搞定收工，更多精彩，请持续关注