文章目录





一、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\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 应用根目录 :

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 项目 ;





七、 相关资源


参考资料 :


博客源码下载 :

Logo
智屏生态联盟

智屏生态联盟致力于大屏生态发展，利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐

taro 引用本地图片展示

import { Image } from ‘@tarojs/components’<引用标签>constructor(){super()this.state={img:require(’./case.png’)}}…

avatar 智屏生态联盟

Weex

Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。快速开始高性能Weex 使用原生组件和原生模块，来最大化利用原生渲染的性能优势以及平台能力，所有的组件和模块都是可插拔、可扩展的。跨平台你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现，但是它们都提供了相同的...

avatar 智屏生态联盟

Taro写小程序总结

1.首先需要在『微信公众平台』注册帐号，我一直很困惑为啥，微信公众平台不能和微信开放平台整合，而且账号不能通用~https://mp.weixin.qq.com2.在微信公从平台里的->开发->服务器域名,可以配置小程序中可以访问的接口的域名3.在『成员管理』中可以添加开发者、体验者等成员。方便协作办工Taro的一些例子：1.转发在render中写&...

avatar 智屏生态联盟