目录

本篇重点掌握

一、Flutter 项目创建

二、Flutter 项目核心目录说明

三、编写基础代码

四、核心函数和组件

runApp()：

StatelessWidget（无状态组件）

MaterialApp()：重点

Scaffold组件

AppBar

body

bottomNavigationBar

floatingActionButton

五、Flutter 应用执行流程

结尾

---

        这篇文章的核心目标：创建 Flutter 项目，搭建最基础的应用框架，理解 Flutter 应用的启动流程，实现 “带标题栏的空白页面” 效果。

本篇重点掌握

1. Flutter 项目创建流程
2. 应用入口文件main.dart的核心结构
3. runApp()函数的核心作用
4. Material Design 核心基础组件：MaterialApp、Scaffold

一、Flutter 项目创建

        在你要存放Flutter项目的文件夹中通过cmd进入命令提示符，执行以下命令创建一个项目

flutter create --platforms ohos projectName

• ohos是鸿蒙平台，不使用鸿蒙的可以换成web、android等等
• projectName替换成你自己的项目名

二、Flutter 项目核心目录说明

        创建完成后，项目根目录下的核心文件夹 / 文件：

• lib/：核心代码目录，所有 Dart 代码（页面、组件、模型）都放在这里，入口文件main.dart在此目录
• pubspec.yaml：项目配置文件，管理依赖包、资源（图片 / 字体）、Flutter 版本等
• ohos/、android/、ios/：相关平台的配置文件
• test/：单元测试目录，用于测试代码逻辑

注：

        其他的都不用管，只需要在意lib/文件夹和pubspec.yaml文件即可。

        重点是lib/文件夹，我们写所有的代码都是放在lib/文件夹中

三、编写基础代码

        main.dart是Flutter 应用的唯一入口文件，所有应用的启动逻辑都从这里开始，先删除原有默认代码，替换为以下基础代码：

// 导入Flutter的Material Design组件库，包含所有基础UI组件
import 'package:flutter/material.dart';

// 1. Dart程序入口函数：void表示无返回值，main()是固定的入口函数名
void main() {
  runApp(const MyToDoApp());
}

// 3. 自定义类继承StatelessWidget（无状态组件）
class MyToDoApp extends StatelessWidget {
  // 构造函数
  const MyToDoApp({super.key});

  // 4. 重写build方法：所有Widget都必须实现build方法，用于构建UI界面
  @override
  Widget build(BuildContext context) {
    // 5. 根容器组件：MaterialApp
    return MaterialApp(
      // 应用标题：会显示在设备的应用切换界面、任务栏等位置
      title: '待办事项',
      // 关闭右上角的"Debug"标签
      debugShowCheckedModeBanner: false,
      // 应用主题配置：ThemeData是主题数据模型，primarySwatch设置主色调
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主色调为蓝色
      ),
      // 应用主页：设置为Scaffold，页面基础布局组件
      home: Scaffold(
        // 页面顶部导航栏：AppBar组件
        appBar: AppBar(
          title: Text('待办事项'), // 导航栏标题
          centerTitle: true, // 标题居中
        ),
        // 页面主体内容区域
        body: Center(),
      ),
    );
  }
}

        打开对应平台模拟器，运行这段代码。

四、核心函数和组件

        Flutter中一切皆是Widget，Widget 是 Flutter 中构建 UI 的 基本单元 。几乎所有你看到的、交互的 UI 元素都是 Widget：

runApp()：

• 作用：Flutter 的核心渲染入口，将传入的 Widget 作为根 Widget渲染到设备屏幕上
• 特点：传入的 Widget 会占据整个屏幕，无论设备尺寸 / 方向，是连接 Dart 代码和底层渲染引擎的桥梁
• 流程：如果参数是Widget类型，会直接执行，如果是类，会去执行重写的build方法，找到build方法返回的Widget类型对象执行

 //Flutter核心渲染函数：将根组件渲染到手机屏幕上
 runApp(const MyToDoApp());  //参数是类对象

//也可以直接传Widget类型
// runApp(MaterialApp());

StatelessWidget（无状态组件）

无状态组件：UI内容固定，不会随用户操作/数据变化而改变
class MyToDoApp extends StatelessWidget 

• 定义：继承自 Widget，表示UI 状态不可变的组件，一旦创建，UI 内容就固定不变
• 核心方法：必须重写  build(BuildContext context) 方法，用于构建 UI
• 适用场景：根容器、静态标题、固定按钮等无需随数据变化的 UI

build方法：

  // 重写build方法：所有Widget都必须实现build方法，用于构建UI界面
  // BuildContext：上下文对象，保存了组件在Widget树中的位置信息，用于路由、主题获取等
  @override
  Widget build(BuildContext context) {

    //放各种页面信息
    return MaterialApp(); // MaterialApp提供应用的基础配置,Flutter项目里面必不可少

  }

注：

        自定义的类继承StatelessWidget类，运行之后，UI 内容就固定不变

        之后会学习有状态组件，UI 内容可以随状态更新

MaterialApp()：重点

• 作用：Material Design 风格应用的顶层容器，提供应用的基础配置（主题、路由、标题、主页等），是Flutter必不可少的。
• 核心属性：
  • title：应用全局标题，非页面标题
  • theme：应用主题，统一管理所有组件的颜色、字体、样式
  • home：应用默认主页，必须是一个 Widget
  • debugShowCheckedModeBanner：是否显示调试横幅，建议关闭

Scaffold组件

• 作用：Material Design 标准页面布局组件，快速构建符合规范的页面结构，无需手动处理布局嵌套
• 核心属性：
  • appBar：页面顶部导航栏，传入AppBar组件
  • body：页面主体内容区域，传入任意 Widget，是页面的核心展示区域
  • bottomNavigationBar: 页面底部导航栏，传入任意 Widget
  • floatingActionButton：悬浮按钮，通常放在页面右下角
  • backgroundColor：页面背景色

        优势：封装了 Material Design 的页面规范，避免开发者手动写复杂的布局嵌套

AppBar

• 作用：页面顶部导航栏组件
• 核心属性：
  • title：导航栏标题，通常传入Text组件
  • centerTitle：标题是否居中，默认false（左对齐）
  • backgroundColor：导航栏背景色，默认继承主题的主色调
  • actions：导航栏右侧操作按钮，传入 Widget 数组（如搜索、设置按钮）

可以修改一下之前的代码

appBar: AppBar(
          title: Text('待办事项'), // 导航栏标题
          centerTitle: true, // 标题居中显示
          backgroundColor: Colors.blue, // 导航栏背景色设置为蓝色
          actions: [
            // 搜索按钮
            IconButton(
              onPressed: () {
                print('点击了搜索按钮');
              },
              icon: Icon(Icons.search),
            ),
            // 设置按钮
            IconButton(
              onPressed: () {
                print('点击了设置按钮');
              },
              icon: Icon(Icons.settings),
            ),
          ], // 导航栏右侧操作按钮
        ),

body

• 作用：页面主体内容区域
• 常用组件：
  • SingleChildScrollView：可滚动容器（适配内容超出屏幕的场景）
  • GridView：网格布局（如相册、商品网格展示）
  • Card：卡片式布局（包裹内容实现阴影、圆角效果）
  • Container：基础容器（设置宽高、边距、背景、装饰等）
  • Column/Row：线性布局（垂直 / 水平排列多个子组件）
  • ListView：展示长列表（如待办事项列表、商品列表）

这些组件之后用到再讲，先添加一个Center组件，里面嵌套一个Text组件

body: Center(
          child: Text('待办事项页面'),
      ),

bottomNavigationBar

• 作用：底部导航栏属性，用于实现移动端页面底部切换导航
• 核心组件：
  • BottomNavigationBar
  • 也可以使用其他任意组件

bottomNavigationBar: BottomAppBar(
          child: Text('待办事项'), // 底部导航栏标题
        ),

floatingActionButton

• 作用：悬浮按钮，一般出现在body的右下角
• 核心组件：
  • FloatingActionButton（圆形悬浮按钮，Material Design 标准样式）
  • 备选组件：TextButton/IconButton（自定义样式的悬浮按钮）
  • 常用配置：搭配 icon（Icon 组件）、onPressed（点击事件）属性使用

floatingActionButton: FloatingActionButton(
          onPressed: () {
            print('点击了悬浮按钮');
          },
          child: Icon(Icons.add),
          backgroundColor: Colors.blue,
        ),

五、Flutter 应用执行流程

        第一步：执行main()函数 

        第二步：调用runApp() 

        第三步：渲染根组件MyToDoApp，执行build方法

        第四步：构建MaterialApp 

        第五步：渲染主页Scaffold 

        第六步：显示AppBar和空白Body

注：Flutter 应用的一切都是 Widget，从根组件到最小的文字 / 按钮，都是 Widget 的嵌套组合，build 方法是构建所有 UI 的核心。

结尾

        至此，你已经完成了 Flutter 待办应用的第一步 —— 从 0 到 1 搭建起最核心的基础框架。

        亲手创建了项目、认识了核心目录结构，掌握了main.dart的启动逻辑，还学会了MaterialApp、Scaffold这些基础组件的使用，理解 “一切皆 Widget” 的核心原则。

        不要小看这个 “带标题栏的空白页面”，它就像一座房子的地基：MaterialApp是整栋房子的框架，Scaffold是单个房间的布局，AppBar是房间的门窗，而接下来要做的，就是在body这个空白的 “房间” 里，填充待办事项的列表、添加按钮、编辑功能等 “家具”。

        欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net