在 android studio 中创建简单的应用程序——迹忆客-ag捕鱼王app官网

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

第 1 步 - 打开 android studio

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

第 3 步 - 选择 flutter 应用程序。 为此，选择 flutter application 并单击 next。

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

• 项目名称：hello_app
• flutter sdk 路径：
• 项目位置：
• 描述：基于 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 的小部件。它具有三个属性 - 标题、主题和ag捕鱼王app官网主页。
  • 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 步 - 最后，应用程序的输出如下