Flutter：如何将用户选择的图片传递到应用内其他页面并展示

1. 完善事件模型类 #

在你的本地模型中添加一个存储图片路径的可选字段，用来保存选中图片的本地路径：

class Event {
  final String title;
  final DateTime date;
  final String? imagePath; // 允许事件没有图片

  Event({
    required this.title,
    required this.date,
    this.imagePath,
  });

  // 可选：添加copyWith方法方便更新字段
  Event copyWith({
    String? title,
    DateTime? date,
    String? imagePath,
  }) {
    return Event(
      title: title ?? this.title,
      date: date ?? this.date,
      imagePath: imagePath ?? this.imagePath,
    );
  }
}

2. 在「添加新事件页面」保存选中的图片路径 #

使用ImagePicker获取图片后，将路径赋值给事件实例：

final picker = ImagePicker();
Event? newEvent = Event(title: "", date: DateTime.now());

// 选择图片的方法
Future<void> pickImage() async {
  final pickedFile = await picker.pickImage(source: ImageSource.gallery);
  if (pickedFile != null) {
    setState(() {
      newEvent = newEvent?.copyWith(imagePath: pickedFile.path);
    });
  }
}

// 提交事件时传递对象到上一页
void submitEvent() {
  if (newEvent?.title.isNotEmpty == true) {
    Navigator.pop(context, newEvent);
  }
}

3. 在首页/列表页面接收并存储事件 #

用内存列表存储事件，从添加页面返回时接收新事件：

List<Event> events = [];

// 跳转至添加事件页面
void goToAddEvent() async {
  final result = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => AddEventPage()),
  );
  if (result is Event) {
    setState(() {
      events.add(result);
    });
  }
}

4. 在「即将到来事件卡片」展示图片 #

在卡片组件中根据imagePath判断是否显示图片，无图时显示占位：

class EventCard extends StatelessWidget {
  final Event event;

  const EventCard({super.key, required this.event});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: [
            // 图片区域
            event.imagePath != null
                ? Image.file(
                    File(event.imagePath!),
                    width: 80,
                    height: 80,
                    fit: BoxFit.cover,
                  )
                : Container(
                    width: 80,
                    height: 80,
                    color: Colors.grey[200],
                    child: const Icon(Icons.image_outlined),
                  ),
            const SizedBox(width: 12),
            // 事件信息
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(event.title, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
                  Text(event.date.toString().split(' ')[0]),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

额外提示 #

• 如果需要重启APP后保留事件，可以用shared_preferences把事件列表转成JSON字符串存储，读取时再解析成对象
• 记得配置权限：Android在AndroidManifest.xml添加读写存储权限，iOS在Info.plist添加相册访问权限

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