• Windows10 准备/安装Flutter研发环境


    Flutter简介

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

    Flutter 中国

    安装Flutter开发所需的Android Studio及SDK

    Google良心,在国内架设了一个服务器,这个国内网址不用额外上网就可以直接愉快下载了。

    下载Android Studio

    Android Studio最新版下载:https://r8---sn-2x3een76.gvt1.com/edgedl/android/studio/install/4.0.0.16/android-studio-ide-193.6514223-windows.exe?cms_redirect=yes&mh=7O&mip=113.87.118.71&mm=28&mn=sn-2x3een76&ms=nvh&mt=1592771414&mv=m&mvi=7&pl=17&shardbypass=yes

    官网:https://developer.android.google.cn/studio#downloads

    安装Android Studio

    一路安装就好,几乎没坑,启动界面很好看,有没有?

    设置环境变量,新增配置镜像站点

    Flutter官方源站可能访问不流畅,我们可以选用谷歌中国开发社区(GDG)的临时镜像源来获取相关资源,只需要在环境变量中进行相关设置即可。

    可以通过“设置 - 关于 - 右侧系统信息 - 高级系统设置 - 高级 - 环境变量 - XXXX用户变量 - 新建”

    变量名:PUB_HOSTED_URL
    变量值:https://pub.flutter-io.cn
    
    变量名:FLUTTER_STORAGE_BASE_URL
    变量值:https://storage.flutter-io.cn
    

    关注镜像指南:Using Flutter in China - Flutter

    另附

    • 上海交通大学的源地址如下:
    FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn/
    PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn/
    
    • 清华大学源地址如下:
    FLUTTER_STORAGE_BASE_URL: https://mirrors.tuna.tsinghua.edu.cn/flutter
    PUB_HOSTED_URL: https://mirrors.tuna.tsinghua.edu.cn/dart-pub
    

    下载或安装Flutter SDK

    方式一 直接下载稳定版安装包

    中国区下载地址:Flutter SDK v1.7.5 For Windows SDK

    方式二 Github拉取Stable版本

    git clone -b stable https://github.com/flutter/flutter.git
    

    切换到对应的flutter目录找到并运行flutter_console.bat进行安装。

    设置环境变量,让Flutter SDK被感知

    可以通过“设置 - 关于 - 右侧系统信息 - 高级系统设置 - 高级 - 环境变量 - XXXX用户变量 - PATH - 编辑”

    新建Flutter SDK的bin目录完整路径,比如:

    C:Program FilesFlutterin
    

    运行环境检查

    在CMD/POWERSHELL中运行以下命令:

    flutter doctor
    

    上述命令会检查你的现有环境,然后把检测结果以报告形式呈现出来。仔细阅读它显示的内容,检查是否有尚未安装的软件或是有其他的步骤需要完成(通常会以粗体呈现)。

    如果出现协议接受警告,运行以下命令,然后一路Y就行了

    flutter doctor --android-licenses
    

    启动Android Studio,并且新建好对应的AVD,然后通过以下命令,检查是否存在已可连接的设备

    flutter devices
    

    默认情况下,Flutter会使用当前版本adb工具所依赖的Android SDK版本

    让编辑器支持Flutter

    Visual Studio Code 安装Flutter插件

    安装了Flutter插件,会自动安装所需的Dart插件。

    Android Studio 安装Flutter插件

    打开Android Studio,在左上角找到以下路径:File > Settings > Plugins,搜索关键词Flutter,便可找到Flutter Plugin For Android StudioInstall它即可

    同时,也会提醒你,依赖的Dart组件也会被一起添加。

    安装之后可以再次执行Flutter Doctor查看所有环境是否就位。

    为了让我们Gradle快一点,我们可以配置国内阿里云的源

    找到Flutter安装目录中路径:.../flutter/packages/flutter_tools/gradle/,打开并编辑其中的flutter.gradle文件
    注释掉原来的Repositories,修改成如下配置:

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

    在Android Studio项目的gradle下的build.gradle中配置成如上配置。

    开始第一个Flutter项目体验

    Android Studio 新建Flutter项目

    打开Android Studio,在左上角找到File,点击后选择New Flutter Project

    选择Flutter Application,继续。

    填写之前安装的flutter目录的全路径,以及基本的项目名称、项目位置信息。

    这里需要填写一个倒序的com.xxxxx.xxxxx信息,这将作为以后的包名称,如果将来上架后,是不可修改的。

    创建成功之后,以新窗口打开项目,全新的Flutter Project就展示在你面前,激动一下!

    点击Run即可运行程序,大功告成!

    Visual Studio Code 新建Flutter项目

    打开路径: View > Command Palette

    然后输入搜索关键词flutter

    找到并选择Flutter: New Project

    创建成功之后,以新窗口打开项目,全新的Flutter Project就展示在你面前,激动一下!

    按下F5即可运行程序,大功告成!

    参考资料

  • 相关阅读:
    学习网页栅格系统的几篇好文
    [转载]iis6配置使用页面Gzip压缩提速
    img标签的src=""会引起的Page_Load多次执行
    基于sliverlight + wcf的web 文字版IM 示例
    Enterprise Library 4.1学习笔记8缓存应用程序块之FileDependency
    windows 2008上启用防火墙后sqlserver 2005经常出现连接超时的解决办法
    负载均衡环境下的web服务器处理
    Ado.Net连接池的速度测试
    [转载]网页栅格系统研究(1):960的秘密
    css基础:把所有背景图都集成在一张图片上,减少图片服务器请求次数
  • 原文地址:https://www.cnblogs.com/craigtaylor/p/13264172.html
Copyright © 2020-2023  润新知