Flutter实现拍照确认后展示带照片的AlertDialog方案

核心问题分析 #

1. 提前弹窗：useCamera是异步方法，原代码同步调用showImage会导致还未完成拍照就弹出空弹窗
2. Widget类型错误：三元表达式返回的空字符串不属于Widget类型，不符合children列表要求
3. 缺少确认逻辑：没有提供用户确认/取消照片的交互，无法实现“未确认则不保留照片”的需求

具体修改方案 #

1. 修复异步调用顺序 #

将showImage放在拍照完成后的逻辑里，确保只有拍到照片才触发弹窗：

onPressed: () async {
  await useCamera(ImageSource.camera);
  if (getImage != null) {
    await showImage();
  }
},

2. 修复Widget类型错误 #

移除无效的空字符串，替换为合法的Widget布局；同时因为已经判断getImage != null才弹窗，可直接展示照片。

3. 完善确认逻辑 #

在弹窗中添加确认/取消按钮，用户点击取消时清空照片，确保只有确认后才保留照片数据。

修改后的完整代码 #

import 'package:etat_des_lieux/datarooms.dart';
import 'package:etat_des_lieux/room.dart';
import 'package:etat_des_lieux/styles/inventory_text.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

class InventoryPage extends StatefulWidget {
  final color;

  const InventoryPage({super.key, required this.color});

  @override
  InventoryPageState createState() => InventoryPageState();
}

class InventoryPageState extends State<InventoryPage> {
  ImagePicker imagePicker = ImagePicker();
  File? getImage;
  int index = 0;
  int room = 0;

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    double height = size.height;
    double width = size.width;

    List<Room> rooms = DataRooms().listeDataRooms;
    final Room room = rooms[index];

    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Etape N°${index + 1} / ${rooms.length} : ${room.room}",
          style: const TextStyle(fontSize: 15),
        ),
        backgroundColor: widget.color,
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Card(
                margin: const EdgeInsets.all(8),
                elevation: 10,
                child: Image.asset(
                  room.getImage(),
                  height: height / 3,
                  width: width * 0.9,
                  fit: BoxFit.cover,
                ),
              ),
              InventoryText(text: room.inventory, title: room.inventoryTitle),
              Divider(height: 30, thickness: 0.5, color: widget.color),
              InventoryText(text: room.damages, title: room.damagesTitle),
              Container(
                width: width / 2,
                margin: EdgeInsets.only(top: width / 10),
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.cyan),
                  onPressed: () async {
                    await useCamera(ImageSource.camera);
                    if (getImage != null) await showImage();
                  },
                  child: const Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Text("Prenez votre photo"),
                      Icon(Icons.camera_alt, color: Colors.white),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> showImage() async {
    return showDialog(
      context: context,
      builder: (BuildContext context) {
        return SimpleDialog(
          title: const Text("确认照片"),
          children: [
            Image.file(getImage!),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                      setState(() => getImage = null);
                    },
                    child: const Text("取消"),
                  ),
                  const SizedBox(width: 8),
                  TextButton(
                    onPressed: () => Navigator.pop(context),
                    child: const Text("确认"),
                  ),
                ],
              ),
            ),
          ],
        );
      },
    );
  }

  Future<void> useCamera(ImageSource source) async {
    XFile? xFile = await imagePicker.pickImage(source: source);
    if (xFile != null) {
      setState(() => getImage = File(xFile.path));
    }
  }
}

关键修改说明 #

• 规范useCamera的异步返回类型，确保流程等待正确
• 在按钮点击事件中通过await等待拍照完成，避免提前弹窗
• 移除无效的空字符串，替换为符合要求的Widget布局
• 添加确认/取消按钮交互，实现“未确认则清空照片”的逻辑
• 简化showImage方法，去掉冗余参数和无效判断

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