Flutter APP Demo
为了让我们更好的深入学习 Flutter 的架构与设计,在这里,我们制作出了一个以 Flutter 为基础框架的移动端 APP,该 APP 是一个简单的便签记事本,具备基本的增删改查功能,网络请求等,好方便我们对 Flutter 有一个系统的认识。
接下来,请看我们如何起步一个 Flutter 应用。
In order to better understand the structure and design of Flutter, we created a mobile APP based on the Flutter framework. The APP is a simple notepad, with basic functions of adding, deleting, modifying and checking, network requests, etc.So that we have a systematic understanding of the Flutter.
Then, see how we get started with a Flutter app.
System requirements
To install and run Flutter, your development environment must meet these minimum requirements:
-
Operating Systems: Windows 7 SP1 or later (64-bit), x86-64 based.
-
Disk Space: 1.64 GB (does not include disk space for IDE/tools).
-
Tools: Flutter depends on these tools being available in your environment.
- Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)
- Git for Windows 2.x, with the Use Git from the Windows Command Prompt option If Git for Windows is already installed, make sure you can run git commands from the command prompt or PowerShell.
Get the Flutter SDK
1.Download the following installation bundle to get the latest stable release of the Flutter SDK: flutter_windows_2.2.3-stable.zip For other release channels, and older builds, see the SDK releases page.
2.Extract the zip file and place the contained flutterflutter in the desired installation location for the Flutter SDK (for example, C:\Users\<your-user-name>\Documents).
Warning: Do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges. |
C:\src>git clone https://github.com/flutter/flutter.git -b stable
You are now ready to run Flutter commands in the Flutter Console.
Update your path
Windows
If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable:
- From the Start search bar, enter ‘env’ and select Edit environment variables for your account.
- Under User variables check if there is an entry called Path:
- If the entry exists, append the full path to flutter\bin using ; as a separator from existing values.
- If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value.
You have to close and reopen any existing console windows for these changes to take effect.
Note:As of Flutter’s 1.19.0 dev release, the Flutter SDK contains the dart command alongside the flutter command so that you can more easily run Dart command-line programs. Downloading the Flutter SDK also downloads the compatible version of Dart, but if you’ve downloaded the Dart SDK separately, make sure that the Flutter version of dart is first in your path, as the two versions might not be compatible. The following command tells you whether the flutter and dart commands originate from the same bin directory and are therefore compatible. |
C:\> where flutter dart
C:\path-to-flutter-sdk\bin\flutter
C:\path-to-flutter-sdk\bin\flutter.bat
C:\path-to-dart-sdk\bin\dart.exe :: this should go after `C:\path-to-flutter-sdk\bin\ commands`
C:\path-to-flutter-sdk\bin\dart
C:\path-to-flutter-sdk\bin\dart.bat```
Mac
You can update your PATH variable for the current session at the command line, as shown in Get the Flutter SDK. You’ll probably want to update this variable permanently, so you can run flutter commands in any terminal session.
The steps for modifying this variable permanently for all terminal sessions are machine-specific. Typically you add a line to a file that is executed whenever you open a new window. For example:
- Determine the path of your clone of the Flutter SDK. You need this in Step 3.
- Open (or create) the rc file for your shell. Typing
echo $SHELL
in your Terminal tells you which shell you’re using. If you’re using Bash, edit$HOME/.bash_profile
or$HOME/.bashrc
. If you’re using Z shell, edit$HOME/.zshrc
. If you’re using a different shell, the file path and filename will be different on your machine. - Add the following line and change
[PATH_OF_FLUTTER_GIT_DIRECTORY]
to be the path of your clone of the Flutter git repo:
$ export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"
-
Run
source $HOME/.<rc file>
to refresh the current window, or open a new terminal window to automatically source the file. -
Verify that the
flutter/bin
directory is now in your PATH by running$ echo $PATH
,Verify that the flutter command is available by running:
which flutter
Run flutter doctor
From a console window that has the Flutter directory in the path (see above), run the following command to see if there are any platform dependencies you need to complete the setup:
C:\src\flutter>flutter doctor
This command checks your environment and displays a report of the status of your Flutter installation. Check the output carefully for other software you might need to install or further tasks to perform (shown in bold text).
For example:
[-] Android toolchain - develop for Android devices
• Android SDK at D:\Android\sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.dev/setup/#android-setup for detailed instructions.
The following sections describe how to perform these tasks and finish the setup process. Once you have installed any missing dependencies, you can run the flutter doctor command again to verify that you’ve set everything up correctly.
Note: If flutter doctor returns that either the Flutter plugin or Dart plugin of Android Studio are not installed, move on to Set up an editor to resolve this issue. |
Platform setup
macOS supports developing Flutter apps in iOS, Android, and the web (technical preview release). Complete at least one of the platform setup steps now, to be able to build and run your first Flutter app.
Android setup
Note: Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in a number of editors; a later step discusses that. |
Install Android Studio
- Download and install Android Studio.
- Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.
- Run flutter doctor to confirm that Flutter has located your installation of Android Studio. If Flutter cannot locate it, run flutter config --android-studio-dir <directory> to set the directory that Android Studio is installed to.
Set up your Android device
To prepare to run and test your Flutter app on an Android device, you need an Android device running Android 4.1 (API level 16) or higher.
- Enable Developer options and USB debugging on your device. Detailed instructions are available in the Android documentation.
- Windows-only: Install the Google USB Driver.
- Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.
- In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device. By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_SDK_ROOT environment variable to that installation directory.
Set up the Android emulator
To prepare to run and test your Flutter app on the Android emulator, follow these steps:
-
Enable VM acceleration on your machine.
-
Launch Android Studio, click the AVD Manager icon, and select Create Virtual Device…
-
In older versions of Android Studio, you should instead launch Android Studio > Tools > Android > AVD Manager and select Create Virtual Device…. (The Android submenu is only present when inside an Android project.)
-
If you do not have a project open, you can choose Configure > AVD Manager and select Create Virtual Device…
-
-
Choose a device definition and select Next.
-
Select one or more system images for the Android versions you want to emulate, and select Next. An x86 or x86_64 image is recommended.
-
Under Emulated Performance, select Hardware - GLES 2.0 to enable hardware acceleration.
-
Verify the AVD configuration is correct, and select Finish. For details on the above steps, see Managing AVDs.
-
In Android Virtual Device Manager, click Run in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.
Agree to Android Licenses
Before you can use Flutter, you must agree to the licenses of the Android SDK platform. This step should be done after you have installed the tools listed above.
-
Make sure that you have a version of Java 8 installed and that your JAVA_HOME environment variable is set to the JDK’s folder. Android Studio versions 2.2 and higher come with a JDK, so this should already be done.
-
Open an elevated console window and run the following command to begin signing licenses.
$ flutter doctor --android-licenses
-
Review the terms of each license carefully before agreeing to them.
-
Once you are done agreeing with licenses, run flutter doctor again to confirm that you are ready to use Flutter.
iOS setup
Install Xcode
To develop Flutter apps for iOS, you need a Mac with Xcode installed.
-
Install the latest stable version of Xcode (using web download or the Mac App Store).
-
Configure the Xcode command-line tools to use the newly-installed version of Xcode by running the following from the command line:
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer $ sudo xcodebuild -runFirstLaunch
This is the correct path for most cases, when you want to use the latest version of Xcode. If you need to use a different version, specify that path instead.
-
Make sure the Xcode license agreement is signed by either opening Xcode once and confirming or running sudo xcodebuild -license from the command line.
Versions older than the latest stable version may still work, but are not recommended for Flutter development. Using old versions of Xcode to target bitcode is not supported, and is likely not to work.
With Xcode, you’ll be able to run Flutter apps on an iOS device or on the simulator.
Set up the iOS simulator
To prepare to run and test your Flutter app on the iOS simulator, follow these steps:
-
On your Mac, find the Simulator via Spotlight or by using the following command:
$ open -a Simulator
-
Make sure your simulator is using a 64-bit device (iPhone 5s or later) by checking the settings in the simulator’s Hardware > Device menu.
-
Depending on your development machine’s screen size, simulated high-screen-density iOS devices might overflow your screen. Grab the corner of the simulator and drag it to change the scale. You can also use the Window > Physical Size or Window > Pixel Accurate options if your computer’s resolution is high enough.
- If you are using a version of Xcode older than 9.1, you should instead set the device scale in the Window > Scale menu.
Deploy to iOS devices
To deploy your Flutter app to a physical iOS device you’ll need to set up physical device deployment in Xcode and an Apple Developer account. If your app is using Flutter plugins, you will also need the third-party CocoaPods dependency manager.
-
You can skip this step if your apps do not depend on Flutter plugins with native iOS code. Install and set up CocoaPods by running the following commands:
$ sudo gem install cocoapods
Note: The default version of Ruby requires sudo to install the CocoaPods gem. If you are using a Ruby Version manager, you may need to run without sudo. -
Follow the Xcode signing flow to provision your project:
- Open the default Xcode workspace in your project by running open ios/Runner.xcworkspace in a terminal window from your Flutter project directory.
- Select the device you intend to deploy to in the device drop-down menu next to the run button.
- Select the Runner project in the left navigation panel.
- In the Runner target settings page, make sure your Development Team is selected under Signing & Capabilities > Team.
When you select a team, Xcode creates and downloads a Development Certificate, registers your device with your account, and creates and downloads a provisioning profile (if needed).-
To start your first iOS development project, you might need to sign into Xcode with your Apple ID.
Development and testing is supported for any Apple ID. Enrolling in the Apple Developer Program is required to distribute your app to the App Store. For details about membership types, see Choosing a Membership.
-
The first time you use an attached physical device for iOS development, you need to trust both your Mac and the Development Certificate on that device. Select Trust in the dialog prompt when first connecting the iOS device to your Mac.
Then, go to the Settings app on the iOS device, select General > Device Management and trust your Certificate. For first time users, you may need to select General > Profiles > Device Management instead.
-
If automatic signing fails in Xcode, verify that the project’s General > Identity > Bundle Identifier value is unique.
-
Start your app by running flutter run or clicking the Run button in Xcode.
macOS setup
Warning: Beta! This area covers desktop support, which is available as a beta release. Beta support still has notable feature gaps, including accessibility support. You can try a beta snapshot of desktop support on the stable channel,or you can keep up with the latest changes to desktop on the beta channel. For more information, see the Desktop section in What’s new in Flutter 2.2, a free article on Medium. |
Additional macOS requirements
For macOS desktop development, you need the following in addition to the Flutter SDK:
Enable desktop support
At the command line, perform the following command to enable desktop support
flutter config --enable-macos-desktop
For more information, see Desktop support for Flutter
Windows setup
Warning:Beta (Win32) and Dev (UWP)!
This area covers Windows desktop support, which is available in beta release (Win32) and alpha release (UWP).
The Win32 variant still has notable feature gaps, including accessibility support, while the UWP variant is still in very active development. You can try a beta snapshot of Win32 desktop support on the stable channel, or you can keep up with the latest changes to desktop on the beta channel. For Windows UWP you need to be on the dev channel. For more information, see the Desktop section in What’s new in Flutter 2.2, a free article on Medium. |
Additional Windows requirements
For Windows desktop development, you need the following in addition to the Flutter SDK:
- Visual Studio 2019 (not to be confused with Visual Studio Code). For Win32 you need the “Desktop development with C++” workload installed, including all of its default components. For UWP you need the “Universal Windows Platform development” workload installed, with the optional UWP C++ tools.
Enable desktop support
At the command line, perform the following command to enable Win32 desktop support:
$ flutter config --enable-windows-desktop
For Windows UWP desktop support perform the following commands to switch to the dev channel, upgrade Flutter, and enable UWP.
$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-windows-uwp-desktop
For more information, see Desktop support for Flutter
Web setup
Flutter has support for building web applications in the stable channel. Any app created in Flutter 2 automatically builds for the web. To add web support to an existing app, follow the instructions on Building a web application with Flutter when you’ve completed the setup above.
Set up an editor
You can build apps with Flutter using any text editor combined with our command-line tools. However, we recommend using one of our editor plugins for an even better experience. These plugins provide you with code completion, syntax highlighting, widget editing assists, run & debug support, and more.
Install VS Code
VS Code is a lightweight editor with Flutter app execution and debug support.
- VS Code, latest stable version
Install the Flutter and Dart plugins
- Start VS Code
- Invoke View > Command Palette….
- Type “install”, and select Extensions: Install Extensions.
- Type “flutter” in the extensions search field, select Flutter in the list, and click Install. This also installs the required Dart plugin.
Validate your setup with the Flutter Doctor
- Invoke View > Command Palette….
- Type “doctor”, and select the Flutter: Run Flutter Doctor.
- Review the output in the OUTPUT pane for any issues. Make sure to select Flutter from the dropdown in the different Output Options.
Android Studio and IntelliJ
Android Studio offers a complete, integrated IDE experience for Flutter.
- Android Studio, version 3.0 or later
Alternatively, you can also use IntelliJ:
- IntelliJ IDEA Community, version 2017.1 or later
- IntelliJ IDEA Ultimate, version 2017.1 or later
Install the Flutter and Dart plugins
The installation instructions vary by platform.
Mac
Use the following instructions for macos: 1.Start Android Studio. 2.Open plugin preferences (Preferences > Plugins as of v3.6.3.0 or later). 3.Select the Flutter plugin and click Install. 4.Click Yes when prompted to install the Dart plugin. 5.Click Restart when prompted.
Linux or Windows
Use the following instructions for Linux or WIndows:
1.Open plugin preferences (File > Settings > Plugins). 2.Select Marketplace, select the Flutter plugin and click Install.
Install Emacs
Emacs is a lightweight editor with support for Flutter and Dart.
- Emacs, latest stable version
Install the lsp-dart package
For information on how to install and use the package, see the lsp-dart documentation.
Create a new project with web support
You can use the following steps to create a new project with web support.
Set up
Run the following commands to use the latest version of the Flutter SDK:
$ flutter channel stable
$ flutter upgrade
If Chrome is installed, the flutter devices command outputs a Chrome device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app.
$ flutter devices
1 connected device:
Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150
In your IDE, you should see Chrome (web) in the device pulldown.
Create and run
Creating a new project with web support is no different than creating a new Flutter project for other platforms.
IDE
Create a new app in your IDE and it automatically creates iOS, Android, and web versions of your app. (And macOS, too, if you’ve enabled desktop support.) From the device pulldown, select Chrome (web) and run your app to see it launch in Chrome.
Command line
To create a new app that includes web support (in addition to mobile support), run the following commands, substituting myapp with the name of your project:
$ flutter create myapp
$ cd myapp
To serve your app from localhost in Chrome, enter the following from the top of the package:
$ flutter run -d chrome
Warning: Hot reload is not supported in a web browser Currently, Flutter supports hot restart, but not hot reload in a web browser. |
Build
Run the following command to generate a release build:
$ flutter build web
A release build uses dart2js (instead of the development compiler) to produce a single JavaScript file main.dart.js. You can create a release build using release mode (flutter run --release) or by using flutter build web. This populates a build/web directory with built files, including an assets directory, which need to be served together.
You can also include --web-renderer html or --web-renderer canvaskit to select between the HTML or CanvasKit renderers, respectively. For more information, see Web renderers.
Create and run a simple Flutter app
To create your first Flutter app and test your setup, follow these steps:
-
Create a new Flutter app by running the following from the command line:
$ flutter create my_app
-
A my_app directory is created, containing Flutter’s starter app. Enter this directory:
$ cd my_app
-
To launch the app in the Simulator, ensure that the Simulator is running and enter:
$ flutter run
1. 系统要求
要安装和运行 Flutter,您的开发环境必须满足以下最低要求:
-
操作系统:: Windows 7 SP1 及以上版本(64 位),基于 x86-64。
-
磁盘空间: 1.64 GB (不包括用于 IDE/工具的磁盘空间).
-
工具: Flutter 取决于这些工具在您的环境中是否可用。
- Windows PowerShell 5.0或者更改版本 (这是预装在 Windows 10 上的)
- Git for Windows 2.x 如果已经安装了 Git for Windows,请确保可以从命令提示符或 PowerShell 中运行 Git 命令。
2. 安装 Flutter SDK
正常安装
1.下载以下安装包,以获得 Flutter SDK 的最新稳定版本:
flutter_windows_2.2.3-stable.zip
要了解其他发布渠道和更早的版本,请参阅SDK 发布页面。
2.提取上面下载的 zip 文件并解压到 SDK 所需的安装位置(例如:C:\Users\<your-user-name>\Documents)
注意 不要将Flutter安装在像C:\Program Files\这样需要提升权限的目录中。 |
仓库地址安装
如果您不想安装安装包的固定版本,可以跳过步骤 1 和步骤 2。相反,我们可以从 GitHub 的地址仓库下载,并根据需要更改分支或标签。例如:
C:\src>git clone https://github.com/flutter/flutter.git -b stable
使用镜像
由于在国内访问 Flutter 有时可能会受到限制,Flutter 官方为**开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
注意: 此镜像为临时镜像,并不能保证一直可用,读者可以参考官方地址以获得有关镜像服务器的最新动态。
现在我们已经做好了执行 Flutter 命令的准备了。
3. 更新环境变量
WIndows
如果你希望在常规 Windows 控制台中运行 Flutter 命令,请执行以下步骤将 Flutter 添加到 PATH 环境变量中:
-
从开始搜索栏, 输入"环境变量"并选择编辑账户的环境变量。
-
在用户变量下检查是否有一个名为Path的条目:
-
如果条目存在,双击 Path,点击新建,添加一条Flutter 的安装路径\flutter\bin,安装路径需要目录指向直到结尾为 bin 。如果是手动输入添加,请记住用分号作为分隔符隔开。
-
如果该条目不存在,则点击新建,创建一个名为 Path 的新用户变量,变量值为Flutter 的安装路径\flutter\bin。
-
要使这些更改生效,必须关闭并重新打开任何现有控制台窗口。
提示:在Flutter的1.19.0开发发布版中,Flutter SDK在Flutter中旁边包含了dart命令,这样您就可以更容易地运行dart命令行程序。下载Flutter SDK也会附带下载Dart的兼容版本,但如果您单独下载了Dart SDK,请确保在您的路径中首先下载Dart的Flutter版本,因为这两个版本可能不兼容。下面的命令告诉您Flutter和Dart命令是否来自同一个bin目录,以此进行兼容。 |
C:\> where flutter dart
C:\path-to-flutter-sdk\bin\flutter
C:\path-to-flutter-sdk\bin\flutter.bat
C:\path-to-dart-sdk\bin\dart.exe :: this should go after `C:\path-to-flutter-sdk\bin\ commands`
C:\path-to-flutter-sdk\bin\dart
C:\path-to-flutter-sdk\bin\dart.bat
Mac
- 进入用户的根目录
- 创建一个全局配置 rc 文件。在终端中输入
echo $SHELL
会告诉你使用的是哪个 SHELL。 如果你使用 Bash,编辑$HOME/.bash_profile
或者$HOME/.bashrc
. 如果你使用 Z shell, 编辑 $HOME/.zshrc. 如果您使用不同的 shell,那么您的机器上的文件路径和文件名将会不同。 - 编辑配置的 rc 文件。
open -e 你的rc文件
- 在 rc 文件中配置以下命令即可,PATH_TO_FLUTTER_GIT_DIRECTORY 是你的 Flutter 安装目录.
export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH
- command+s 保存退出
- 设置全局成功后, 运行 which flutter 校验即可.
- 注意: 如果你使用的是 zsh,结果配置了 bash_profile,关闭终端,重新启动终端时 ~/.bash_profile 将不会被加载,解决办法就是修改
/.zshrc 这样关闭终端再次启动时,/.bash_profile 就会被再次加载,修改方法为以下命令:
echo 'source ~/.bash_profile' >> ~/.zshrc
4. 运行 flutter doctor
在控制台中(如果你未进行上一步操作,需要在 Flutter 目录下的控制台)运行以下命令,来查看是否还需要安装其它依赖,如果需要,安装它们:
C:\src\flutter>flutter doctor
该命令检查您的环境并显示 Flutter 安装状态的报告。仔细检查输出是否需要安装其他软件或执行进一步的任务。
运行示例:
[-] Android toolchain - develop for Android devices
• Android SDK at D:\Android\sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.dev/setup/#android-setup for detailed instructions.
以下部分描述如何执行这些任务并完成安装过程。一旦您安装了任何缺失的依赖项,您可以再次运行 flutter doctor 命令,以验证您已经正确地设置了所有内容。
提示: 如果 flutter doctor 返回,Android Studio 的 Flutter 插件或 Dart 插件没有安装,继续设置编辑器来解决这个问题。 |
5. 设置支持
Windows
额外的 Windows 需求
对于 Windows 桌面开发,除了 Flutter SDK 外,还需要以下工具:
- Visual Studio 2019 (not to be confused with Visual Studio Code). Visual Studio 2019
启用桌面支持
在命令行中,执行以下命令来启用 Win32 桌面支持:
$ flutter config --enable-windows-desktop
对于 Windows UWP 桌面支持,执行以下命令切换到 dev 通道,升级 Flutter,并启用 UWP。
$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-windows-uwp-desktop
有关更多信息,请参见桌面对Flutter 的支持
macOS
额外的 macOS 需求
对于 macOS 桌面开发,除了 Flutter SDK 外,您还需要以下工具:
启用桌面支持
在命令行中,执行以下命令以启用桌面支持
flutter config --enable-macos-desktop
有关更多信息,请参见 桌面对 Flutter 的支持
Web 设置
Flutter 支持在稳定通道中构建 web 应用程序。在 Flutter 2 中创建的任何应用程序都会自动为 web 构建。要在现有的应用程序中添加 web 支持,请在完成上述设置后,按照使用 Flutter构建 web 应用程序的说明进行操作。
6. 移动设备设置
macOS 支持在 iOS、Android 和 web 上开发 Flutter 应用程序(技术预览版),windows 上并不支持 ios 开发。现在至少完成一个平台设置步骤,以便能够构建和运行您的第一个 Flutter 应用程序。
安卓设置
提示: Flutter依赖于Android Studio的完整安装来提供它对Android平台的依赖。不过,你可以在许多编辑器中编写Flutter应用程序;后面的步骤将对此进行讨论。 |
安装 Android Studio
- 下载并安装 Android Studio.
- 启动 Android Studio,并通过“Android Studio 安装向导”。这将安装最新的 Android SDK、Android SDK 命令行工具和 Android SDK 构建工具,这些都是 Flutter 在为 Android 开发时所需要的。
- 玉兴 flutter doctor 确认 Flutter 已经定位到 Android Studio 的安装。 如果 Flutter 找不到它, 运行 flutter config --android-studio-dir <directory> 来手动设置 Android Studio 的安装目录。
设置你的 Android 设备
为了准备在 Android 设备上运行和测试 Flutter 应用程序,您需要一台运行 Android 4.1 (API 级别 16)或更高的 Android 设备。
- 在您的设备上启用开发人员选项和USB 调试。详细的说明可以在Android 文档中找到。
- 仅 windows:安装 Google USB Driver。
- 用 USB 数据线把手机和电脑连接起来。如果在您的设备上出现提示,请授权您的计算机访问您的设备。
- 在终端, 运行 flutter devices 命令来验证 Flutter 是否识别您连接的 Android 设备. 默认情况下,Flutter 使用基于adb工具的 Android SDK 版本。如果希望 Flutter 使用不同的 Android SDK 安装,则必须将ANDROID_SDK_ROOT 环境变量设置为该安装目录。
设置安卓模拟器
要准备在 Android 模拟器上运行和测试 Flutter 应用程序,请遵循以下步骤:
-
确认你的计算机 bios 里,已经开启了VM acceleration设置。
-
打开Android Studio, 点击 AVD Manager 图标, 并且选择 Create Virtual Device…
-
在旧版本的 Android Studio 中, 你应该点击 Android Studio > Tools > Android > AVD Manager 并且选择 Create Virtual Device…. (视图上 Android 子菜单只在 Android 项目中出现。)
-
如果你没有打开项目,点击 Configure > AVD Manager 并且选择 Create Virtual Device…
-
-
选择一个设备,点击 Next.
-
为要模拟的 Android 版本选择一个或多个系统映像, 点击 Next. 推荐使用 x86 或 x86_64 的镜像.
-
在 Emulated Performance 中, 选择 Hardware - GLES 2.0 启用 hardware acceleration.
-
验证 AVD 配置是否正确, 点击 Finish. 想了解更多的步骤, 请前往 Managing AVDs.
-
在 Android Virtual Device Manager, 在工具栏点击 Run. 模拟器就启动了。
同意 Android 许可
在使用 Flutter 之前,您必须同意 Android SDK 平台的许可。这个步骤应该在安装了上面列出的工具之后完成。
-
确保安装了 Java 8 版本,并将 JAVA_HOME 环境变量设置为 JDK 的文件夹。 Android Studio 2.2 及更高版本附带 JDK,所以这应该已经完成了。
-
打开一个控制台窗口并运行以下命令开始签名许可证。
$ flutter doctor --android-licenses
-
在同意每个许可条款之前,请仔细审查这些条款。
-
一旦你同意了许可证,运行 flutter doctor 再次确认你准备使用 Flutter。
iOS 设置
安装 Xcode
要开发适用于 iOS 的 Flutter 应用程序,你需要一台安装 Xcode 的 Mac 电脑。
-
安装最新稳定版本的 Xcode(使用 web 下载 或 Mac App Store)。
-
配置 Xcode 命令行工具,使用新安装的 Xcode 版本,从命令行运行以下命令::
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer $ sudo xcodebuild -runFirstLaunch
当你想要使用 Xcode 的最新版本时,这是大多数情况下正确的路径。如果您需要使用不同的版本,请指定该路径。
-
确保 Xcode 许可协议是通过打开 Xcode 一次并确认或从命令行运行sudo xcodebuild -license 来签署的。
比最新稳定版本更老的版本仍然可以工作,但不推荐用于 Flutter 开发。不支持使用旧版本的 Xcode 来定位 bitcode,而且很可能无法工作。
通过 Xcode,你可以在 iOS 设备或模拟器上运行 Flutter 应用程序。
设置 iOS 模拟器
要准备在 iOS 模拟器上运行和测试 Flutter 应用程序,请遵循以下步骤:
-
在你的 Mac 上,通过 Simulator via Spotlight 或使用以下命令找到模拟器:
$ open -a Simulator
-
通过模拟器里设置的 Hardware > Device 菜单,确认你的模拟器是使用 64-bit 设备 (iPhone 5s 或更高版本)。
-
根据开发机器的屏幕大小,模拟的高屏幕密度 iOS 设备可能会溢出你的屏幕。如果你的电脑分辨率足够高的话,拖拽模拟器的角落并拖动它来改变比例。你也能通过 Window > Physical Size 或 Window > Pixel Accurate 选项来进行设置。
- 如果你使用的是比 9.1 版本更早的 Xcode,你应该在 Window > Scale 菜单中设置设备规模。
连接 iOS 真机设备
要将 Flutter 应用部署到物理 iOS 设备上,你需要在 Xcode 中设置物理设备部署和苹果开发者账户。如果你的应用使用 Flutter 插件,你还需要第三方 CocoaPods 依赖管理器。
-
如果你的应用程序不依赖于带有本地 iOS 代码的 Flutter 插件,你可以跳过这一步。运行以下命令 安装和设置 CocoaPods:
$ sudo gem install cocoapods
提示: Ruby 的默认版本需要 sudo 来安装 CocoaPods gem。如果您使用的是 Ruby 版本管理器,则可能需要在不使用 sudo 的情况下运行。 -
遵循 Xcode 签名流程来提供项目:
-
在项目中打开默认的 Xcode 工作区,在 Flutter 项目目录的终端窗口中运行 open ios/Runner。。
-
在运行按钮旁边的设备下拉菜单中选择要部署的设备
-
在左侧导航面板中选择 Runner 项目。
-
在Runner的 Signing & Capabilities > Team. 设置中, 确保您的开发团队被选中。
当你选择一个团队时,Xcode会创建并下载一个开发证书,用你的账户注册你的设备,并创建并下载一个配置文件(如果需要的话)。-
要开始你的第一个 iOS 开发项目,你可能需要用你的苹果 ID 登录到 Xcode。
支持任何 Apple ID 的开发和测试。要想将你的应用发布到 app Store,你需要注册 Apple Developer Program。有关成员类型的详细信息,请参见 选择成员。
-
当你第一次使用附加的物理设备进行 iOS 开发时,你需要同时信任你的 Mac 和该设备上的开发证书。当第一次将 iOS 设备连接到你的 Mac 时,在对话框提示中选择信任。
然后,在 iOS 设备上进入设置,选择 General > Device Management信任你的证书。对于第一次使用的用户,可能设置路径是 General > Profiles > Device Management。
-
如果 Xcode 中的自动签名失败,验证项目的 General > Identity > Bundle Identifier 值是唯一的。
-
-
通过运行 flutter run 或点击 Xcode 中的 run 按钮来启动应用程序。
7. 设置编辑器
您可以使用任何文本编辑器与命令行工具结合使用 Flutter 构建应用程序。但是,我们推荐使用我们的编辑器插件,以获得更好的体验。这些插件提供了代码完成、语法高亮显示、小部件编辑辅助、运行和调试支持等等。
安装 VS Code
VS Code 是一个轻量级编辑器,支持 Flutter 应用程序的执行和调试。
- VS Code, 最新稳定版本。
安装 Flutter 和 Dart 插件
- 打开 VS Code
- 调用 View > Command Palette….
- 输入"install", 选择 Extensions: Install Extensions.
- 在扩展搜索栏中输入"flutter",在列表中选择 flutter,然后点击 安装 。这也安装了所需的 Dart 插件。
用 Flutter Doctor 验证你的设置
- 调用 View > Command Palette….
- 输入 "doctor", 选择 Flutter: Run Flutter Doctor.
- 查看 OUTPUT 窗格中的输出是否存在任何问题。请确保从不同输出选项的下拉菜单中选择 Flutter。
Android Studio 或者 IntelliJ
Android Studio 为 Flutter 提供了完整的集成 IDE 体验。
- Android Studio, 版本 3.0 或更高版本
或者,您也可以使用 IntelliJ:
- IntelliJ IDEA Community, 版本 2017.1 或更高版本
- IntelliJ IDEA Ultimate, 版本 2017.1 或更高版本
安装 Flutter 和 Dart 插件
安装说明因平台而异。
Mac
macos 的使用说明如下:
- 开启 Android Studio.
- 打开 plugin preferences (Preferences > Plugins 截至 v3.6.3.0 或更高版本).
- 选择 Flutter 插件并单击 Install。
- 当提示安装 Dart 插件时,单击 Yes。
- 安装完成后,提示时点击 Restart 。
Linux 或 Windows
对于 Linux 或 WIndows 操作系统,请使用以下说明:
- 打开 plugin preferences (File > Settings > Plugins).
- 选择 Marketplace, 选择 Flutter 插件并单击 Install.
Install Emacs
Emacs 是一个轻量级编辑器,支持 Flutter 和 Dart。
- Emacs, 最新稳定版本
安装 lsp-dart 包
有关如何安装和使用该包的信息,请参阅lsp-dart 文档。
构建 web 应用程序
您可以使用下面的步骤来创建一个新的 web 支持项目。
Web 运行环境设置
运行以下命令使用最新版本的 Flutter SDK:
$ flutter channel stable
$ flutter upgrade
如果安装了 Chrome, flutter devices命令输出一个 Chrome 设备,该设备在运行应用程序时打开 Chrome 浏览器,以及一个 Web 服务器,该服务器提供应用程序的 URL。
$ flutter devices
1 connected device:
Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150
在你的 IDE 中,你应该在设备下拉框中看到 Chrome (web) 选项。
创建并且运行一个项目
创建一个 web 支持的新项目与官方示例 creating a new Flutter 其他平台的项目没有什么不同。
IDE
在 IDE 中创建一个新应用程序,它会自动创建 iOS、Android 和 web 版本的应用程序(如果你启用了桌面支持,也可以创建 macOS)。从设备的下拉菜单中,选择 Chrome (web)并运行你的应用程序,以看到它在 Chrome 中启动。
命令行
要创建一个包含 web 支持(除了移动支持)的新应用程序,运行以下命令,用你的项目名称替换 myapp:
$ flutter create myapp
$ cd myapp
要在 Chrome 中从本地主机服务你的应用程序,输入以下内容:
$ flutter run -d chrome
警告: 目前,Flutter支持热重启,但不支持web浏览器热重新加载。 |
编译
运行以下命令生成发布版本:
$ flutter build web
发布版本使用了 dart2js(而不是 development compiler )来生成一个 JavaScript 文件 main.dart.js。您可以使用 (flutter run --release)或使用 release 模式下的 flutter build web. 创建一个 release 构建包。这将使用构建文件填充构建/web 目录,包括需要一起服务的资产目录。
你也可以包含--web-renderer html或--web-renderer canvaskit来分别选择 html 或 canvaskit 渲染器。有关更多信息,请参见 Web renderers。
8. 创建并运行一个简单的 Flutter 应用
要创建您的第一个 Flutter 应用程序并测试您的设置,请遵循以下步骤:
-
通过从命令行运行以下命令创建一个新的 Flutter 应用程序:
$ flutter create my_app
-
创建了一个 my_app目录,其中包含 Flutter 的启动应用程序。
$ cd my_app
-
要在模拟器中启动应用程序,请确保模拟器正在运行并输入:
$ flutter run
-
想要使用相关依赖包时,请使用 flutter pub get.