Flutter on Dapeng Zhang

学习Flutter必须知道的资源

Tue, 05 Aug 2025 09:48:37 +0000

flutter 社区

https://flutter.dev/community

flutter 文档

https://flutter.dev/docs

Flutter新版本发布 - 1.20 Release: Flutter's biggest release yet!

Tue, 05 Aug 2025 09:48:15 +0000

1.20 Release: Flutter’s biggest release yet! Performance improvements, mobile autofill, a new widget, and more!

Announcing Flutter 1.20

时间：Aug 5, 2020

作者：Chris Sells

原文链接点击这里

VS Code开发Flutter App - 创建无限滚动ListView

Fri, 01 Aug 2025 10:32:10 +0000

本次分享将展开RandomWordsState以生成并显示单词对的列表。当用户滚动时，ListView小部件中显示的列表会无限增长。ListView的构建器工厂构造函数允许您根据需要懒惰地构建列表视图。

第一步、将_suggestions列表添加到RandomWordsState类以保存建议的单词对。另外，添加一个biggerFont变量来使字体更大。

**Tips** 带有下划线前缀的标识符在Dart语言中会被强制进行隐私处理。添加的代码如下

class RandomWordsState extends State<RandomWords> {
 final _suggestions = <WordPair>[]; // 新加

 final _biggerFont = const TextStyle(fontSize: 18.0); // 新加

 @override
 Widget build(BuildContext context) {
 final wordPair = WordPair.random();
 return Text(wordPair.asCamelCase);
 }
}

下一步添加一个_buildSuggestions()方法到RandomwordsState类中，这个方法创建ListView，用来显示建议单词对.

ListView类提供了一个构建器属性itemBuilder，它是一个工厂构建器和指定为匿名函数的回调函数。
两个参数传递给函数 - BuildContext和行迭代器i。
迭代器从0开始，每次调用函数时递增，对于每个建议的单词配对一次。
此模型允许建议的列表在用户滚动时无限增长。

第二步、添加完整的_buildSuggestions()方法到RandomwordsState类中

代码如下

class RandomWordsState extends State<RandomWords> {
 final _suggestions = <WordPair>[];
 final _biggerFont = const TextStyle(fontSize: 18.0);

 Widget _buildSuggestions() {
 return ListView.builder(
 padding: const EdgeInsets.all(16.0),
 itemBuilder: (context, i) {
 if (i.isOdd) return Divider();

 final index = i ~/ 2;

 if (index >= _suggestions.length) {
 _suggestions.addAll(generateWordPairs().take(10));
 }

 return _buildRow(_suggestions[index]);
 }
 );
 }

 @override
 Widget build(BuildContext context) {
 final wordPair = WordPair.random();
 return Text(wordPair.asCamelCase);
 }
}

_buildSuggestions()函数每个单词对调用一次_buildRow()。此函数在ListTile中显示每个新对，可以在下一步中使行更具吸引力。

第三步、添加_buildRow() 到RandomWordsState类中

完整代码如下

class RandomWordsState extends State<RandomWords> {
 final _suggestions = <WordPair>[];
 final _biggerFont = const TextStyle(fontSize: 18.0);

 Widget _buildSuggestions() {
 return ListView.builder(
 padding: const EdgeInsets.all(16.0),
 itemBuilder: (context, i) {
 if (i.isOdd) return Divider();

 final index = i ~/ 2;

 if (index >= _suggestions.length) {
 _suggestions.addAll(generateWordPairs().take(10));
 }

 return _buildRow(_suggestions[index]);
 }
 );
 }

 Widget _buildRow(WordPair wordPair) {
 return ListTile(
 title: Text(
 wordPair.asPascalCase,
 style: _biggerFont,
 ),
 );
 }

 @override
 Widget build(BuildContext context) {
 final wordPair = WordPair.random();
 return Text(wordPair.asCamelCase);
 }
}

第四步、更新RandomWordsState的构建方法以使用_buildSuggestions()，而不是直接调用单词生成库。（脚手架实现了基本的Material Design视觉布局）

完整代码如下：

class RandomWordsState extends State<RandomWords> {
 final _suggestions = <WordPair>[];
 final _biggerFont = const TextStyle(fontSize: 18.0);

 Widget _buildSuggestions() {
 return ListView.builder(
 padding: const EdgeInsets.all(16.0),
 itemBuilder: (context, i) {
 if (i.isOdd) return Divider();

 final index = i ~/ 2;

 if (index >= _suggestions.length) {
 _suggestions.addAll(generateWordPairs().take(10));
 }

 return _buildRow(_suggestions[index]);
 }
 );
 }

 Widget _buildRow(WordPair wordPair) {
 return ListTile(
 title: Text(
 wordPair.asPascalCase,
 style: _biggerFont,
 ),
 );
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('启动一个生成器')
 ),
 body: _buildSuggestions(),
 );
 }
}

第五步、更新MyApp的构建方法，更改标题，并将home更改为RandomWords小部件

使用下面突出显示的构建方法替换原始方法：

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: '启动一个生成器 - Gowhich',
 home: RandomWords(),
 );
 }
}

第六步、重启应用

无论你滚动多远，你都应该看到一个单词配对列表。如下图

{% img https://res.cloudinary.com/dy5dvcuc1/image/upload/v1536274634/xiaorongmao/xrm_web_23_1.png "" %}

VS Code开发Flutter App - 添加有状态小部件篇

Fri, 01 Aug 2025 10:31:52 +0000

无状态小部件是不可变的，这意味着它们的属性不能改变 - 所有值都是最终的。

有状态窗口小部件维护可能在窗口小部件生命周期内发生更改的状态。
实现有状态窗口小部件至少需要两个类：

一个StatefulWidget类，它创建一个2)State类的实例。
StatefulWidget类本身是不可变的，但State类在窗口小部件的生命周期内持久存在。

在此步骤中，将添加一个有状态窗口小部件RandomWords，它创建其State类，RandomWordsState。然后，我们将使用RandomWords作为现有MyApp无状态组件

创建一个最小的状态类。

将以下内容添加到main.dart的底部：

class RandomWordsState extends State<RandomWords> {

}

注意声明State<RandomWords>。
这表明我们正在使用专门用于RandomWords的通用State类。
应用程序的大多数逻辑和状态都驻留在这里 - 它维护RandomWords小部件的状态。
当用户通过切换图标从列表中添加或删除它们时，此类保存生成的单词对，这些单词对随着用户滚动而无限增长，并且最喜欢的单词对（在第2部分中）。

RandomWordsState依赖于RandomWords类。接下来会添加它。

将有状态的`RandomWords`小部件添加到main.dart。除了创建State类之外，RandomWords小部件几乎没有其他功能：

class RandomWords extends StatefulWidget {
 @override
 RandomWordsState createState() => new RandomWordsState();
}

添加状态类后，IDE会抱怨该类缺少构建方法。
接下来，将添加一个基本构建方法，通过将单词生成代码从MyApp移动到RandomWordsState来生成单词对。

将build()方法添加到RandomWordsState：

class RandomWordsState extends State<RandomWords> {
 @override
 Widget build(BuildContext context) {
 final wordPair = WordPair.random();
 return Text(wordPair.asCamelCase);
 }
}

从MyApp中删除单词生成代码：

删除MyApp中的如下代码

final wordPair = WordPair.random();

同时将如下代码

child: Text(wordPair.asCamelCase),

替换为

child: RandomWords(),

重启应用。

应用程序应该像以前一样运行，每次热重新加载或保存应用程序时都会显示一个单词配对。

**Tips**
如果您在热重新加载时看到以下警告，请考虑重新启动应用程序：

Reloading…
Some program elements were changed during reload but did not run when the view was reassembled; you may need to restart the app (by pressing “R”) for the changes to have an effect.

这可能是误报，但重新启动可确保您的更改反映在应用程序的UI中。

VS Code开发Flutter App - External Package篇

Fri, 01 Aug 2025 10:31:46 +0000

本次分享将使用名为english_words的开源软件包，其中包含几千个最常用的英语单词和一些实用程序函数。可以在pub.dartlang.org上找到english_words包以及许多其他开源软件包。

添加外部包

pubspec文件管理Flutter应用程序的资产和依赖项。
打开VS Code，然后打开pubspec.yaml，在pubspec.yaml中，将english_words(3.1.0或更高版本)添加到依赖项列表中。
添加下面突出显示的行：

dependencies:
 flutter:
 sdk: flutter

 cupertino_icons: ^0.1.0
 english_words: ^3.1.0 # 新加的一行

安装外部包

在VS Code中添加完此行后，会在输出窗口中看到如下输出，代表程序在更新并添加新的包

[flutter_myapp] flutter packages get
Running "flutter packages get" in flutter_myapp...

执行包也可以自动生成pubspec.lock文件，其中包含项目中所有包的列表及其版本号。

使用外部包

打开lib/main.dart文件, 导入新的包，代码如下:

import 'package:english_words/english_words.dart';

在您键入时，VS Code会为您提供导入库的建议。
然后它将导入字符串呈灰色，让您知道导入的库未使用（到目前为止）。

修改代码

使用英语单词包生成文本而不是使用字符串"Hello World"。
进行以下更改：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 final wordPair = WordPair.random(); // 新加代码
 return MaterialApp(
 title: 'Welcome to Flutter - Gowhich',
 home: Scaffold(
 appBar: AppBar(
 title: Text('Welcome to Flutter - Gowhich'),
 ),
 body: Center(
 child: Text(wordPair.asCamelCase), // 新加代码
 ),
 ),
 );
 }
}

{% img https://res.cloudinary.com/dy5dvcuc1/image/upload/v1535639188/xiaorongmao/xrm_web_16_1.png "" %}

如果应用程序正在运行，请使用hot reload功能更新正在运行的应用程序。
每次进行hot reload操作或保存项目时，应该在正在运行的应用程序中看到一个随机选择的不同单词对。
这是因为单词配对是在构建方法中生成的，该方法在每次MaterialApp需要渲染时运行，或者在Flutter Inspector中切换平台时运行。

VS Code开发Flutter App - 配置篇

Fri, 01 Aug 2025 10:31:43 +0000

VS Code开发Flutter App - 配置篇

配置

VS Code - 具有Flutter运行和调试支持的轻量级编辑器

安装 VS Code

VS Code, 下载最新稳定版本

安装Flutter插件

启动VS Code
调用 View>Command Palette
输入"install"，然后选择"Extensions：Install Extension"操作
在搜索框中输入flutter，在列表中选择"Flutter"，然后单击"Install"
选择"OK"以重新加载VS Code

使用Flutter Doctor验证您的设置

调用 View>Command Palette
输入"doctor"，然后选择"Flutter：Run Flutter Doctor"操作
查看"OUTPUT"窗口中的输出的信息，查看是否存在其他问题

做完以上几步，如果没有任何问题，就可以继续开发了，如果遇到问题，可以加群或者下面留言交流

创建一个新的 Flutter App

本次分享只是一个创建Flutter应用程序的分享。本次分享不需要具备太多技能，只要熟悉面向对象的代码和基本编程概念（如变量，循环和条件），下面的一些分享基本上你也可以完成。而且不需要以前有使用过Dart或移动编程的经验。

创建新应用

启动 VS Code
调用 View > Command Palette
输入 “flutter”, 然后选择 “Flutter: New Project"操作
输入一个项目名称，例如"flutter_myapp”, 然后按回车键
为新项目目录创建或者选择一个父文件夹
等待项目创建完成main.dart文件会出现

Tips 这里我在创建的时候遇到一个问题，就是创建是失败了，原因是因为很多Flutter要求的没有正常处理完。主要是在执行"flutter doctor"的时候有一些提示没有解决完，所以建议大家在操作的时候，尽量将"flutter doctor"的提示处理完。

运行App

启动模拟器

运行之前先执行open -a Simulator启动一个模拟器，我是在mac下执行的，如果你是在linux或者window下执行，建议也提前启动一个模拟器。

调用 Debug > Start Debugging 或者按 F5
等待App运行 - Debug命令行窗口会被打印出进度
如果一切正常，应用程序构建完成后，将在设备上看到启动应用程序

尝试hot reload

Flutter提供快速开发周期和hot reload，能够重新加载实时运行的应用程序的代码，而无需重新启动或丢失应用程序状态。
只需更改源代码，告诉IDE或命令行工具您要热重新加载，并查看模拟器，模拟器或设备中的更改。

打开lib/main.dart
修改字符串’You have pushed the button this many times:’ 改为’You have clicked the button this many times:'

Important: 不要按停止按钮；让应用保持运行状态

保存更改: 调用 File > Save All, 或者点击R按钮来更新

你将立刻看到更新的字符串在运行的App上

这一点我非常喜欢，以前开发app，每次改完都要重新启动一次，而且android或者ios重新编译一次耗时很久，电脑性能不好的话，还真的就只能干等着。

更新lib/main.dart

删除lib/main.dart中的所有代码。替换为以下代码，在屏幕中央显示"Hello World"。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Welcome to Flutter - Gowhich',
 home: Scaffold(
 appBar: AppBar(
 title: Text('Welcome to Flutter - Gowhich'),
 ),
 body: Center(
 child: Text("Holle Flutter - Gowhich")
 ),
 ),
 );
 }
}

总结

此示例创建一个Material应用程序。Material是一种视觉设计语言，是移动和Web上的标准语言。Flutter提供了丰富的Material小部件。
main方法指定fat arrow(=>)表示法。对单行函数或方法使用(=>)表示法。
该应用程序扩展了StatelessWidget，使应用程序本身成为一个小部件。在Flutter中，几乎所有东西都是一个小部件，包括对齐，填充和布局。
Material库中的"Scaffold"窗口小部件提供默认的应用栏、标题和包含主屏幕窗口小部件树的主体属性。小部件子树可能非常复杂。
小部件的主要工作是提供build()方法，该方法描述如何根据其他较低级别的小部件显示小部件。
此示例的正文包含一个包含Text子窗口小部件的Center窗口小部件。“Center"窗口小部件将其窗口小部件子树与屏幕中心对齐。

今天的分享就到这里。

Flutter入门之安装Flutter

Fri, 01 Aug 2025 09:22:22 +0000

最近Flutter很火的样子，了解了一下，据说是比ReactNative方便开发，今天分享下如何安装

1、安装Flutter

系统要求

要安装和运行Flutter，您的开发环境必须满足以下最低要求：

Operating Systems: macOS (64-bit)
Disk Space: 700 MB (does not include disk space for IDE/tools).
Tools: Flutter取决于您的环境中可用的这些命令行工具.bash, mkdir, rm, git, curl, unzip, which

国内安装流程

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
git clone -b master https://github.com/flutter/flutter.git
export PATH="$PWD/flutter/bin:$PATH"
cd ./flutter

运行以下命令以查看是否需要安装任何依赖项才能完成设置：

flutter doctor

安装过程中会遇到类似下面的问题

Because flutter_tools depends on file_testing 2.0.3 which doesn't match any versions, version solving failed.
Error: Unable to 'pub upgrade' flutter tool. Retrying in five seconds... (9 tries left)

要解决这个问题，多数是网络问题，设置下代理就好了，如下

export https_proxy="proxyserver"

设置后再次执行flutter doctor如果代理没有问题就可以正常安装了，执行完的结果类似如下

$ flutter doctor 
Building flutter tool...

 ╔════════════════════════════════════════════════════════════════════════════╗
 ║ Welcome to Flutter! - https://flutter.io ║
 ║ ║
 ║ The Flutter tool anonymously reports feature usage statistics and crash ║
 ║ reports to Google in order to help Google contribute improvements to ║
 ║ Flutter over time. ║
 ║ ║
 ║ Read about data we send with crash reports: ║
 ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting ║
 ║ ║
 ║ See Google's privacy policy: ║
 ║ https://www.google.com/intl/en/policies/privacy/ ║
 ║ ║
 ║ Use "flutter config --no-analytics" to disable analytics and crash ║
 ║ reporting. ║
 ╚════════════════════════════════════════════════════════════════════════════╝

Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Downloading Material fonts... 5.1s
Downloading package sky_engine... 4.5s
Downloading common tools... 20.8s
Downloading darwin-x64 tools... 77.2s
Downloading android-arm-profile/darwin-x64 tools... 6.6s
Downloading android-arm-release/darwin-x64 tools... 5.3s
Downloading android-arm64-profile/darwin-x64 tools... 5.5s
Downloading android-arm64-release/darwin-x64 tools... 6.6s
Downloading android-x86 tools... 23.6s
Downloading android-x64 tools... 15.0s
Downloading android-arm tools... 9.4s
Downloading android-arm-profile tools... 6.9s
Downloading android-arm-release tools... 12.8s
Downloading android-arm64 tools... 7.3s
Downloading android-arm64-profile tools... 7.8s
Downloading android-arm64-release tools... 5.7s
Downloading android-arm-dynamic-profile tools... 7.4s
Downloading android-arm-dynamic-release tools... 5.4s
Downloading android-arm64-dynamic-profile tools... 6.8s
Downloading android-arm64-dynamic-release tools... 6.2s
Downloading ios tools... 15.1s
Downloading ios-profile tools... 38.4s
Downloading ios-release tools... 14.4s
Downloading Gradle Wrapper... 1.4s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v0.5.9-pre.83, on Mac OS X 10.12.6 16G1314, locale zh-Hans-CN)
[✗] Android toolchain - develop for Android devices
 ✗ Unable to locate Android SDK.
 Install Android Studio from: https://developer.android.com/studio/index.html
 On first launch it will assist you in installing the Android SDK components.
 (or visit https://flutter.io/setup/#android-setup for detailed instructions).
 If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[!] iOS toolchain - develop for iOS devices (Xcode 9.0)
 ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
 brew install --HEAD libimobiledevice
 brew install ideviceinstaller
 ✗ ios-deploy not installed. To install:
 brew install ios-deploy
 ! CocoaPods out of date (1.5.0 is recommended).
 CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side.
 Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
 For more info, see https://flutter.io/platform-plugins
 To upgrade:
 brew upgrade cocoapods
 pod setup
[✗] Android Studio (not installed)
[!] IntelliJ IDEA Ultimate Edition (version 2017.3.5)
 ✗ Flutter plugin not installed; this adds Flutter specific functionality.
 ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.26.1)
[!] Connected devices
 ! No devices available

! Doctor found issues in 6 categories.

将Flutter永久添加到您的路径

为了在任何终端会话中都能运行flutter命令。
通常，只需在打开新窗口时执行的文件中添加一行。
例如：

确定放置Flutter SDK的目录。您将在步骤3中使用此功能。
打开（或创建）$HOME/.bash_profile或者$HOME~/.zshrc。您的计算机上的文件路径和文件名可能不同。
添加以下行并将[PATH_TO_FLUTTER_GIT_DIRECTORY]更改为克隆Flutter的git repo的路径：

export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH

运行source $HOME/.bash_profile或source $HOME/.zshrc刷新当前窗口.
通过运行验证flutter/bin目录现在位于PATH中，如下

echo $PATH

如果输出有如下内容说明配置成功

/xxx/xxx/flutter/bin:/xxx/xxx/xxxx/otherpath

Flutter on Dapeng Zhang

学习Flutter必须知道的资源

Flutter新版本发布 - 1.20 Release: Flutter's biggest release yet!

Announcing Flutter 1.20

Performance improvements, mobile autofill, a new widget and more!

VS Code开发Flutter App - 创建无限滚动ListView

第一步、将_suggestions列表添加到RandomWordsState类以保存建议的单词对。另外，添加一个biggerFont变量来使字体更大。

第二步、添加完整的_buildSuggestions()方法到RandomwordsState类中

第三步、添加_buildRow() 到RandomWordsState类中

第四步、更新RandomWordsState的构建方法以使用_buildSuggestions()，而不是直接调用单词生成库。（脚手架实现了基本的Material Design视觉布局）

第五步、更新MyApp的构建方法，更改标题，并将home更改为RandomWords小部件

第六步、重启应用

VS Code开发Flutter App - 添加有状态小部件篇

创建一个最小的状态类。

将有状态的RandomWords小部件添加到main.dart。除了创建State类之外，RandomWords小部件几乎没有其他功能：

将build()方法添加到RandomWordsState：

从MyApp中删除单词生成代码：

重启应用。

VS Code开发Flutter App - External Package篇

添加外部包

安装外部包

使用外部包

修改代码

VS Code开发Flutter App - 配置篇

配置

安装 VS Code

安装Flutter插件

使用Flutter Doctor验证您的设置

创建一个新的 Flutter App

创建新应用

运行App

尝试hot reload

更新lib/main.dart

Flutter入门之安装Flutter

1、安装Flutter

将有状态的`RandomWords`小部件添加到main.dart。除了创建State类之外，RandomWords小部件几乎没有其他功能：