Flutter快学快用24讲--15 红点组件：如何将红点设计做成 Flutter 组件

上一课时我们完善了首页推荐功能，本课时将完善个人页面。个人页面涉及红点组件的知识点，因此本课时在完善个人页面的同时，会着重介绍下该功能的实现。

实现效果

我们先来看下本课时要完成的一个界面效果，如图 1 动画所示。

图 1 本课时目标效果

首先在最底部导航栏增加了消息未读数提示，当有新的未读消息时候，会有红点提示。个人界面展示了个人信息以及个人相关的操作栏（我的好友、我的消息和系统设置）。

接下来我们来看下实现该效果需要做哪些前期准备工作。

前期准备

基于图 1 的效果，我们首先要实现个人页面。个人页面是一个新页面，对于新页面我们按照第 7 课时的知识去设计页面。由于新增了红点功能，首先在 App 启动时 ，需要一个新的接口拉取服务器未读消息数，然后新增 API 来拉取该数据。其次这个数据状态，需要在多个组件中共享，因此要新增 Model 来管理该状态 。

组件设计

根据图 2 的界面效果，我们将页面拆分图 3 组件树。

图 2 个人页面效果

图 3 个人页面组件树设计

图 3 组件树中， 左侧为最上面的头像和昵称，右侧为功能列表 。由于是一个有限的列表，因此可以使用 ListView 来封装组件。具体代码编写部分和之前所介绍的没有太大区别，详细代码可 前往 github 参考。

个人页面开发完成后，我们再来看下红点功能所涉及的 API 和 Model 功能部分。由于用户信息和红点未读消息，都需要状态共享，因此需要创建两个 Model 类 。 这两个 Model 类的代码逻辑基本一致，下面只介绍与红点未读消息有关的部分。

API

在 App 启动时就需要拉取未读消息数，因此需要一个接口来获取未读消息内容 。在 api/user_info 目录下创建 message.dart 来管理消息接口 ，实现该 ApiUserInfoMessage 类，代码如下：

/// 获取用户消息相关 
class ApiUserInfoMessage { 
  /// 获取自己的个人信息 
  static int getUnReadMessageNum() { 
    return 18; 
  } 
}

上面就是这个 API 的功能，里面包含一个 getUnReadMessageNum 方法，这里模拟返回一个假数据 18 个未读消息。

Model

由于未读消息会被应用在底部导航栏和个人页面两个组件页面，因此需要使用 Provider 来做状态管理，在 model 下创建 new_message_model.dart ，并实现下面代码：

import 'package:flutter/material.dart'; 
/// name状态管理模块 
class NewMessageModel with ChangeNotifier { 
  /// 系统未读新消息数 
  int newMessageNum; 
  /// 构造函数 
  NewMessageModel({this.