【Flutter】创建 Flutter 项目 ( Android Studio 创建并运行 Flutter 应用 | 命令行创建并运行 Flutter 应用 | 运行 Flutter 应用三种方式 )

文章目录

• • 
    
• ​​一、Android Studio 中创建 Flutter 项目​​
• ​​二、命令行创建 Flutter 项目​​
• ​​三、通过命令行方式运行 Flutter 项目​​
• ​​四、通过 Android Studio 可视化方式运行 Flutter 项目​​
• ​​五、通过 Android Studio 可视化方式运行 Flutter 项目种的 Android 项目​​
• ​​六、通过 Xcode 可视化方式运行 Flutter 项目种的 iOS 项目​​
• ​​七、 相关资源​​
  • 
    

一、Android Studio 中创建 Flutter 项目

---

先安装 Flutter 和 Dart 插件 , 参考 ​​【Flutter】Flutter 开发环境搭建 ( Android Studio 下 Flutter / Dart 插件安装 | Flutter SDK 安装 | 环境变量配置 | 开发环境检查 )​​ 博客 ;

​1 . 选择创建 Flutter 应用 :​ 在 Android Studio 中 , 菜单栏 -> 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 分钟没有创建成功 )

二、命令行创建 Flutter 项目

---

使用 flutter 命令进行创建 , 使用 flutter 命令前 , 需要先将 flutter SDK 中的 flutter\bin 目录添加到环境变量中 ;

环境变量设置参考 ​​【Flutter】Flutter 开发环境搭建 ( Android Studio 下 Flutter / Dart 插件安装 | Flutter SDK 安装 | 环境变量配置 | 开发环境检查 ) 六、设置 Flutter 环境变量 ( 在系统变量中配置 )​​ 博客 ;

​命令格式 :​

flutter create 项目名称

​这里注意 , 一定要配置正确的源 :​ 环境变量中配置下面的源 , 否则出错 ;

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

配置镜像源环境变量如果出错 , 此处创建 Flutter 应用肯定出错 ;

​环境变量配置错误问题处理 :​ ​​【错误记录】命令行创建 Flutter 应用报错 pub get failed (server unavailable) – attempting retry 1 in 1 second…​​

​完整过程 :​

​执行如下命令 :​

flutter create flutter_cmd

​命令行输出 :​

D:\002_Project\002_Android_Learn\Flutter_Cmd>flutter create flutter_cmd
Creating project flutter_cmd... androidx: true
  flutter_cmd\.gitignore (created)
  flutter_cmd\.idea\libraries\Dart_SDK.xml (created)
  flutter_cmd\.idea\libraries\Flutter_for_Android.xml (created)
  flutter_cmd\.idea\libraries\KotlinJavaRuntime.xml (created)
  flutter_cmd\.idea\modules.xml (created)
  flutter_cmd\.idea\runConfigurations\main_dart.xml (created)
  flutter_cmd\.idea\workspace.xml (created)
  flutter_cmd\.metadata (created)
  flutter_cmd\android\app\build.gradle (created)
  flutter_cmd\android\app\src\main\kotlin\com\example\flutter_cmd\MainActivity.kt (created)
  flutter_cmd\android\build.gradle (created)
  flutter_cmd\android\flutter_cmd_android.iml (created)
  flutter_cmd\android\.gitignore (created)
  flutter_cmd\android\app\src\debug\AndroidManifest.xml (created)
  flutter_cmd\android\app\src\main\AndroidManifest.xml (created)
  flutter_cmd\android\app\src\main\res\drawable\launch_background.xml (created)
  flutter_cmd\android\app\src\main\res\mipmap-hdpi\ic_launcher.png (created)
  flutter_cmd\android\app\src\main\res\mipmap-mdpi\ic_launcher.png (created)
  flutter_cmd\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png (created)
  flutter_cmd\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png (created)
  flutter_cmd\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png (created)
  flutter_cmd\android\app\src\main\res\values\styles.xml (created)
  flutter_cmd\android\app\src\profile\AndroidManifest.xml (created)
  flutter_cmd\android\gradle\wrapper\gradle-wrapper.properties (created)
  flutter_cmd\android\gradle.properties (created)
  flutter_cmd\android\settings.gradle (created)
  flutter_cmd\ios\Runner\AppDelegate.swift (created)
  flutter_cmd\ios\Runner\Runner-Bridging-Header.h (created)
  flutter_cmd\ios\Runner.xcodeproj\project.pbxproj (created)
  flutter_cmd\ios\Runner.xcodeproj\xcshareddata\xcschemes\Runner.xcscheme (created)
  flutter_cmd\ios\.gitignore (created)
  flutter_cmd\ios\Flutter\AppFrameworkInfo.plist (created)
  flutter_cmd\ios\Flutter\Debug.xcconfig (created)
  flutter_cmd\ios\Flutter\Release.xcconfig (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Contents.json (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\Contents.json (created)
  flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage.png (created)
  flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\[e-mail] (created)
  flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\README.md (created)
  flutter_cmd\ios\Runner\Base.lproj\LaunchScreen.storyboard (created)
  flutter_cmd\ios\Runner\Base.lproj\Main.storyboard (created)
  flutter_cmd\ios\Runner\Info.plist (created)
  flutter_cmd\ios\Runner.xcodeproj\project.xcworkspace\contents.xcworkspacedata (created)
  flutter_cmd\ios\Runner.xcworkspace\contents.xcworkspacedata (created)
  flutter_cmd\lib\main.dart (created)
  flutter_cmd\flutter_cmd.iml (created)
  flutter_cmd\pubspec.yaml (created)
  flutter_cmd\README.md (created)
  flutter_cmd\test\widget_test.dart (created)
Running "flutter pub get" in flutter_cmd...                         4.0s
Wrote 68 files.

All done!
[√] Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.8, on Microsoft Windows [Version 10.0.18363.1139],
    locale zh-CN)
[√] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 29.0.3)
[√] Android Studio: is fully installed. (version 4.0)
[!] IntelliJ IDEA Community Edition: is partially installed; more components are available. (version 2019.3)
[√] Connected device: is fully installed. (1 available)

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

In order to run your application, type:

  $ cd flutter_cmd
  $ flutter run

Your application code is in flutter_cmd\lib\main.dart.


D:\002_Project\002_Android_Learn\Flutter_Cmd>

三、通过命令行方式运行 Flutter 项目

---

​通过命令行方式运行 Flutter 项目 :​ 进入 Flutter 项目根目录 , 然后调用 ​​flutter run​​ 命令 , 运行 Flutter 应用 ; 会自动在当前已经连接的设备或模拟器上运行该 Flutter 应用 ;

在上一小节执行 ​​flutter create flutter_cmd​​ 命令创建 Flutter 应用基础上执行下面的操作 ;

​进入 flutter_cmd 应用根目录 :​

cd flutter_cmd

​运行 Flutter 应用 :​

flutter run

执行 ​​flutter run​​ 命令后 , 就会开始构建 Flutter 应用 , 然后运行到当前已连接的设备中 ;

D:\002_Project\002_Android_Learn\Flutter_Cmd>cd flutter_cmd

D:\002_Project\002_Android_Learn\Flutter_Cmd\flutter_cmd>flutter run
Launching lib\main.dart on Pixel 2 in debug mode...
Running Gradle task 'assembleDebug'...
Running Gradle task 'assembleDebug'... Done                        59.1s
√ Built build\app\outputs\apk\debug\app-debug.apk.
Installing build\app\outputs\apk\app.apk...                        14.0s
D/FlutterActivity(13511): Using the launch theme as normal theme.
D/FlutterActivityAndFragmentDelegate(13511): Setting up FlutterEngine.
D/FlutterActivityAndFragmentDelegate(13511): No preferred FlutterEngine was provided. Creating a new FlutterEngine for this FlutterFragment.
D/FlutterActivityAndFragmentDelegate(13511): Attaching FlutterEngine to the Activity that owns this Fragment.
D/FlutterView(13511): Attaching to a FlutterEngine: io.flutter.embedding.engine.FlutterEngine@a04e361
D/FlutterActivityAndFragmentDelegate(13511): Executing Dart entrypoint: main, and sending initial route: /
Syncing files to device Pixel 2...
 5,251ms (!)

????  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on Pixel 2 is available at: http://127.0.0.1:59944/K0Rd7AVm9xE=/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

​手机界面展示 :​

如果当前有多个设备或虚拟机连接在本电脑上 , 那么需要使用 ​​flutter run -d '设备ID'​​ 选择对应的设备 ;

四、通过 Android Studio 可视化方式运行 Flutter 项目

---

Android Studio 中选择 菜单栏 / File / Open 选项 ;

在弹出的对话框中 , 选择刚才使用命令行创建的 Flutter 项目 :

选择在 本窗口 “This Window” 中打开 ;

应用打开之后如下 :

点击运行应用按钮 , 即可在 Android 手机中运行该 Flutter 应用 ;

​手机运行效果 :​

五、通过 Android Studio 可视化方式运行 Flutter 项目种的 Android 项目

---

关掉 Android Studio 开发界面 , 进入到欢迎界面 , 选择打开一个已存在的项目 " Open an Existing Project " 选项 ;

选择已经创建的 Flutter 项目中的 android 目录 ;

刚打开该项目时 , 有一个同步过程 , 需要等待几分钟到十几分钟 , 这里要下载一堆依赖库及插件 , 同步完成后 ,

Android 基本操作 , 就不再展示了 ;

六、通过 Xcode 可视化方式运行 Flutter 项目种的 iOS 项目

---

需要在 MAC 中的 Xcode 中打开 Flutter 应用下的 iOS 项目 ;

七、 相关资源

---

​参考资料 :​

• • 
    
• ​Flutter 官网 :​ ​​https://flutter.dev/​​
• ​Flutter 开发文档 :​ ​​https://flutter.cn/docs​​ ​( 强烈推荐 )​
• ​官方 GitHub 地址​ : ​​https://github.com/flutter​​
• ​Flutter 中文社区 :​ ​​https://flutter.cn/​​
• ​Flutter 实用教程 :​ ​​https://flutter.cn/docs/cookbook​​
• ​Flutter CodeLab :​ ​​https://codelabs.flutter-io.cn/​​
• ​Dart 中文文档 :​ ​​https://dart.cn/​​
• ​Dart 开发者官网 :​ ​​https://api.dart.dev/​​
• ​Flutter 中文网 ( 非官方 , 翻译的很好 ) :​ ​​https://flutterchina.club/​​​ , ​​http://flutter.axuer.com/docs/​​
• ​Flutter 相关问题 :​ ​​https://flutterchina.club/faq/​​ ( 入门阶段推荐看一遍 )
  • 
    

​博客源码下载 :​

• • 
    
• ​GitHub 地址 :​ ​​​​https://github.com/han1202012/flutter_app_hello​​​​ ( 随博客进度一直更新 , 有可能没有本博客的源码 )
  
• •