Flutter开发之通讯录页面

👩‍💻 Flutter从入门到精通 | ☎️ 通讯录页面深入剖析

---

前言

上篇介绍了Flutter开发实战之发现页面，今天我们继续学习Flutter开发实战之通讯录页面。

实现步骤

1. 修改_currentIndex

打开main.dart文件，将_currentIndex改为1，这样在点击通讯录导航栏时，才会跳转到通讯录页面。

2. 创建通讯录页面

在lib文件夹下新建一个名为"contacts_page.dart"的文件，并输入以下代码：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('通讯录'),
      ),
      body: Center(
        child: Text('通讯录页面'),
      ),
    );
  }
}

3. 添加路由

在main.dart文件中，添加以下代码：

routes: {
    '/contacts': (context) => ContactsPage(),
  },

4. 运行程序

运行程序，点击通讯录导航栏，即可跳转到通讯录页面。

结语

以上就是Flutter开发实战之通讯录页面的实现步骤。希望对你有帮助。

---

💡 拓展阅读

• Flutter开发实战之发现页面
• Flutter开发实战之我的页面
• Flutter入门教程

---

🎨 更多精彩，尽在 Flutter 开发专栏

---

👨‍💻 作者：李四

---

欢迎点赞、评论、转发，与我一起探索Flutter开发的世界

---

敬请期待下一期 Flutter 开发实战之设置页面
**Flutter 开发实战系列文章，未完待续...**

---

**了解更多 Flutter 开发技巧，请关注我的公众号：Flutter 开发指南**
**转载请注明出处，尊重原创，共同进步。**