當前位置：首頁 > 运维知识 > Android >内容正文

Android

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

發布時間：2025/6/17 Android 23 豆豆

生活随笔收集整理的這篇文章主要介紹了【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: 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( 本篇博客的源碼快照 , 可以找到本博客的源碼 )