Flutter是Google提供的开源移动应用开发SDK，用于通过单个代码库构建漂亮的Native Android和iOS应用。Dart是用于开发Flutter应用程序的语言。

Flutter现在已退出测试版，Flutter 1.0已于12月4日发布。

本文介绍了如何安装Flutter和开发环境，还分享了针对Flutter应用程序开发中最常见的要求和问题的解决方案。对于想要尝试Flutter应用程序开发的Android开发人员而言，以下过程更有用。

#1 — 设置

用于开发Flutter应用程序的IDE

Android Studio
Visual Studio Code
IntelliJ

Flutter安装

下载Flutter Zip文件。
解压缩Zip文件。
将Flutter工具添加到终端的路径。→当前工作目录。这是一个临时路径设置，因此当您重新启动系统时，必须再次设置flutter工具路径

注意：要**在MacOS中**永久*设置Flutter路径***并避免在每次重新启动时进行设置，请在MacOS终端中执行以下操作。

touch .bash_profile
open .bash_profile
它会打开一个文件，您需要在下面的命令中复制并粘贴该文件。之后，保存并重新启动系统。
export PATH="$PATH:PWD/flutter/bin"
*PWD\ → Present Working Directory.

验证Flutter的安装和版本

flutter doctor -v

#2 — Android Studio配置

安装Android Studio

要在Android模拟器中运行该应用，您必须安装Android Studio才能获取Android SDK和模拟器。

下载Android Studio并运行.dmg文件。它将自动安装最新的Android SDK。

将Dart插件添加到Android Studio

如果您希望将Android Studio用作开发Flutter的主要IDE，则必须设置dart对Android Studio的语言支持，如下所示。从这里开始，我们将重点关注Android Studio的设置，但您也可以使用 Visual Studio Code or IntelliJ (类似于Android Studio).

Preferences → Plugins → Browse Repository → type Dart in search bar → Install and Restart android studio.
首选项→插件→浏览存储库→在搜索栏中键入Dart →安装并重新启动android studio。

将Flutter插件添加到Android Studio

偏好设置→插件→浏览存储库→在搜索栏中键入Flutter →安装并重新启动android studio。
Preferences → Plugins → Browse Repository → type Flutter in search bar → Install and Restart android studio.

创建Android模拟器

中文：

工具→AVD管理器→打开一个窗口
选择→创建虚拟设备
电话→Nexus 5X 5’2“→Oreo x86→Android 8.0→AVD名称（Nexus 5X API 26）→完成
选择Nexus 5X API 26仿真器→单击启动AVD（开始）按钮

英文：

Tools → AVD Manager → Opens a window
Select → Create Virtual Device
Phone → Nexus 5X 5’2" → Oreo x86 → Android 8.0 → AVD Name(Nexus 5X API 26) → Finish
Select Nexus 5X API 26 emulator → click on Launch AVD(start) button

创建Android模拟器

#3 — 3-iOS模拟器设置

Xcode的安装

要在iOS模拟器中执行该应用，我们必须安装Xcode。从App Store获取Xcode并安装。

从Android Studio启动iOS模拟器

您可以在Android Studio中的工具栏下方看到Flutter Device Selection按钮。
如果您已经安装了Xcode，则单击Flutter Device Selection按钮将打开iOS模拟器。

有用的iOS模拟器命令

Return to home → Cmd+Shift+h
See recent apps →Cmd+Shift+h+h
Quit Simulator→Cmd+q

#4 — 使用终端在仿真器或模拟器上运行

从终端执行Flutter应用

Run From Terminal → flutter run
Run in all devices → flutter run -d all lib/welcome.dart

如果您的系统连接了多个设备，请使用以下命令检查连接的设备 → flutter devices

运行上面的命令将列出如下设备

SM G890UU • 4299a0c86788f678 • android-arm • Android 7.0 (API 24) (emulator)

在所选设备中运行 →** flutter run -d 4299a0c86788f678

检查选定设备中的特定设计/运行特定的dart文件 → flutter run -d 4299a0c86788f678 lib/main.dart

#5 — Flutter项目结构

在本文中，我将在Android Studio中使用Flutter。

在“项目”部分中，以上屏幕截图显示了flutter应用程序的结构。
- Android：具有所有与Android相关的文件。
- iOS：具有所有与iOS相关的文件。
- lib：具有所有的dart文件。这是主文件夹，我们可以在其中编写所有应用程序代码。
- 测试：具有所有测试代码。
- images：我创建了这个文件夹，其中包含了我们在应用程序中使用的所有图像。
- pubspec.yaml：它具有所有第三方依赖性以及我们在应用程序中使用的资产。
yaml—另一个多列布局

*flutter_rating*是第三方依赖性。
我们必须在pubspec.yaml指定。我们可以使用文件夹名称和文件名或仅使用文件夹名称来指定文件路径。

images/apple.jpeg→我们只能使用apple.jpeg图像。
images/→我们可以使用图像文件夹中的所有图像。

确保依赖项与空格正确对齐。否则，图像将不会显示。如果您是Flutter或YAML的新手，则很难找到此特定问题。

#6 — 如何更改应用名称**

在Android中

Android文件夹→app→src→main→Open Manifest→更改Application标签中的标签。

Android folder → app → src → main → Open Manifest → change the label in Application tag.

<application
android：name =” io.flutter.app.FlutterApplication”
android：label =” flutter_android_app ” />

在iOS中

iOS文件夹→Runner→info.plist→编辑下面的字符串CFBundleName

CFBundleName
flutter_ios_app

#7 — 如何更改应用程序图标

在Android中

展开Android文件夹→应用程序→src→主菜单→res→在mipmap文件夹中添加应用程序图标。

Expand the Android folder → app → src → main → res → add app icons in mipmap folders.

展开Android文件夹→app→src→main→打开Manifest→更改Application标签中的图标。

Expand the Android folder → app → src → main → open Manifest → change the icon in Application tag.

**在iOS中，
**展开iOS文件夹→Runner→Assets.xcassets→AppIcon.appiconset
在该文件夹中，添加所有应用程序图标。

Expand iOS folder → Runner → Assets.xcassets → AppIcon.appiconset
In that folder add all app icons.

展开iOS文件夹→Runner→Assets.xcassets→AppIcon.appiconset→更新Contents.json文件。

Expand iOS folder → Runner → Assets.xcassets → AppIcon.appiconset → update the Contents.json file.

#8 — 如何更改启动画面

在Android中

Expand Android folder → res → drawable → add image
Expand Android folder → res → drawable → in Launch_background.xml, add bitmap tag.

在iOS中

Expand iOS folder → Runner → Assets.xcassets → LaunchImage.imageset → add all sizes of splash images in the folder

Expand iOS folder → Runner → Assets.xcassets → LaunchImage.imageset → → open Contents.json→ change file name

我希望上述设置说明和有关如何设置一些基本要求的建议对Flutter应用程序开发的初学者有用。由于Flutter现已退出测试版，因此我希望看到越来越多的开发人员使用Flutter通过单个代码库开发Android和iOS应用程序。出于**动机，**请访问Flutter社区构建的Widgets库网站。

如果您喜欢这篇文章，并且对您有所帮助，请给我一些鼓掌！

谢谢

如何设置Flutter相关推荐

visual studio code 设置flutter编辑器两条竖线,80,128
修改settings.json 里的两处 editor.rulers. 一处默认,一处dart的. { "workbench.colorTheme": "Default ...
【Flutter】遇见错误
Dart SDK is not configured Android Studio安装完Flutter后,创建新的项目运行没有问题,但是从git上下的项目打开后就提示 Dart SDK is not ...
flutter 应用场景_Flutter混合开发的路由栈管理
为了把 Flutter 引入到原生工程,我们需要把 Flutter 工程改造为原生工程的一个组件依赖,并以组件化的方式管理不同平台的 Flutter 构建产物,即 Android 平台使用 aar.i ...
flutter AppBar
return Scaffold(appBar:AppBar(title:Text('Abc'),leading:Icon(Icons.home),elevation:4.0,//最下方阴影部分辐射范围 ...
【Flutter】Flutter 混合开发 ( 关联 Android 工程与 Flutter 工程 | 安卓页面中嵌入 Flutter 页面 | 安卓中启动 Flutter 页面 )
文章目录前言一.创建 Android 项目二.关联 Android 工程与 Flutter Module 工程 1.配置 Flutter Module工程 2.配置 build.gradle 3 ...
【Flutter】Flutter 开发环境搭建 ( 2021年08月25日补充最新资料 | 最新安装教程 )
文章目录前言一.Android Studio 环境安装 Flutter / Dart 插件二.Flutter SDK 下载三.设置 Flutter 环境变量 1.设置 Flutter SDK环 ...
【错误记录】Flutter 报错 ( Android Studio 中 main.dart 左侧不显示设备栏 )
文章目录一.报错信息二.解决方案一 ( 备选方案 ) 三.解决方案二 ( 推荐方案 ) 一.报错信息为了解决 [错误记录]Flutter 构建报错 ( Because xxx require ...
【错误记录】Flutter 构建报错 ( Because xxx requires SDK version ＞=2.12.0-0 ＜3.0.0, versio | Dart SDK 版本低 )
文章目录一.报错信息二.问题分析三.解决方案一.报错信息 event sent after app closed: {id: 0, progressId: null, message: Run ...
【Flutter】Flutter 拍照示例 ( Android 应用兼容 Android X | Gradle 版本号 | Gradle 插件版本号 | Android X 支持 | SDK 版本 )
文章目录一.Gradle 及 Gradle 插件版本二.支持 AndroidX 配置三.设置 Android 编译目标版本四.相关依赖库修改 Flutter 插件 " image_p ...

如何设置Flutter

#1 — 设置

用于开发Flutter应用程序的IDE

Flutter安装

验证Flutter的安装和版本

#2 — Android Studio配置

安装Android Studio

将Dart插件添加到Android Studio

将Flutter插件添加到Android Studio

创建Android模拟器

#3 — 3-iOS模拟器设置

Xcode的安装

有用的iOS模拟器命令

#4 — 使用终端在仿真器或模拟器上运行

从终端执行Flutter应用

#5 — Flutter项目结构

#6 — 如何更改应用名称**

在Android中

在iOS中

#7 — 如何更改应用程序图标

在Android中

#8 — 如何更改启动画面

在Android中

在iOS中

如何设置Flutter相关推荐

最新文章

热门文章

如何设置Flutter

#1 — 设置

用于开发Flutter应用程序的IDE

Flutter安装

验证Flutter的安装和版本

#2 — Android Studio配置

安装Android Studio

将Dart插件添加到Android Studio

将Flutter插件添加到Android Studio

创建Android模拟器

#3 — 3-iOS模拟器设置

Xcode的安装

有用的iOS模拟器命令

#4 — 使用终端在仿真器或模拟器上运行

从终端执行Flutter应用

#5 — Flutter项目结构

**#6 — 如何更改应用名称

在Android中

在iOS中

#7 — 如何更改应用程序图标

在Android中

#8 — 如何更改启动画面

在Android中

在iOS中

如何设置Flutter相关推荐

最新文章

热门文章

#6 — 如何更改应用名称**