Flutter系列一:环境搭建及运行程序

参考:1.Flutter中文网

一.下载flutter sdk

gitHub地址
git命令:

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

二.配置环境

MacBook-bobo:~ bobozeng$ vim ~/.bash_profile 
MacBook-bobo:~ bobozeng$ source ~/.bash_profile
MacBook-bobo:~ bobozeng$ 

我的配置

###FLUTTER_HOME
FLUTTER_HOME=/Users/bobozeng/dev/android/flutter
###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=$PATH:$FLUTTER_HOME/bin

**运行 flutter doctor

MacBook-bobo:~ bobozeng$ flutter doctor

image.png

三.安装flutter 和 dart 插件

其中dart用于代码的分析，flutter用于工程的编译

• Flutter插件支持Flutter开发人员工作流程（运行，调试，热重载等）。
• Dart插件提供了代码分析（代码验证，键入代码，完成代码等）。
  插件安装(android studio):
  步骤一
  我这里面的是安装好的,dart路径自己随便取
  步骤二dart:
  我这里面的是安装好的,flutter要里面sdk是git上clone的flutter就是sdk路径
  步骤三flutter:

Android Studio: 为Flutter提供完整的IDE体验.

A.创建新应用

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.

B.运行应用程序

1. 定位到Android Studio 工具栏:

   
   image.png

2. 在 target selector 中, 选择一个运行该应用的Android设备. 如果没有列出可用，请选择 Tools>Android>AVD Manager 并在那里创建一个
3. 在工具栏中点击 Run图标, 或者调用菜单项 Run > Run.

4. 如果一切正常, 您应该在您的设备或模拟器上会看到启动的应用程序:

   
   image.png

C.体验热重载

Flutter 可以通过 热重载（hot reload） 实现快速的开发周期，热重载就是无需重启应用程序就能实时加载修改后的代码，并且不会丢失状态（译者语:如果是一个web开发者，那么可以认为这和webpack的热重载是一样的）。简单的对代码进行更改，然后告诉IDE或命令行工具你需要重新加载（点击reload按钮），你就会在你的设备或模拟器上看到更改。

1. 将字符串

   
   image.png

2. 不要按“Stop”按钮; 让您的应用继续运行。

3. 要查看您的更改, 只需调用 Save All (cmd-s / ctrl-s), 或点击 热重载按钮 (带有闪电⚡️图标的按钮).
   你就会立即看到更新后的字符串。

image.png