如何在Dart/Flutter中实现用户自定义首页图片的持久化存储？

核心思路 #

通过持久化存储用户选择的图片本地路径，每次启动应用时优先读取该路径：存在则显示用户选择的图片，不存在则展示默认图。

具体实现步骤 #

1. 添加依赖 #

在pubspec.yaml中引入所需插件：

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^1.0.4  # 用于从相册选择图片
  shared_preferences: ^2.2.2  # 用于持久化存储图片路径

执行flutter pub get完成依赖安装。

2. 实现图片选择与路径保存 #

编写方法调用图片选择器，并将选中图片的路径存入本地存储：

import 'package:image_picker/image_picker.dart';
import 'package:shared_preferences/shared_preferences.dart';

// 选择图片并保存路径到本地
Future<void> pickAndSaveImage() async {
  final picker = ImagePicker();
  final XFile? pickedFile = await picker.pickImage(source: ImageSource.gallery);
  
  if (pickedFile != null) {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('home_custom_image', pickedFile.path);
  }
}

3. 读取已保存的图片路径 #

在页面初始化时读取存储的路径：

Future<String?> getSavedImagePath() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getString('home_custom_image');
}

4. 在首页动态显示图片 #

使用FutureBuilder处理异步读取逻辑，根据路径是否存在切换显示内容：

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

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: Center(
        child: FutureBuilder<String?>(
          future: getSavedImagePath(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              final imagePath = snapshot.data;
              return imagePath != null
                  ? Image.file(File(imagePath), fit: BoxFit.cover)
                  : Image.asset('assets/default_home.png', fit: BoxFit.cover);
            }
            // 加载过程中显示占位符
            return const CircularProgressIndicator();
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: pickAndSaveImage,
        child: const Icon(Icons.photo_library),
      ),
    );
  }
}

5. 基础配置 #

• 确保默认图片已添加到pubspec.yaml的资源列表：

  assets:
    - assets/default_home.png
  

• 配置平台权限：
  • Android：在AndroidManifest.xml中添加<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>（Android 13+）
  • iOS：在Info.plist中添加NSPhotoLibraryUsageDescription字段说明权限用途

优化方案（可选） #

若担心用户删除原图片导致显示异常，可将选中图片复制到应用私有目录后再保存路径：

import 'package:path/path.dart' as path;
import 'package:path_provider/path_provider.dart';
import 'dart:io';

Future<void> pickAndSaveImage() async {
  final picker = ImagePicker();
  final XFile? pickedFile = await picker.pickImage(source: ImageSource.gallery);
  
  if (pickedFile != null) {
    // 获取应用私有文档目录
    final appDir = await getApplicationDocumentsDirectory();
    final fileName = path.basename(pickedFile.path);
    // 复制图片到私有目录
    final copiedFile = await File(pickedFile.path).copy('${appDir.path}/$fileName');
    
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('home_custom_image', copiedFile.path);
  }
}

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