嘿，我来帮你搞定这个问题！首先得明确一点：默认的image_picker插件其实是直接调用Android/iOS系统自带的相册界面，这些界面的样式是由系统控制的，插件本身并没有提供修改样式的API。所以要实现你想要的自定义设计，得换个思路——要么自己搭建相册UI，要么用支持自定义的第三方插件。下面给你两种可行的方案：

方案1：用photo_manager从零构建完全自定义的相册 #

这个插件能让你直接访问设备上的媒体资源，然后你可以用Flutter的原生Widget自由搭建界面，从布局到颜色、选中效果全由你掌控。

步骤： #

1. 添加依赖：在你的pubspec.yaml里加入这个包（记得用最新版本）：

dependencies:
  photo_manager: ^2.7.2
  flutter:
    sdk: flutter

2. 配置权限：
   • Android：在AndroidManifest.xml中添加相册访问权限：

     <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
     

   • iOS：在Info.plist中添加权限描述：

     <key>NSPhotoLibraryUsageDescription</key>
     <string>需要访问你的相册来选择图片</string>
     

3. 加载媒体资源并构建UI：
   下面是一个简单的示例代码，你可以根据自己的设计需求修改样式：

import 'package:flutter/material.dart';
import 'package:photo_manager/photo_manager.dart';

class CustomGalleryScreen extends StatefulWidget {
  const CustomGalleryScreen({super.key});

  @override
  State<CustomGalleryScreen> createState() => _CustomGalleryScreenState();
}

class _CustomGalleryScreenState extends State<CustomGalleryScreen> {
  List<AssetPathEntity> _albums = [];
  List<AssetEntity> _currentImages = [];
  int _selectedAlbumIndex = 0;
  List<AssetEntity> _selectedImages = [];

  @override
  void initState() {
    super.initState();
    _initGallery();
  }

  Future<void> _initGallery() async {
    // 请求相册权限
    final permission = await PhotoManager.requestPermissionExtend();
    if (!permission.isAuth) return;

    // 获取所有相册列表
    final albums = await PhotoManager.getAssetPathList(
      type: RequestType.image,
      hasAll: true,
    );
    setState(() => _albums = albums);

    // 加载默认相册的图片
    if (_albums.isNotEmpty) {
      _loadAlbumImages(_albums.first);
    }
  }

  Future<void> _loadAlbumImages(AssetPathEntity album) async {
    final images = await album.getAssetListPaged(page: 0, size: 60);
    setState(() => _currentImages = images);
  }

  void _toggleImageSelection(AssetEntity image) {
    setState(() {
      if (_selectedImages.contains(image)) {
        _selectedImages.remove(image);
      } else {
        _selectedImages.add(image);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('我的自定义相册'),
        backgroundColor: const Color(0xFF6A5ACD), // 自定义标题栏颜色
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, _selectedImages),
            child: Text(
              '完成(${_selectedImages.length})',
              style: const TextStyle(color: Colors.white, fontSize: 16),
            ),
          )
        ],
      ),
      body: Column(
        children: [
          // 相册切换栏
          SizedBox(
            height: 55,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              padding: const EdgeInsets.symmetric(horizontal: 12),
              itemCount: _albums.length,
              itemBuilder: (context, index) {
                final album = _albums[index];
                return Padding(
                  padding: const EdgeInsets.only(right: 8),
                  child: ChoiceChip(
                    label: Text(album.name),
                    selected: _selectedAlbumIndex == index,
                    selectedColor: const Color(0xFF6A5ACD),
                    labelStyle: TextStyle(
                      color: _selectedAlbumIndex == index ? Colors.white : Colors.black87,
                    ),
                    onSelected: (selected) {
                      setState(() => _selectedAlbumIndex = index);
                      _loadAlbumImages(album);
                    },
                  ),
                );
              },
            ),
          ),
          // 图片网格
          Expanded(
            child: GridView.builder(
              padding: const EdgeInsets.all(10),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
              ),
              itemCount: _currentImages.length,
              itemBuilder: (context, index) {
                final image = _currentImages[index];
                final isSelected = _selectedImages.contains(image);
                return GestureDetector(
                  onTap: () => _toggleImageSelection(image),
                  child: Stack(
                    fit: StackFit.expand,
                    children: [
                      // 图片缩略图
                      FutureBuilder(
                        future: image.thumbnailData,
                        builder: (context, snapshot) {
                          if (snapshot.hasData) {
                            return Image.memory(
                              snapshot.data!,
                              fit: BoxFit.cover,
                            );
                          }
                          return const Center(child: CircularProgressIndicator());
                        },
                      ),
                      // 自定义选中标记
                      if (isSelected)
                        Container(
                          color: Colors.black.withOpacity(0.3),
                          child: const Align(
                            alignment: Alignment.topRight,
                            child: Padding(
                              padding: EdgeInsets.all(4),
                              child: Icon(
                                Icons.check_circle,
                                color: Color(0xFF6A5ACD),
                                size: 24,
                              ),
                            ),
                          ),
                        ),
                    ],
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

你可以修改这个示例中的颜色、布局、选中标记样式，完全贴合你的设计需求。

方案2：用封装好的自定义相册插件快速实现 #

如果你不想从零写UI，可以用一些已经封装好的插件，比如wechat_assets_picker（仿微信相册样式，支持大量自定义配置），它能帮你快速实现带自定义样式的相册选择器。

步骤： #

1. 添加依赖：

dependencies:
  wechat_assets_picker: ^8.0.0

2. 调用并配置自定义属性：

import 'package:wechat_assets_picker/wechat_assets_picker.dart';

// 调用自定义相册
Future<void> pickImages() async {
  final selectedAssets = await AssetPicker.pickAssets(
    context,
    pickerConfig: AssetPickerConfig(
      maxAssets: 9,
      themeColor: const Color(0xFF6A5ACD), // 自定义主题色
      gridCount: 3,
      selectedBadgeColor: const Color(0xFF6A5ACD),
      backgroundColor: Colors.white,
      // 更多配置项可以参考插件文档调整
    ),
  );
  // 处理选中的图片
}

这个方案的优势是开发速度快，不需要自己处理权限和媒体加载逻辑，同时能满足大部分自定义需求。

总结一下：原生的image_picker没法修改系统相册的样式，所以你需要通过上述两种方案实现自定义相册。如果追求完全的样式控制，推荐用photo_manager自己搭建；如果想快速落地，选封装好的插件更高效。

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