windows平台下flutter应用开发

前言

  在家闲着没事做，研究一下flutter的使用，我不是很擅长写blog，希望能学会写blog，让blog更美，文章结构更严谨，最重要的是学会写作，没准还能转职去写作呢！！！

flutter概述

  Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。

  Flutter 从 React 中吸取灵感，通过现代化框架创建出精美的组件。它的核心思想是用 widget 来构建你的 UI 界面。 Widget 描述了在当前的配置和状态下视图所应该呈现的样子。当 widget 的状态改变时，它会重新构建其描述（展示的 UI），框架则会对比前后变化的不同，以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

  我个人认为在flutter里一切都是widget，所以开发flutter比Android原生界面开发简单些（纯属个人意见）。

flutter 环境安装

下载flutter

  访问flutter官网根据提示安装即可，我建议通过下载安装包安装。通过git clone需要对自己网络自信。

更新 path 环境变量

  如果你想要在普通的 Windows 控制台中使用 Flutter 命令，那就需要按照下面的步骤来将 Flutter 的二进制文件路径加入到 PATH 环境变量。

  这个大家应该都会，在path变量里添加 flutter\bin 所在的完整路径

配置国内镜像

  如果在国内安装或使用 Flutter，使用 Flutter 的官方镜像或者其他镜像能够免于限制并且加快速度（我没配置项目都创建不了，歧视我网络），Flutter 的官方镜像为

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

  如果镜像不可用，具体可以查看官方说明更换新的

其他配置

  在flutter安装目录下的packages\flutter_tools\gradle修改flutter.gradle。

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

不配置可能卡住

编辑器选择

安装ide

  我是一名java开发者,我所使用的开发工具是IntelliJ IDEA,官方推荐Android Studio。两者使用上大致是一样的。

不记得是什么版本了，执行flutter doctor，会显示idea

1.17 版本的flutter，执行flutter doctor，已经没有idea了

建议朋友们选择官方推荐的，也行能少踩坑。

安装插件

  在idea或as的插件市场搜索flutter，安装时提示需要前置插件dart，根据提示安装即可。这里放一张安装成功的图

推荐一下插件：

1. translation 一个翻译插件
2. Rainbow Brackets 让括号颜色分明，快速找到对应括号
3. Lombok 简化代码，使用@Data注解或其他注解，避免getter/setter，构造器等等
4. JRebel and XRebel for Intellij web开发神器，热加载（flutter自带热加载）
5. Alibaba Java Coding Guidelines 规范你的代码
6. Chinese (Simplified) Language 官方提供的中文语言包，再也不用为看不懂英文发愁了（还是建议学会英语，不然很吃亏）

idea小技巧

修改idea配置目录。

  很多软件的数据默认存放位置在c盘，而c盘空间往往不大，很容易满，修改idea安装目录下的idea.properties,可以改变一些数据的存储，减少c盘空间使用。

#---------------------------------------------------------------------
# Uncomment this option if you want to customize path to IDE config folder. Make sure you're using forward slashes.
#---------------------------------------------------------------------
# idea.config.path=G:/.IntelliJIdea/config

#---------------------------------------------------------------------
# Uncomment this option if you want to customize path to IDE system folder. Make sure you're using forward slashes.
#---------------------------------------------------------------------
# idea.system.path=G:/.IntelliJIdea/system

#---------------------------------------------------------------------

修改maven/gradle包存放路径

  在编辑器启动页进行修改，否则只对当前项目生效。

编码设置

  修改编码能有效减少乱码可能。

修改idea64.exe.vmoptions，在文件末尾添加

-Dfile.encoding=UTF-8

设置镜像

设置maven镜像

如果没有这个文件，显示的应该是创建这个文件，点击创建即可。

settings.xml下的mirrors节点

  <mirrors>
    <!-- mirror
     | Specifies a repository mirror site to use instead of a given repository. The repository that
     | this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used
     | for inheritance and direct lookup purposes, and must be unique across the set of mirrors.
     |
	 -->

    <mirror>
       <id>alimaven1</id>  
       <name>aliyun maven</name>  
       <url>https://maven.aliyun.com/repository/central</url>  
       <mirrorOf>central</mirrorOf>          
    </mirror>    

	 <!-- 阿里云仓库 -->

    <mirror>
        <id>alimaven2</id>
        <mirrorOf>central</mirrorOf>
        <name>aliyun maven</name>
        <url>http://maven.aliyun.com/nexus/content/repositories/central/</url>
    </mirror>

 
    <!-- 中央仓库1 -->
    <mirror>
        <id>repo1</id>
        <mirrorOf>central</mirrorOf>
        <name>Human Readable Name for this Mirror.</name>
        <url>http://repo1.maven.org/maven2/</url>
    </mirror>


 
    <!-- 中央仓库2 -->
    <mirror>
        <id>repo2</id>
        <mirrorOf>central</mirrorOf>
        <name>Human Readable Name for this Mirror.</name>
        <url>http://repo2.maven.org/maven2/</url>
    </mirror>

    <mirror>
        <id>nexus</id>
        <name>internal nexus repository</name>
        <url>http://repo.maven.apache.org/maven2</url>
        <mirrorOf>central</mirrorOf>
     </mirror>
  </mirrors>

设置gradle镜像

  在gradle home目录下新建init.gradle

init.gradle内容

allprojects{
    repositories {
        def ALIYUN_REPOSITORY_URL = 'https://maven.aliyun.com/repository/public/'
        def ALIYUN_JCENTER_URL = 'https://maven.aliyun.com/repository/jcenter/'
        def ALIYUN_GOOGLE_URL = 'https://maven.aliyun.com/repository/google/'
        def ALIYUN_GRADLE_PLUGIN_URL = 'https://maven.aliyun.com/repository/gradle-plugin/'
        all { ArtifactRepository repo ->
            if(repo instanceof MavenArtifactRepository){
                def url = repo.url.toString()
                if (url.startsWith('https://repo1.maven.org/maven2/')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_REPOSITORY_URL."
                    remove repo
                }
                if (url.startsWith('https://jcenter.bintray.com/')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_JCENTER_URL."
                    remove repo
                }
                if (url.startsWith('https://dl.google.com/dl/android/maven2/')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_GOOGLE_URL."
                    remove repo
                }
                if (url.startsWith('https://plugins.gradle.org/m2/')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $ALIYUN_GRADLE_PLUGIN_URL."
                    remove repo
                }
            }
        }
        maven { url ALIYUN_REPOSITORY_URL }
        maven { url ALIYUN_JCENTER_URL }
        maven { url ALIYUN_GOOGLE_URL }
        maven { url ALIYUN_GRADLE_PLUGIN_URL }
    }
}

安卓环境相关

Android Sdk安装

  使用编辑器创建一个安卓项目，当创建时它会提示没有sdk，根据提示即可安装sdk。注意：安装路径不能有中文。

AVD创建

1. 创建一个目录存放avd文件，然后在用户变量里添加一个ANDROID_SDK_HOME指向刚刚创建的目录，这样设置后当创建模拟机，产生的文件不会在c盘。注意：先不要创建虚拟机。
2. 为了让flutter找到Android sdk需要在用户变量里添加一个ANDROID_SDK_ROOT指向Android sdk目录。

找不着sdk，没设置

  环境正常，提示没接受协议，根据提示执行flutter doctor --android-licenses，输入y回车，直到提示成功为止。

  修改完后重启电脑，让配置生效。进入安卓项目。
idea 菜单栏的 工具–> 安卓，选择avd管理器。点击创建avd，然后让你选择系统镜像，根据需要选择，api版本不用太高。如果提示需要安装HAXM，点击安装即可。一路next，最后finish。完成后应该是这样的，路径应该是之前设置的。

flutter项目创建

  flutter项目的创建和其他项目一样。在启动页点击新建项目，选择flutter项目，next就行，Project name 需要小写，接着设置 Flutter SDK 的位置和项目的位置，如果没有下载 Flutter SDK，可以点击 install SDK 下载（使用的是git clone 可能需要安装git，而且很慢），选择你会的语言，有兴趣可以去学学kotlin，听说它和flutter是绝配！

打开模拟器

运行项目

  点击debug，绿色箭头旁边的那个，如果出现长时间处于Running Gradle task ‘assembleDebug’…
修改android目录下的build.gradle。替换（两处修改）

//google()
//jcenter()
 maven{ url 'https://maven.aliyun.com/repository/google/'}
 maven{ url 'https://maven.aliyun.com/repository/jcenter/'}

最终结果