首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【Flutter】创建 Flutter 项目 ( Android Studio 创建并运行 Flutter 应用 | 命令行创建并运行 Flutter 应用 | 运行 Flutter 应用三种方式 )

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

作者头像
韩曙亮
发布2023-03-28 21:18:18
发布2023-03-28 21:18:18
9.4K0
举报

文章目录

一、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 环境变量 ( 在系统变量中配置 ) 博客 ;

命令格式 :

代码语言:javascript
复制
flutter create 项目名称

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

代码语言:javascript
复制
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…

完整过程 :

执行如下命令 :

代码语言:javascript
复制
flutter create flutter_cmd

命令行输出 :

代码语言:javascript
复制
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\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 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 应用根目录 :

代码语言:javascript
复制
cd flutter_cmd

运行 Flutter 应用 :

代码语言:javascript
复制
flutter run

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

代码语言:javascript
复制
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 项目 ;

七、 相关资源


参考资料 :

博客源码下载 :

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-02-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 一、Android Studio 中创建 Flutter 项目
  • 二、命令行创建 Flutter 项目
  • 三、通过命令行方式运行 Flutter 项目
  • 四、通过 Android Studio 可视化方式运行 Flutter 项目
  • 五、通过 Android Studio 可视化方式运行 Flutter 项目种的 Android 项目
  • 六、通过 Xcode 可视化方式运行 Flutter 项目种的 iOS 项目
  • 七、 相关资源
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档