找到插件后，按“ 安装” 按钮。此时，系统会询问您是否还要安装Dart插件。按是 继续。
安装 完两个插件后，按“ **重启Android Studio”**按钮完成配置。
重启后，您将能够 在Android Studio欢迎屏幕上看到“ **启动新的Flutter项目”**按钮。按此按钮开始创建您的第一个Flutter项目。
在下一个屏幕上，选择Flutter Application 选项，然后按Next。
您现在将看到一个表单，询问有关Flutter应用程序的各种详细信息，例如其名称和位置。确保在所有字段中键入有效值。
Flutter插件不与Flutter SDK捆绑在一起。因此，您必须单独安装SDK。您现在可以通过按“ 安装SDK” 按钮来执行此操作。
根据Internet连接的速度，安装可能需要相当长的时间才能完成。成功后，您将能够按“ 下一步” 按钮完成项目设置。
在本教程中，您将在lib / main.dart 文件中编写代码。默认情况下，它将包含一些您不需要的示例代码。所以在继续之前删除所有内容。
Flutter框架使用Dart编程语言，这是一种易于学习的语言，其语法与Java和C的语法非常相似。因此，像大多数独立的Java和C程序一样，Flutter应用程序也需要一个main() 函数，一个特殊的函数，作为应用程序的入口点。
因此，将以下代码添加到main.dart 文件中：
void main() {
// TO DO
}
此时，您可以按 Shift-F10 来构建和运行应用程序。如果您在前面的步骤中没有遇到任何错误，您应该会看到该应用在您的设备上显示空白的白色画布。
##4.使用无状态小部件
所有Flutter应用程序都由一个或多个小部件组成，类的实例允许您在屏幕上绘制文本和图像。通常，您不必从头开始编写任何低级小部件，因为该框架附带了各种预制的，漂亮的小部件，这些小部件遵循Android和iOS平台的设计语言。
为了能够在您的应用程序中使用基本小部件，请widgets 通过在main.dart 文件的开头添加以下代码来导入库：
import 'package:flutter/widgets.dart';
您可以创建的最简单的小部件是无状态小部件。正如您可能已经猜到的那样，它们没有与之相关的状态，因此是静态的。它们非常适合显示标签，标题和其他UI元素，其内容在应用程序运行时不太可能发生变化。要创建无状态窗口小部件，必须扩展StatelessWidget 该类并覆盖其build() 方法。以下示例代码显示了如何：
class MyFirstWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// More code here
}
}
正如您在上面的代码中看到的，该build() 方法必须返回一个Widget 对象。您可以自由选择并返回Flutter提供的数十种预制小部件中的任何一种。例如，如果要显示一行文本，可以创建并返回一个Text 小部件，如下所示：
return Text("This is nice!",
textDirection: TextDirection.ltr);
请注意，您必须始终记住在使用Text 窗口小部件时指定文本的方向 。
但是，如果您立即运行该应用程序，您将无法看到该文本。那是因为你还没有实例化你的无状态小部件。所以转到main() 方法，在其中实例化小部件，并将其传递给runApp() 方法。这是如何做：
runApp(new MyFirstWidget());
在您添加上述代码并保存项目的那一刻，Android Studio应该会自动在您的设备上热重新加载应用，以便您查看文本。
如果要显示图像而不是文本，可以Text 使用Image 类的build() 方法中的窗口小部件替换窗口小部件。以下代码显示如何创建Image 下载并显示远程图像的窗口小部件：
`return` `Image.network(`
`"[https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg]( )"``);`
再次保存项目时，您应该在设备上看到类似的内容：
欢迎加入Android技术开发交流2群：935654177。大家相互交流学习
所有Flutter应用程序都可以被视为小部件树。您在上一步中创建的应用程序是一个只包含一个小部件的小部件树。但是，使用Text 或Image 窗口小部件作为窗口小部件树的顶部元素并不是一个好主意，因为您将无法向它们添加任何子窗口小部件。
Flutter提供了几个可以作为其他小部件容器的小部件。最常用的是Row 和Column 小部件。正如他们的名字所暗示的那样， Row 小部件允许您将多个小部件放在一起，并且Column 小部件可以帮助您将小部件放在 另一个之下。在创建更深层的窗口小部件树时，它们是必不可少的。
以下代码显示如何使用Column 窗口小部件创建具有两个子窗口的窗口小部件树：Text 窗口小部件和Image 窗口小部件。
`Text myText = Text(``"This is a nice photo!"``,`
`textDirection: TextDirection.ltr);`
`Image myImage = Image.network(`
`"[https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg]( )"``);`
`return` `Column(`
`children: <Widget>[myText, myImage]`
`);`
该应用程序现在应该如下所示：
此外，还有一些小部件可以帮助您更好地定位单个小部件。例如，Center 窗口小部件可帮助您集中窗口小部件。同样，Container 窗口小部件允许您向窗口小部件添加填充和边距。
以下代码向您展示如何Column通过将您刚创建的窗口小部件嵌入窗口小部件来居中它Center：
return Center(child: Column(
children: <Widget>[myText, myImage],
mainAxisSize: MainAxisSize.min
)
);
在上面的代码中，请注意Column 窗口小部件使用一个名为的附加属性 mainAxisSize，其值设置为min。这是必要的，因为在对列居中之前，必须使其高度等于其所有子节点的高度之和。如果没有该属性，Column 窗口小部件将与设备的屏幕一样大，并且Center 窗口小部件将不会对其产生任何影响。
6.使用Material Design Widgets
在此期间，您一直在使用作为widgets 库的一部分的基本小部件。Flutter有一个名为的替代库material，它提供了Material Design小部件。要在您的应用程序中使用它，请使用以下内容替换导入widgets 库的语句：
import 'package:flutter/material.dart';
接下来，要将Material Design样式应用于窗口小部件，您必须MaterialApp 在窗口小部件树的顶部放置一个 窗口小部件。您还必须将先前创建的所有小部件嵌入到窗口小Scaffold 部件中，该窗口小部件可用作窗口小部件的主屏幕 MaterialApp 。
此外，由于大多数Material Design应用程序都有应用栏，因此您可以选择将Scaffold 小部件appBar 属性设置为新AppBar 小部件。
以下代码向您展示如何简洁地完成所有操作：
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("My App")),
body: Center(
child: Column(
children: <Widget>[myText, myImage],
mainAxisSize: MainAxisSize.min
),
)
)
);
该应用程序现在应该看起来好多了。
无状态小部件是不可变的。使用您在前面的步骤中编写的代码，没有简单的方法来修改Text 窗口小部件或Image 窗口小部件的内容。为什么？因为Flutter框架更喜欢反应式编程而不是命令式编程。因此，它的大多数小部件都没有可以在运行时更新其内容的setter方法。例如，Text 窗口小部件没有setText() 允许您更改其显示文本的方法。
另一方面，有状态小部件是可变的，尽管不是直接的。他们依靠 State 对象来决定在任何给定实例中应该显示什么。因此，只要State 对象发生更改，框架就会自动更新连接到它的任何有状态窗口小部件的内容。
要创建有状态窗口小部件，必须扩展StatefulWidget 该类并覆盖其 createState() 方法。
class MySecondWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TO DO
}
}
接下来，您必须创建一个新的自定义State 类，其中包含构成有状态窗口小部件状态的变量。此外，在类中，您必须重写 build() 方法以返回窗口小部件树。
以下代码显示如何创建State 包含名为的单个变量的类url：
`class` `MyState` `extends` `State<MySecondWidget> {`
`String url =` `"[https://source.unsplash.com/random/800x600]( )"``;`
`// A random image from Unsplash`
`@override`
`Widget build(BuildContext context) {`
`// More code here`
`}`
`}`
为了一个具体的例子，我们现在创建一个Material Design窗口小部件树Image ，其中包含一个显示随机图像的RaisedButton 窗口小部件和一个窗口小部件，用户可以按这个窗口小部件来加载新的随机图像。以下代码显示了如何：
return MaterialApp(
home: Scaffold(
body: Center(
child:Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
RaisedButton(
child: Text("Press Me"),
onPressed: changeURL,
),
Image.network(url)
]
)
)
)
);
请注意，Image 窗口小部件的构造函数现在将url 变量作为其输入，而不是字符串文字。这允许框架在Image 绘制窗口小部件时使用变量的最新值。
另请注意，RaisedButton 窗口小部件具有onPressed 指向名为的事件侦听器的属性changeURL()。该方法尚不存在，因此请创建它。
void changeURL() {
// More code here
}
