求助：如何将Flutter聊天气泡内的文字颜色改为白色

问题说明 #

使用Flutter结合dialog_flowtter开发聊天功能时，输入框内输入消息时文字显示为白色，但发送后用户消息以及收到的回复文字都变成了黑色，希望将这些聊天气泡内的文字改为白色。尝试在BoxDecoration中添加Color:Colors.white但无法生效。

解决方案 #

你之前在BoxDecoration里设置的color是气泡的背景色，并不是文字的颜色。要修改聊天气泡里的文字颜色，需要直接给显示文字的Text组件设置style属性。

修改MessagesScreen中的Text组件，添加style: TextStyle(color: Colors.white)即可：

完整修改后的_MessagesScreenState代码 #

class _MessagesScreenState extends State<MessagesScreen> {
  @override
  Widget build(BuildContext context) {

    var w = MediaQuery.of(context).size.width;
    return ListView.separated(
        itemBuilder: (context, index) {
          return Container(
            margin: EdgeInsets.all(10),
            child: Row(
              mainAxisAlignment: widget.messages[index]['isUserMessage']
                  ? MainAxisAlignment.end
                  : MainAxisAlignment.start,
              children: [
                Container(
                    padding: EdgeInsets.symmetric(vertical: 14, horizontal: 14),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(20),
                          topRight: Radius.circular(20),
                          bottomRight: Radius.circular(
                              widget.messages[index]['isUserMessage'] ? 0 : 20),
                          topLeft: Radius.circular(
                              widget.messages[index]['isUserMessage'] ? 20 : 0),
                        ),
                        color: widget.messages[index]['isUserMessage']
                            ? Color(0XFF087830)
                            : Color(0XFF087830).withOpacity(0.8)),
                    constraints: BoxConstraints(maxWidth: w * 2 / 3),
                    child: Text(
                      widget.messages[index]['message'].text.text[0],
                      style: TextStyle(color: Colors.white), // 设置文字颜色为白色
                    )),
              ],
            ),
          );
        },
        separatorBuilder: (_, i) => Padding(padding: EdgeInsets.only(top: 10)),
        itemCount: widget.messages.length);
  }
}

修改后，聊天气泡内的文字就会显示为白色，和输入框的文字颜色保持一致。

内容的提问来源于stack exchange，提问作者therese