在Android Studio中创建简单的Flutter应用程序

本章节，我们将创建一个简单的Flutter应用程序，以了解在Android Studio中创建Flutter应用程序的基础知识。

步骤1 - 打开Android Studio

步骤2 - 创建Flutter项目。为此，点击文件 → 新建 → 新建Flutter项目

步骤3 - 选择Flutter应用程序。为此，选择Flutter应用程序并点击下一步。

步骤4 - 按如下配置应用程序，然后点击下一步。

项目名称：hello_app
Flutter SDK路径：<flutter_sdk_路径>
项目位置：<项目文件夹路径>
描述：基于Flutter的hello world应用程序

步骤5 - 配置项目。

将公司域名设置为flutterapp.tutorialspoint.com，然后点击完成。

步骤6 - 输入公司域名。

Android Studio创建一个具有最少功能的完全可运行的Flutter应用程序。让我们检查一下应用程序的结构，然后更改代码来完成我们的任务。

应用程序的结构及其用途如下：

此处解释了应用程序结构的各个组成部分：

android - 自动生成的源代码，用于创建Android应用程序
ios - 自动生成的源代码，用于创建iOS应用程序
lib - 包含使用Flutter框架编写的Dart代码的主文件夹
lib/main.dart - Flutter应用程序的入口点
test - 包含用于测试Flutter应用程序的Dart代码的文件夹
test/widget_test.dart - 示例代码
.gitignore - Git版本控制文件
.metadata - 由Flutter工具自动生成
.packages - 自动生成以跟踪Flutter包
.iml - Android Studio使用的项目文件
pubspec.yaml - 由Pub（Flutter包管理器）使用
pubspec.lock - 由Flutter包管理器Pub自动生成
README.md - 用Markdown格式编写的项目描述文件

步骤7 - 将lib/main.dart文件中的Dart代码替换为以下代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application',
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Home page'),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text(this.title),
         ),
         body: Center(
            child:
            Text(
               'Hello World',
            )
         ),
      );
   }
}

让我们逐行了解Dart代码。

第1行 - 导入Flutter包material。material是一个Flutter包，用于根据Android指定的Material Design指南创建用户界面。
第3行 - 这是Flutter应用程序的入口点。调用runApp函数并向其传递MyApp类的对象。runApp函数的目的是将给定的widget附加到屏幕上。
第5-17行 - Widget用于在Flutter框架中创建UI。StatelessWidget是一个widget，它不维护widget的任何状态。MyApp扩展了StatelessWidget并覆盖了其build方法。build方法的目的是创建应用程序UI的一部分。此处，build方法使用MaterialApp，这是一个用于创建应用程序根级别UI的widget。它具有三个属性：title、theme和home。
- title是应用程序的标题
- theme是widget的主题。在这里，我们使用ThemeData类及其属性primarySwatch将蓝色设置为应用程序的整体颜色。
- home是应用程序的内部UI，我们将其设置为另一个widget，MyHomePage
第19-38行 - MyHomePage与MyApp相同，只是它返回Scaffold Widget。Scaffold是紧挨着MaterialApp widget的顶级widget，用于创建符合Material Design的UI。它有两个重要的属性，appBar用于显示应用程序的标题，body用于显示应用程序的实际内容。AppBar是另一个用于呈现应用程序标题的widget，我们将其用于appBar属性。在body属性中，我们使用了Center widget，它将子widget居中。Text是最终的也是最内部的widget，用于显示文本，它显示在屏幕中央。

步骤8 - 现在，使用运行 → 运行main.dart运行应用程序

步骤9 - 最后，应用程序的输出如下：

打印页面