Flutter, 你的第一个应用程序

Flutter 是 Google 推出的一款跨平台的应用开发框架，可以用一份代码同时构建 iOS 和 Android 应用，并且拥有优秀的性能和用户体验。本文将会介绍如何使用 Flutter 构建你的第一个应用程序。

安装 Flutter

在开始之前，需要先安装 Flutter。具体可以参考 Flutter 官方文档 安装指南，根据不同的操作系统选择对应的安装方法。

安装完成后，可以在命令行中执行 flutter doctor 来检查 Flutter 是否正常安装。

$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.2, on macOS 11.4 20F71 darwin-x64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.5.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] VS Code (version 1.57.0)
[✓] Connected device (2 available)

• No issues found!

如果打印出来的信息中没有出现任何错误，说明 Flutter 已经成功安装。

创建你的第一个应用程序

创建 Flutter 应用程序有多种方式，其中比较常用的是使用命令行工具 flutter create。在命令行中执行以下命令来创建一个新的 Flutter 应用程序：

$ flutter create myapp

这个命令会在当前目录下创建一个名为 myapp 的新应用程序。

创建成功后，进入新创建的应用程序目录，并且启动应用程序：

$ cd myapp
$ flutter run

当命令执行完成后，终端会输出应用程序运行的信息，并且自动打开一个模拟器或者连接一个真实的设备来运行应用程序。

如果一切顺利，现在你已经看到了一个非常简单的 Flutter 应用程序，上面有一个中央居中的蓝色圆形。

修改你的应用程序

为了修改应用程序，我们需要打开应用程序项目的主文件 lib/main.dart，并且对代码进行编辑。

在默认生成的模板中，我们可以看到下面这段代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo Home Page'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

这是应用程序的主入口文件，其中 MaterialApp 和 Scaffold 都是 Flutter 框架提供的基础组件，可以用来构建应用程序的界面。在这个模板中，我们可以看到一个居中对齐的文本组件 Text('Hello, World!')。

现在我们要修改应用程序，让它显示一张图片，可以使用 Image.asset 组件来加载本地图片：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo Home Page'),
        ),
        body: Center(
          child: Image.asset('images/logo.png'),
        ),
      ),
    );
  }
}

在这个示例中，我们把 Image.asset 组件放置在了 Center 组件中，用来居中显示图片。images/logo.png 是我们新添加的一张图片，放在了应用程序的 images/ 目录下。

修改完成后，我们可以重新启动应用程序，来看看修改的效果：

$ flutter run

现在我们已经成功地创建并修改了一个 Flutter 应用程序，你可以在这个基础上进一步探索 Flutter 框架的强大功能，来构建出更加高效、优美和实用的应用程序。