Flutter 开发3：创建第一个Flutter应用

Step 1: 安装Flutter

1.1 下载Flutter SDK

首先，你需要访问Flutter官方网站下载最新的Flutter SDK。选择适合你操作系统的安装包。

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_2.2.3-stable.zip

1.2 更新环境变量

接下来，你需要将Flutter的bin目录添加到你的环境变量中。这样你就可以在任何地方运行Flutter命令。

$ export PATH="$PATH:`pwd`/flutter/bin"

Step 2: 安装Android Studio

Flutter需要一个Android平台来运行和测试应用程序。最简单的方式就是安装Android Studio，它包含了所有你需要的工具。

2.1 下载并安装Android Studio

访问Android Studio官方网站下载最新的Android Studio版本。然后按照提示进行安装。

2.2 安装Flutter和Dart插件

在Android Studio中，你需要安装Flutter和Dart插件来支持Flutter应用开发。

$ flutter doctor

这个命令将检查你的环境，并显示任何需要解决的问题。如果没有问题，你就可以开始创建你的第一个Flutter应用了。

Step 3: 创建你的第一个Flutter应用

3.1 使用Flutter命令行工具

使用Flutter命令行工具是创建新的Flutter应用最简单的方式。只需要运行以下命令：

$ flutter create my_app
$ cd my_app

这将创建一个新的Flutter应用，并且所有的代码都放在my_app目录下。
在这里插入图片描述

3.2 运行你的应用

在你的设备或模拟器上运行你的应用，只需要运行以下命令：

$ flutter run

在这里插入图片描述

现在你应该可以看到你的第一个Flutter应用在你的设备或模拟器上运行了。

Step 4: 探索你的应用

现在你已经创建了你的第一个Flutter应用，是时候更深入地了解它的工作原理了。让我们从main.dart文件开始。

$ cd lib
$ nano main.dart

这个文件是你的应用的入口点。它定义了一个main函数，这个函数调用了runApp函数，runApp函数接受一个Widget作为参数。在这个例子中，这个Widget是MyApp类的一个实例。

Step 5: 自定义你的应用

Flutter使用Widget来构建UI。每个Widget都是不可变的，一旦你的Widget被创建，你就不能改变它。但是，你可以通过改变它的状态来改变它的外观和行为。

5.1 创建一个新的Widget

让我们创建一个新的Widget，它包含一个按钮和一个文本。当你点击按钮时，文本将更新。

$ nano lib/main.dart

在这个文件中，你需要定义一个新的StatefulWidget。这个Widget有一个状态，当你点击按钮时，状态将更新，然后Widget将重新构建，显示新的文本。

class MyCustomWidget extends StatefulWidget {@override_MyCustomWidgetState createState() => _MyCustomWidgetState();
}class _MyCustomWidgetState extends State<MyCustomWidget> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}@overrideWidget build(BuildContext context) {return Container(child: Column(children: <Widget>[Text('You have pushed the button $_counter times.'),RaisedButton(onPressed: _incrementCounter,child: Text('Increment'),),],),);}
}

5.2 使用你的新Widget

现在你已经创建了一个新的Widget，你可以在你的应用中使用它。让我们把它添加到MyApp Widget中。

class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('My First Flutter App'),),body: MyCustomWidget(),),);}
}

现在，当你运行你的应用时，你应该可以看到你的新Widget，它包含一个显示文本和一个按钮。每次你点击按钮，文本都会更新。

5.3 测试你的应用

Flutter提供了一个强大的测试框架，你可以使用它来测试你的应用。让我们为你的新Widget写一个测试。

$ cd test
$ nano widget_test.dart

在这个文件中，你需要定义一个新的测试，这个测试将检查当你点击按钮时，文本是否正确更新。

void main() {testWidgets('MyCustomWidget updates text when button is pressed', (WidgetTester tester) async {await tester.pumpWidget(MyApp());expect(find.text('You have pushed the button 0 times.'), findsOneWidget);await tester.tap(find.byType(RaisedButton));await tester.pump();expect(find.text('You have pushed the button 1 times.'), findsOneWidget);});
}