搭建Flutter环境及创建第一个demo

前言

 

Flutter 是一个跨平台（Android 和 iOS）的移动开发框架，使用的是 Dart 语言。和 React Native 不同的是，Flutter 框架并不是一个严格意义上的原生应用开发框架。

Flutter 的目标是用来创建高性能、高稳定性、高帧率、低延迟的 Android 和 iOS 应用。并且开发出来的应用在不同的平台用起来跟原生应用具有一样的体验。不同的平台的原生体验应该得到保留，让该应用看起来同整个系统更加协调。不同平台的滚动操作、字体、图标 等特殊的特性 应该和该平台上的其他应用保持一致，让用户感觉就像操作原生应用一样。比如，返回图标 Android 和 iOS 是不一样的；滚动内容滚动到底的反馈也是不一样的。

 

1.flutter中文官网https://flutterchina.club/get-started/test-drive/

2.英文https://flutter.io/get-started/install/

 

搭建开发环境

 

1.按照官网说第一步是要安装 git工具，也就是这东西：

 

 

　Git:  git-1.8.3-windows-1374045102000.exe

　　下载地址：https://pan.baidu.com/s/1miBQj8G

　　官网下载地址1：https://git-scm.com/downloads

　　官网下载地址2：https://git-for-windows.github.io/

　　TortoiseGit: TortoiseGit-1.8.16.0-64bit.msi

　　下载地址：https://pan.baidu.com/s/1kUKzzQv

　　官网下载地址：https://tortoisegit.org/download/

 

git下载路径https://git-scm.com/download/win    安装git大家都知道他是要干什么事情，是clone代码，接下来我们接着看第二步，获取Flutter SDK，官网通过一下操作：

 

2.获取SDK

git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=`pwd`/flutter/bin:$PATH

其实，在这里你看着有些闷逼，不就是去github上下载代码么，还这么麻烦的操作，所以我在这里的建议是直接打开https://github.com/flutter/flutter.git     这个链接，我们会看到如下界面，直接下载即可。

 

 

---

 

你也可以点击https://flutter.io/sdk-archive/#windows，直接选择下载对应的flutterSDK版本，界面图如下所示：

 

 

 

3.配置环境变量

 

官方文档是这样说的：

要在终端运行 flutter 命令， 你需要添加以下环境变量到系统PATH：

    转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”
    在“用户变量”下检查是否有名为“Path”的条目:
        如果该条目存在, 追加 flutter\bin的全路径，使用 ; 作为分隔符.
        如果条目不存在, 创建一个新用户变量 Path ，然后将 flutter\bin的全路径作为它的值.
    在“用户变量”下检查是否有名为”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的条目，如果没有，也添加它们。

 

那么我们就按人家说的做么，我下载flutterSDK放在我电脑上的路径如下图：

 

 

接着配置环境变量：电脑桌面计算机右键---->属性------>高级系统设置------->环境变量----------->path。至此我们打开是这样的界面，如下图所示：

 

 

我们复制我们flutter在我们电脑上存放的路径bin的全路径配置在如上图第3步，在变量值里面最后面加上  ; 符号，后面跟上我们要配置的路径 我的bin路径是:  D:\flutterSDK\flutter_windows_v0.5.1\flutter\bin。配置完成点击确定即可。

 

4.Android设置

 

如果你已经安装过了Androidstudio，那么你只需要安装一个flutter，Dart的插件。

• Flutter插件： 支持Flutter开发工作流 (运行、调试、热重载等).
• Dart插件： 提供代码分析 (输入代码时进行验证、代码补全等).

 

安装步骤：

1. 启动Android Studio.
2. 打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
3. 选择 Browse repositories…, 选择 Flutter 插件并点击 install.
4. 重启Android Studio后插件生效.

安装插件步骤效果图：

 

如果你没有安装过Androidstudio，那么你去http://www.androiddevtools.cn/ 下载Androidstudio及SDK,JDK,效果图如下：

 

 

安装Androidstudio按着提示一步一步执行即可。

 

体验第一个flutter应用

 

1. 选择 File>New Flutter Project
2. 选择 Flutter application 作为 project 类型, 然后点击 Next
3. 输入项目名称 (如 myapp), 然后点击 Next
4. 点击 Finish
5. 等待Android Studio安装SDK并创建项目.

上述命令创建一个Flutter项目，项目名为myapp，其中包含一个使用Material 组件的简单演示应用程序。

在项目目录中，您应用程序的代码位于 lib/main.dart.

 

效果操作图展示：

 

 

 

第一个应用程序

 

 

运行结果