Flutter中修改Quill控制器对话框颜色及FlutterQuillEmbeds.buttons对话框主题

1. 调整Quill控制器关联对话框颜色 #

Quill内置的插入链接、图片等对话框，可通过两种方式修改样式：

• 方式一：用Theme组件全局覆盖
  在QuillEditor外层嵌套Theme，重写对话框、输入框、按钮的配色：

Theme(
  data: Theme.of(context).copyWith(
    dialogTheme: DialogTheme(
      backgroundColor: Colors.blue[50], // 对话框背景色
      titleTextStyle: TextStyle(color: Colors.black87), // 标题文本色
      contentTextStyle: TextStyle(color: Colors.grey[700]), // 内容文本色
    ),
    inputDecorationTheme: InputDecorationTheme(
      filled: true,
      fillColor: Colors.white, // 输入框背景
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.blueAccent), // 输入框聚焦边框
      ),
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blueAccent, // 按钮背景
        foregroundColor: Colors.white, // 按钮文本色
      ),
    ),
  ),
  child: QuillEditor(
    controller: _quillController,
    readOnly: false,
    focusNode: _focusNode,
    autoFocus: false,
    expands: false,
    padding: EdgeInsets.zero,
    scrollController: ScrollController(),
    scrollable: true,
    toolbarConfiguration: QuillToolbarConfiguration(),
  ),
)

• 方式二：通过QuillThemeData专属配置
  直接给QuillEditor指定theme参数，设置Quill对话框专属样式：

QuillEditor(
  controller: _quillController,
  // 其他必填参数...
  theme: QuillThemeData(
    dialogBackgroundColor: Colors.blue[50],
    dialogTextColor: Colors.black87,
    dialogTitleTextStyle: TextStyle(color: Colors.black87, fontSize: 16),
    // 可根据需求添加更多Quill对话框样式属性
  ),
)

2. 修改FlutterQuillEmbeds.buttons的对话框主题 #

对于FlutterQuillEmbeds提供的文件、视频插入等按钮，可选择全局Theme覆盖或自定义弹窗：

• 全局覆盖（简单快速）
  直接复用上面的Theme嵌套方案，外层Theme会自动作用于Embed按钮触发的对话框。

• 自定义弹窗（精细化控制）
  如果需要完全匹配参考图的样式，可重写Embed按钮的点击事件，自定义对话框：

QuillToolbar(
  controller: _quillController,
  embedButtons: FlutterQuillEmbeds.buttons(
    fileButtonOptions: FileButtonOptions(
      onPressed: (controller, toolbarIcon, toolbarId) {
        showDialog(
          context: context,
          builder: (context) {
            return Theme(
              data: Theme.of(context).copyWith(
                dialogTheme: DialogTheme(backgroundColor: Colors.blue[50]),
              ),
              child: AlertDialog(
                title: Text('插入文件'),
                content: TextField(
                  decoration: InputDecoration(
                    hintText: '输入文件链接',
                    fillColor: Colors.white,
                    filled: true,
                  ),
                ),
                actions: [
                  TextButton(
                    onPressed: () => Navigator.pop(context),
                    child: Text('取消', style: TextStyle(color: Colors.grey)),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      // 自行实现文件插入逻辑
                      Navigator.pop(context);
                    },
                    child: Text('确定'),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.blueAccent,
                    ),
                  ),
                ],
              ),
            );
          },
        );
      },
    ),
    // 同理可配置videoButtonOptions等其他Embed按钮
  ),
)

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