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

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

第 1 步- 打开 Android Studio

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

新的颤振项目

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

颤振应用下一步

步骤 4 - 按如下方式配置应用程序，然后单击“下一步”。

  • 项目名称：hello_app

  • Flutter SDK 路径：<path_to_flutter_sdk>

  • 项目位置：<项目文件夹路径>

  • 描述：基于 Flutter 的 hello world 应用程序

项目名

步骤 5 - 配置项目。

将公司域名设置为flutterapp.tutorialspoint.com并单击Finish。

步骤 6 - 输入公司域名。

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

应用程序的结构及其目的如下 -

结构应用

这里解释了应用程序结构的各个组件 -

  • android - 自动生成源代码来创建android应用程序

  • ios - 自动生成源代码来创建 ios 应用程序

  • lib - 包含使用 flutter 框架编写的 Dart 代码的主文件夹

  • ib/main.dart - Flutter 应用程序的入口点

  • test - 包含用于测试 flutter 应用程序的 Dart 代码的文件夹

  • test/widget_test.dart - 示例代码

  • .gitignore - Git 版本控制文件

  • .metadata - 由 flutter 工具自动生成

  • .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 包，材质。该材质是一个 flutter 包，用于根据 Android 指定的材质设计指南创建用户界面。

  • 第 3 行- 这是 Flutter 应用程序的入口点。调用runApp函数并向其传递MyApp类的对象。runApp函数的目的是将给定的小部件附加到屏幕上。

  • 第 5-17 行- Widget 用于在 flutter 框架中创建 UI。StatelessWidget是一个widget，它不维护widget的任何状态。MyApp扩展了StatelessWidget并重写了它的构建方法。build方法的目的 是创建应用程序 UI 的一部分。在这里，构建方法使用MaterialApp这个小部件来创建应用程序的根级 UI。它具有三个属性 - title 、 theme和home。

    • 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 - 最后，应用程序的输出如下 -

主页