本文已参与「新人创作礼」活动，一起开启掘金创作之路。

这是【Flutter 问题系列第 35 篇】，如果觉得有用的话，欢迎关注专栏。

在使用 Flutter 中的下拉弹框组件 PopupMenuButton 时，需要对子元素设置分割线 PopupMenuDivider ，但 PopupMenuDivider 组件只提供了修改高度的属性，不能改变分割线的颜色，这个就太不友好了。

既然源码中的组件无法修改颜色，那就把 PopupMenuDivider 中的源码复制过来，自己添加 color 属性就行了。

PopupMenuDivider 的源码很简单，其实就是返回了一个 Divider 组件，下面是自定义的 PopupMenuDivider

如下代码所示

import 'package:flutter/material.dart';

// ------------------------------------------------------
// author：Allen Su
// date  ：2021/7/19 12:30
// usage ：自定义 PopupMenuDivider 组件
// ------------------------------------------------------

const double _kMenuDividerHeight = 16.0;

class CustomPopupMenuDivider extends PopupMenuEntry<Null> {
  final double height;
  final Color color;

  const CustomPopupMenuDivider({
    this.height: _kMenuDividerHeight,
    this.color: Colors.white,
    Key key,
  }) : super(key: key);

  @override
  bool represents(void value) => false;

  @override
  _PopupMenuDividerState createState() => _PopupMenuDividerState();
}

class _PopupMenuDividerState extends State<CustomPopupMenuDivider> {
  @override
  Widget build(BuildContext context) {
    return Divider(height: widget.height, color: widget.color);
  }
}

我把平常自己总结的关于 Flutter 实用的轮子 写到了 GitHub 上，有兴趣的可以看下。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语

Google 的 Flutter 越来越火，截止 2021年7月19日 GitHub 标星已达 125K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到稀土掘金博客中，希望自己学习的同时，也可以帮助更多的人。