Flutter正迅速成为开发跨平台移动应用程序的最流行框架之一。今天，大多数Android和iOS开发人员开始认为，它是一种比其他跨平台框架（如React Native和NativeScript）更快，更具面向未来的替代方案。
谷歌本身不遗余力地吸引更多开发者加入。例如，Google I / O今年有几个深入的会议，专注于使用它开发符合Material Design标准的应用程序。在其中一次会议中，Google还宣布Flutter将成为Material Design的一流平台。
在本系列教程中，我将帮助您掌握使用Flutter开发Android应用程序的基础知识。在本系列开始的教程中，我将重点关注Flutter小部件，这是所有Flutter应用程序的构建块。
先决条件
要充分利用这个系列，您需要：
- 最新版本的Android Studio
- 运行Android API等级21或更高版本的设备或模拟器
1.配置Android Studio
安装了一些轻量级插件后，您可以使用Android本地Android应用程序开发人员最熟悉的Android Studio来开发Flutter应用程序。
首先启动Android Studio，然后 在欢迎屏幕中选择配置>插件选项。
在弹出的对话框中，按“ 浏览存储库” 按钮并搜索Flutter插件。
浏览存储库对话框
找到插件后，按“ 安装” 按钮。此时，系统会询问您是否还要安装Dart插件。按是 继续。
插件依赖项对话框
安装 完两个插件后，按“ 重启Android Studio”按钮完成配置。
2.创建一个新项目
重启后，您将能够 在Android Studio欢迎屏幕上看到“ 启动新的Flutter项目”按钮。按此按钮开始创建您的第一个Flutter项目。
在下一个屏幕上，选择Flutter Application 选项，然后按Next。
创建Flutter项目对话框
您现在将看到一个表单，询问有关Flutter应用程序的各种详细信息，例如其名称和位置。确保在所有字段中键入有效值。
Flutter项目配置对话框
Flutter插件不与Flutter SDK捆绑在一起。因此，您必须单独安装SDK。您现在可以通过按“ 安装SDK” 按钮来执行此操作。
根据Internet连接的速度，安装可能需要相当长的时间才能完成。成功后，您将能够按“ 下一步” 按钮完成项目设置。
3.添加入口点
在本教程中，您将在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](https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg)"``);`
再次保存项目时，您应该在设备上看到类似的内容：
应用程序显示图像
欢迎加入Android技术开发交流2群：935654177。大家相互交流学习
5.创建小部件树
所有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](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
),
)
)
);
该应用程序现在应该看起来好多了。
应用程序显示Material Design小部件
7.使用有状态小部件
无状态小部件是不可变的。使用您在前面的步骤中编写的代码，没有简单的方法来修改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](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
}
当然，在方法中，您必须更改url 变量的值。但是，您不应该直接更改它。如果这样做，Flutter框架将不会收到有关更改的通知。要正确更新有状态窗口小部件的状态，必须始终在setState() 方法内进行所有更改。
目前，为了显示随机图像，我建议您使用Unsplash Source 服务。从中下载随机图像所需要做的就是向其URL发出HTTP请求并向其传递唯一的查询字符串。
以下代码显示如何使用时间戳构造唯一查询字符串：
`setState(() {`
`url =` `"[https://source.unsplash.com/random/800x600/?](https://source.unsplash.com/random/800x600/?)"` `+`
`"q=${new DateTime.now().millisecondsSinceEpoch}"``;`
`});`
此时，您的自定义State 类已准备就绪。接下来需要做的就是实例化它并从createState() 有状态小部件的方法返回它。
runApp(new MyFirstWidget());
如果您将有状态窗口小部件的实例传递给runApp()方法，重新加载应用程序，并按几次按钮，您应该会看到它每次都显示一张新照片。
应用程序显示随机照片
结论
您现在知道如何在Flutter应用程序中使用无状态和有状态的小部件。您还学习了如何将Material Design主题应用于它们，动态更改其内容并使它们具有交互性。
值得注意的是，Flutter不使用任何移动平台的本机小部件。它使用名为Skia的高性能2D图形引擎自行绘制所有小部件，该引擎广泛使用GPU。因此，Flutter应用程序通常以接近60 fps的速度运行，并且感觉非常流畅和响应。
Flutter.png
网友评论