Flutter web 基础启动应用——随便

介绍

Flutter 是 Google 推出的一个全新的、面向移动和 Web 的开源 UI 框架，通过 Flutter 可以轻松构建高性能、高保真的移动应用和 Web 应用程序。同时，Flutter 还可以生成本地应用程序，也就是说，您可以使用 Flutter 编写移动和 Web 应用程序并进行本地部署。在 Flutter 中，我们可以使用 Dart 语言编写应用程序。

本文将为大家介绍使用 Flutter web 快速创建一个基础启动应用。

环境搭建

在使用 Flutter web 前，我们需要先安装 Flutter SDK 和 Dart SDK，您可以前往Flutter官方网站查看安装教程。

创建 Flutter web 应用

打开命令行工具，输入以下命令创建新的 Flutter web 应用：

flutter create my_app
cd my_app

运行以下命令启动 Flutter 应用程序:

flutter run -d chrome

现在应该打开了一个新的 Chrome 窗口，其中包含一个白色屏幕和一个 Flutter 标志。

修改应用

现在您已经成功启动 Flutter 应用程序，我们来尝试修改一些内容，让您了解 Flutter web 应用程序的结构和编写方式。

进入 my_app 目录，打开 lib/main.dart 文件，在控制台打印一些文本：

void main() {
  print('Hello, Flutter web!');
}

保存并执行以下命令：

flutter run -d chrome

现在您在控制台可以看到 'Hello, Flutter web!' 的打印信息。

接下来我们再修改一下代码，使用 MaterialApp 创建一个新的 Scaffold 。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello, Flutter web!'),
        ),
        body: Center(
          child: Text('Welcome to Flutter web!'),
        ),
      ),
    );
  }
}

保存并重新执行以下命令：

flutter run -d chrome

现在您将在新的 Chrome 窗口中看到一个具有标题和内容的应用程序。

总结

通过本篇文章的介绍，您可以得到一个初步的 Flutter web 应用程序。Flutter 的优势在于它是一个跨平台UI框架，能够让开发者同时进行移动和 Web 应用程序的编写。大家可以根据需求在此基础上进行更加丰富和复杂的应用程序开发。