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

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

第 1 步 - 打开 Android Studio

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

第 3 步 - 选择 Flutter 应用程序。 为此，选择 Flutter Application 并单击 Next。

第 4 步 - 如下配置应用程序，然后单击 Next。

• 项目名称：hello_app
• Flutter SDK 路径：<path_to_flutter_sdk>
• 项目位置：<path_to_project_folder>
• 描述：基于 Flutter 的 hello world 应用程序

第 5 步 - 配置项目。

将 company 域设置为 flutterapp.jiyik.com 并单击 Finish。

第 6 步 - 输入 company 域。

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

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

此处解释了应用程序结构的各种组件

• android - 自动生成的源代码来创建 android 应用程序
• ios - 自动生成的源代码来创建 ios 应用程序
• lib - 包含使用颤振框架编写的 Dart 代码的主文件夹
• ib/main.dart- Flutter 应用程序的入口点
• test - 包含 Dart 代码的文件夹以测试颤振应用程序
• test/widget_test.dart - 示例代码
• .gitignore - Git 版本控制文件
• .metadata - 由颤振工具自动生成
• .packages - 自动生成以跟踪颤振包
• .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设计指南创建用户界面。
• 第 3 行 - 这是 Flutter 应用程序的入口点。调用 runApp 函数并将其传递给 MyApp 类的对象。 runApp 函数的目的是将给定的小部件附加到屏幕上。
• 第 5-17行 - Widget 用于在 Flutter 框架中创建 UI。 StatelessWidget 是一个小部件，它不维护小部件的任何状态。 MyApp 扩展了 StatelessWidget 并覆盖了它的 build 方法。 build 方法的目的是创建应用程序 UI 的一部分。在这里，build 方法使用 MaterialApp，一个用于创建应用程序的根级 UI 的小部件。它具有三个属性 - 标题、主题和主页。
  • title 是应用程序的标题
  • theme 是小部件的主题。在这里，我们使用 ThemeData 类及其属性 primarySwatch 将蓝色设置为应用程序的整体颜色。
  • home 是应用程序的内部 UI，我们设置了另一个小部件 MyHomePage
• 第 19 - 38 行 - MyHomePage 与 MyApp 相同，只是它返回 Scaffold Widget。 Scaffold 是 MaterialApp 小部件旁边的顶级小部件，用于创建符合 UI 的材料设计。它有两个重要的属性，appBar 显示应用程序的标题和 body 显示应用程序的实际内容。 AppBar 是另一个用于呈现应用程序标题的小部件，我们在 appBar 属性中使用了它。在 body 属性中，我们使用了 Center 小部件，它将子小部件居中。文本是显示文本的最后也是最里面的小部件，它显示在屏幕的中心。

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

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