Flutter APP入口及主页

封面图 • 2026-01-17 • Flutter

在 Flutter 中，**APP 的入口**和**主页（首页）**是通过 `main.dart` 文件中的 `main()` 函数和 `MaterialApp` 或 `CupertinoApp` 来定义的。下面是一个标准的 Flutter APP 入口和主页结构示例：

---

## ✅ 1. Flutter App 的入口（main.dart）

Flutter 应用的入口点是 `main.dart` 文件中的 `main()` 函数，通常如下所示：

```dart
import 'package:flutter/material.dart';
import 'home_page.dart'; // 导入主页

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(), // 设置主页
    );
  }
}
```

> ✅ `MaterialApp` 是 Flutter 中用于构建 Material Design 风格应用的基础组件。

---

## ✅ 2. 主页（HomePage）示例

你可以在 `home_page.dart` 文件中创建一个简单的主页：

```dart
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Home Page'),
      ),
      body: Center(
        child: Text('Welcome to the Home Page!'),
      ),
    );
  }
}
```

---

## 📁 文件结构示例

```
lib/
├── main.dart
└── home_page.dart
```

---

## 🔄 更复杂的导航（可选）

如果你的应用有多个页面，可以使用 `Navigator` 或 `BottomNavigationBar` 实现多页面切换。

例如，使用 `BottomNavigationBar`：

```dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BottomNavigation(),
    );
  }
}

class BottomNavigation extends StatefulWidget {
  @override
  _BottomNavigationState createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
  int _currentIndex = 0;

final List<Widget> _pages = [
    HomePage(),
    SecondPage(),
  ];

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
    );
  }
}
```

---

## 🧾 总结

| 名称       | 说明                         |
|------------|------------------------------|
| `main.dart` | Flutter 应用的入口文件       |
| `MyApp`     | 使用 `MaterialApp` 包装应用 |
| `home`      | 指定应用的首页               |
| `Scaffold`  | 提供基本的 Material 设计布局 |

---

如果你有更具体的场景（比如使用 `CupertinoApp`、`Navigator`、`PageRoute` 等），我可以进一步帮你扩展。需要吗？