Flutter中如何修改Image Picker视频选择确认按钮的颜色

你当前用的是第三方包images_picker，不是Flutter官方的image_picker。不想从零实现选视频功能的话，有几种办法修改默认确认页的按钮颜色和文本：

1. 用包自带的配置参数（优先试试这个） #

查一下images_picker的版本文档，不少版本里pick方法支持直接传参数自定义确认UI：

• 看看有没有confirmText、confirmTextColor、confirmBtnColor这类参数，直接加在调用里就行：

List<Media>? res = await ImagesPicker.pick(
  count: 1,
  pickType: PickType.video,
  confirmText: "确认选择", // 改按钮文本
  confirmTextColor: Colors.white, // 改按钮文字颜色
  confirmBtnColor: Colors.deepPurple, // 改按钮背景色
);

2. 自己写确认页（包不支持配置时用） #

如果包本身没提供自定义参数，那就绕开默认的确认页，自己实现一个：

1. 调用pick时关闭默认预览（有些版本支持disablePreview参数），先拿到视频路径
2. 用Flutter自带的VideoPlayer做一个播放页，加上你想要样式的确认按钮
3. 用户点确认后再处理视频逻辑

示例代码片段：

// 第一步：获取视频路径，关闭默认确认页
List<Media>? res = await ImagesPicker.pick(
  count: 1,
  pickType: PickType.video,
  disablePreview: true,
);
if (res != null && res.isNotEmpty) {
  // 第二步：跳转到自己写的确认页
  bool? isConfirmed = await Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => CustomVideoConfirmPage(videoPath: res[0].path),
    ),
  );
  if (isConfirmed == true) {
    // 用户确认后的逻辑
    print("选中的视频路径：${res[0].path}");
  }
}

// 自定义的视频确认页组件
class CustomVideoConfirmPage extends StatefulWidget {
  final String videoPath;
  const CustomVideoConfirmPage({required this.videoPath, Key? key}) : super(key: key);

  @override
  State<CustomVideoConfirmPage> createState() => _CustomVideoConfirmPageState();
}

class _CustomVideoConfirmPageState extends State<CustomVideoConfirmPage> {
  late VideoPlayerController _videoController;

  @override
  void initState() {
    super.initState();
    _videoController = VideoPlayerController.file(File(widget.videoPath))
      ..initialize().then((_) => setState(() {}));
  }

  @override
  void dispose() {
    _videoController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, true),
            style: TextButton.styleFrom(
              backgroundColor: Colors.orange, // 自定义按钮背景
              foregroundColor: Colors.white, // 自定义按钮文字颜色
            ),
            child: const Text("确认"), // 自定义按钮文本
          )
        ],
      ),
      body: Center(
        child: _videoController.value.isInitialized
            ? AspectRatio(
                aspectRatio: _videoController.value.aspectRatio,
                child: VideoPlayer(_videoController),
              )
            : const CircularProgressIndicator(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _videoController.value.isPlaying
                ? _videoController.pause()
                : _videoController.play();
          });
        },
        child: Icon(
          _videoController.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

3. 修改包源码（迫不得已才用） #

如果上面两种都不行，你可以下载images_picker的源码，找到默认确认页的按钮代码，直接改颜色和文本，然后把修改后的包作为本地依赖导入项目。不过这种方式后续包更新时得手动同步修改，比较麻烦。

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