【Flutter】Flutter 应用创建运行 ( Android Studio 创建 / 运行 Flutter 应用 | 命令行创建 / 运行 Flutter 应用 )

文章目录

• 一、Android Studio 中创建 Flutter 应用
• 二、 Android Studio 中运行 Flutter 应用
• 三、 命令行 中创建 Flutter 应用
• 四、命令行 中运行 Flutter 应用

一、Android Studio 中创建 Flutter 应用

1 . 创建 Flutter 应用 : 菜单栏 -> File -> New Flutter Project , 弹出 Create New Flutter Project 对话框 ; 四个选项分别是创建 Flutter 应用 , Flutter 插件 , Flutter 包 , Flutter Module , 这里需要创建 Flutter 应用 ( Flutter Application ) ;

在这里插入图片描述

2 . 配置 Project 信息 : 在 Project name 中输入项目名称 , Flutter SDK path 中选择 Flutter SDK 根目录 , Project location 中选择项目创建地址 ; ( 注意项目名称只能是小写字母和下划线组成 )

在这里插入图片描述

3 . 设置包名 : 输入一个包名 , 选择 Finish 完成 Flutter 项目创建 ;

在这里插入图片描述

等待 Flutter 应用创建完成 : 第一次生成 Flutter 应用 , 建议翻墙完成 , 几分钟完成 ;

( 第一次没有翻墙 , 20 分钟没有创建成功 )

在这里插入图片描述

设置镜像网站环境变量 : 设置下面两个环境变量会提高应用创建速度 ; ( 感觉用处不大 )

变量名(N):FLUTTER_STORAGE_BASE_URL
变量值(V):https://mirrors.sjtug.sjtu.edu.cn/
变量名(N):PUB_HOSTED_URL

变量值(V):https://dart-pub.mirrors.sjtug.sjtu.edu.cn/

二、 Android Studio 中运行 Flutter 应用

1 . 项目与设备 : 创建完成的 Flutter 项目如下 , 选择 Android 手机 , 运行 , 这里是在 Pixel 真机运行的 ;

在这里插入图片描述

2 . Flutter 应用运行效果 :

在这里插入图片描述

三、 命令行 中创建 Flutter 应用

执行 flutter create flutter_app_hello_cmd 命令 , 即可在当前目录创建 Flutter 应用 ;

在这里插入图片描述

四、命令行 中运行 Flutter 应用

1 . 命令行中运行 Flutter 应用 : 在上面的创建 Flutter 应用的命令行最后 , 有提示如何运行该创建的 Flutter 应用 , flutter_app_hello_cmd 是创建的 Flutter 应用 , 先进入项目根目录 , 再运行 flutter run 命令 ;

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:
$ cd flutter_app_hello_cmd

$ flutter run
Your application code is in flutter_app_hello_cmd\lib\main.dart.

2 . 进入应用目录 : 执行 cd flutter_app_hello_cmd 命令 , 进入创建的 Flutter 项目 flutter_app_hello_cmd 根目录 ;

3 . 运行 Flutter 应用 : 在项目根目录 , 执行 flutter run 命令 , 即可在当前打开的设备或模拟器中运行该 Flutter 应用 ;

执行创建的应用 :

4 . 运行效果 : 第二个 Flutter 应用是在命令行中安装运行的 ;

在这里插入图片描述