文章目錄

• 一、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: trueflutter_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\Icon-App-1024x1024@1x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@1x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@2x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@3x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@1x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@2x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@3x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@1x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@2x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@3x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@2x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@3x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@1x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@2x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-83.5x83.5@2x.png (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\LaunchImage@2x.png (created)flutter_cmd\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@3x.png (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 runYour 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_cmdD:\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 ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/15463304( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】创建 Flutter 项目 ( Android Studio 创建并运行 Flutter 应用 | 命令行创建并运行 Flutter 应用 | 运行 Flutter 应用三种方式 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。