一、示例 1：经典计数器（Stateful 状态更新）

新建 Flutter 项目，替换 lib/main.dart 全部代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 入门',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const CounterPage(),
    );
  }
}

// 动态页面：有状态组件
class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  // 计数变量
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("计数器")),
      body: Center(
        child: Text(
          "当前数值：$count",
          style: const TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          // 减号按钮
          FloatingActionButton(
            onPressed: () {
              // 更新状态
              setState(() {
                count--;
              });
            },
            child: const Icon(Icons.remove),
          ),
          const SizedBox(width: 10),
          // 加号按钮
          FloatingActionButton(
            onPressed: () {
              setState(() {
                count++;
              });
            },
            child: const Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}

运行方式：终端执行 flutter run

功能：点击加减按钮，数字实时变化，理解 StatefulWidget + setState。

二、示例 2：列表页面（ListView 基础布局）

替换 lib/main.dart，练习列表、循环渲染、基础布局：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "列表示例",
      theme: ThemeData(primarySwatch: Colors.green),
      home: const ListPage(),
    );
  }
}

class ListPage extends StatelessWidget {
  const ListPage({super.key});

  // 模拟数组数据
  final List<String> dataList = [
    "Flutter 入门学习",
    "Dart 语法",
    "页面布局",
    "网络请求",
    "多端打包"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("学习清单")),
      // 滚动列表 ListView
      body: ListView.builder(
        itemCount: dataList.length,
        itemBuilder: (context, index) {
          return ListTile(
            leading: const Icon(Icons.label),
            title: Text(dataList[index]),
            trailing: const Icon(Icons.arrow_forward_ios, size: 16),
          );
        },
      ),
    );
  }
}

知识点：

ListView.builder 高效渲染列表

ListTile 系统自带列表条目组件

数组循环取值

三、快速切换多端运行命令（直接复制使用）

在项目根目录终端执行：

# 安卓真机/模拟器

flutter run

# 网页端（需提前开启web支持）

flutter run -d chrome

# Windows 桌面端

flutter run -d windows

四、新手练习小任务（巩固知识点）

1. 在计数器页面，加一个重置按钮，点击后 count = 0

2. 给列表页每一行增加不同颜色

3. 尝试用 Row / Column 自定义布局