【Flutter】微信项目实战【01】基本框架搭建

最新推荐文章于 2025-07-11 22:35:23 发布

原创最新推荐文章于 2025-07-11 22:35:23 发布 · 2.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #微信 #android #dart #微信项目

Flutter 专栏收录该内容

37 篇文章

订阅专栏

本文带你通过实战构建一个微信风格应用，从创建Flutter项目开始，深入解析BottomNavigationBar组件的使用，包括设置、属性及页面切换。跟随步骤，掌握核心组件的实践应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 写在前面

在上篇文章中介绍了Flutter中的Button组件，学了这么多基础组件了，该是实战验证一下学习成果了，那么今天就来个实战项目，搭建一下微信的框架吧！

Flutter

[基础组件合集]

【Flutter】基础组件【01】Text

【Flutter】基础组件【02】Container

【Flutter】基础组件【03】Scaffold

【Flutter】基础组件【04】Row/Column

【Flutter】基础组件【05】Icon

【Flutter】基础组件【06】Image

【Flutter】基础组件【07】Appbar

【Flutter】基础组件【08】BottomNavigationBar

【Flutter】基础组件【09】Button

2. 新建项目

新建项目

选择File -> New -> New Flutter Project新建一个 flutter 项目

新建项目

选择 Flutter App

新建项目

设置项目名称为flutter_wechat

3. main.dart

3.1 main函数

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      debugShowCheckedModeBanner: true,//去掉 debug 标记
      theme:ThemeData(
        primarySwatch: Colors.blue,//导航栏颜色
      ),
      home: RootPage(),
    );
  }
}

home: 相当于 OC 中的 UITabBarController，这是 APP 的骨架
debugShowCheckedModeBanner：去掉 debug的标记，设置 false就不展示
theme:主题的设置

3.2 创建根视图

根视图RootPage设置，

先来创建一个文件root_page.dart，设置 tabbar

新建 dart 文件

新建 dart 文件

3.3 设置BottomNavigationBar

bottomNavigationBar

在Scaffold组件里面有个属性bottomNavigationBar，这个就是相当于我们 OC 中的 tabbar，它是继承自StatefulWidget。通过BottomNavigationBar的items来设置 4 个页面，用BottomNavigationBarItem来构造。

bottomNavigationBar: BottomNavigationBar(
        currentIndex: 0,
        fixedColor: Colors.green,
        type: BottomNavigationBarType.fixed,
        items: const [
          BottomNavigationBarItem(
              icon: Icon(Icons.message),
              label: '微信'),
          BottomNavigationBarItem(
              icon: Icon(Icons.bookmark),
              label: '通讯录'),
          BottomNavigationBarItem(
              icon: Icon(Icons.history),
              label: '发现'),
          BottomNavigationBarItem(
              icon: Icon(Icons.person_outline),
              label: '我'),
        ],
      )

3.4 BottomNavigationBar

BottomNavigationBar的一些属性介绍：

type：BottomNavigationBarItem的模式，BottomNavigationBarType是枚举，有fixed和shifting两种模式设置。
currentIndex:当前选中的是哪个 item，就是底部 4 个 item的切换选中的值，可以通过点击的方法切换改值
fixedColor：填充的颜色，item 的填充颜色

bottomNavigationBar设置

3.5 创建微信页面

微信界面

一个 BottomNavigationBarItem 对应的页面就相当于 OC 中的 UIViewController。

class ChatPage extends StatefulWidget {
  const ChatPage({Key? key}) : super(key: key);
  @override
  _ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        title: const Text(
          '微信页面',
          style: TextStyle(color: Colors.black),
        ),
      ),
      body:const Center(
        child: Text('微信页面'),
      ),
    );
  }
}

BottomNavigationBarItem的切换

BottomNavigationBarItem的切换需要实现onTap 点击方法来进行切换。

//BottomNavigationBar 的点击事件
        onTap: (index) {
          print("index = $index");
          setState(() {
            _currentIndex = index;
          });
        },