Flutter篇章之环境搭建

 开篇

我出这个教程，是想记录一下自己的学习历程，期间也是踩了好多坑，耗费了很多时间，同时也希望帮助到和我一起正在学习flutter的小伙伴们，一起走进flutter的世界。

前言

学习任何一门新东西， 先扪心三问，是什么？ 怎么用？ 为什么这么用？ 废话不多说， 直接上正菜

一、flutter是什么？

Flutter是一个开源的UI工具包，它属于跨平台开发工具，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以被认为是混合式（hybrid），因为它结合了原生和Web技术。Flutter使用Dart语言进行开发，并且可以直接调用原生API。

Flutter开发方式有两种，一种是纯Flutter开发， 另一种是Flutter + 原生开发，  后者开发方式的出现是为了让我们在一些复杂的业务功能及交互情况下，部分底层功能的API不支持， 这个时候原生开发的介入解决了我们这个痛点。 

总结：Flutter可以拥抱多端应用(先不考虑性能的前提下)， 根据具体的业务场景去采纳合适的开发方式。

二、环境搭建

注意：安装方式随着Flutter的升级可能会发生变化，如果下面介绍的内容在安装Flutter时已经失效，请访问Flutter官网，按照官网最新的安装教程安装。

Flutter 开发文档https://flutter.cn/docs

1.系统要求

• 操作系统: Windows 7 或更高版本 (64-bit)

• 磁盘空间: 400 MB (不包括Android Studio的磁盘空间).

• 工具: Flutter 依赖下面这些命令行工具

  • Git for Windows (opens new window)https://git-scm.com/download/win

   2.安装Flutter SDK

   安装压缩包：（点击即可下载）flutter_windows_3.19.5-stable.zip

  也可以去官网下载需要的版本：FlutterSDK列表https://flutter.cn/docs/release/archive?tab=windows

  下载完，就是一个压缩包，将压缩包解压后目录结构如下

  注意的是：解压后的目录尽量不带中文和空格

  

  3.更新环境变量

  想在Windows系统自带命令行运行flutter命令，需要添加以下环境变量到用户PATH,  添加到用户PATH还是系统PATH, 自己设定，区别就是系统变量配置后，每个用户都可以使用，用户变量只可以供当前用户使用。

  • 在开始菜单的搜索功能键入“env”，然后选择 编辑系统环境变量
  • 在“用户变量”下检查是否有名为“Path”的条目:
    • 如果该条目存在， 追加 flutter\bin的全路径，使用 ; 作为分隔符.
    • 如果该条目不存在，创建一个新用户变量 Path ，然后将 flutter\bin 的全路径作为它的值.

    

    4.运行 flutter doctor命令

    在 CMD 窗口中运行如下命令，会检查你的环境并在命令行窗口中显示依赖报告，看是否还需要安装其他依赖

    

    第一次运行flutter命令（如flutter doctor）时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。缺失的依赖需要安装一下，安装完成后再运行flutter doctor命令来验证是否安装成功。

    第一个报错：找不到 android sdk ，是因为还没有下载及配置，接下来会安装Android Studio处理这部分

    第二个是因为：没有配置镜像，由于在国内访问Flutter有时可能会受到限制

    5.加速镜像地址配置

    Flutter官方为中国开发者搭建了临时镜像，小伙伴们可以将如下环境变量添加到到用户环境变量中：

    

    

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

    注意： 此镜像为临时镜像，并不能保证一直可用，小伙伴们可以参考https://flutter.dev/community/china 以获得有关镜像服务器的最新动态。

    6.安装 Android Studio

    官网下载：Download Android Studio

    安装步骤： 傻瓜式一步一步安装就好了

    • 启动之后，会让你是否导入配置，选择不导入设置
    • 一步一步next， 会出现一个 这个页面， 这是android studio 默认会让你初始化SDK,位置小伙伴自行存放就好了， 这是我的存放目录， E:\flutter\Android\Sdk

      

       完了之后就是这样一个页面：

      

      安装 flutter 以及Dart 插件

      

      初次使用新建项目：

      

      打开后就是这个一个界面，第一次打开需要很长时间，需要下载gradle及相关镜像依赖， 如果闲慢的话，可以找到gradle官网下载，下载下来替换原来的镜像文件(此方法我没有试，小伙伴可以自行试下)

      

      7.配置Android SDK的环境变量

      找到下载的android sdk目录

      

      还是和上面提到的配置环境变量

      

      

      再次打开命令行窗口 运行 flutter doctor，看是否有报错

      8.执行flutter doctor命令 报错处理

      • 之前的android sdk报错， 配置sdk 环境变量就好了， 执行 flutter doctor 检查依赖

      • 如果上述 flutter doctor 执行完后， 报错： cmdline-tools component is missing

        解决方案：Android SDK版本需要更新

        

        • 上述问题处理后 继续执行 flutter doctor ，报错：! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

          解决方案：Flutter项目需要Android的许可证条款，但是这些条款还没有被接受，需要同意这样许可证

          步骤：

          1. 打开终端或命令提示符。

          2. 输入命令 flutter doctor，然后运行。

          3. 终端会提示你接受哪些许可证条款，通常是Android SDK的条款。

          4. 接受这些条款，你可以通过输入 flutter doctor --android-licenses 并按照提示操作。

          • 上述问题处理后 继续执行 flutter doctor ， 提示错误 Visual Studio not installed

            

            解决办法：Visual Studio主要用于flutter 桌面软件开发，如果只是开发flutter app可以不用安装Visual Studio ，如果还想开发桌面软件需要下载Visual Studio

            下载Visual Studio

            http://https://visualstudio.microsoft.com/zh-hans/downloads/http://https//visualstudio.microsoft.com/zh-hans/downloads/

            

            Visual Studio安装失败可以修改DNS尝试

            

            

            上述问题处理后 继续执行 flutter doctor， 如下就已经完成一大半了

            

            9.实现虚拟设备

            • 点击

              

              • 选择设备

                

                • 选择操作系统下载

                  

                  • 选择加速

                    

                    • 点击运行设备

                      

                      

                      • 运行项目， 就大功告成啦

                        

                        

                        运行一直卡在 Runing Gradle task‘assembleDebug’

                        原因描述：出现这个问题是因为 Gradle 默认配置中依赖引用被墙导致的

                        解决办法：

                        1. 依次展开项目目录：【android】→【build.gradle】文件
                        2. 打开 build.gradle 在 flutter.gradle 中，替换 google() , mavenCentral() 为对应的阿里云镜像：
                        buildscript {
                            ext.kotlin_version = '1.3.50'
                            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.5.0'
                                classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
                            }
                        }
                        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'}
                                
                            }
                        }
                        rootProject.buildDir = '../build'
                        subprojects {
                            project.buildDir = "${rootProject.buildDir}/${project.name}"
                        }
                        subprojects {
                            project.evaluationDependsOn(':app')
                        }
                        task clean(type: Delete) {
                            delete rootProject.buildDir
                        }

                        
                        阿里云云效 Mavenhttps://developer.aliyun.com/mvn/guide