flutter 如何在抖动警告对话框中使用图像选择器显示所选图像?

wmtdaxz3  于 2023-01-02  发布在  Flutter
关注(0)|答案(1)|浏览(138)

我尝试在通知对话框中添加图像选取器,但从图库通知对话框中选择图像时,通知对话框不会更新当前选择。我必须重新打开通知对话框才能看到所选图像。如何解决此问题?
我已经张贴了我的代码下面。请有人可以帮助我吗?谢谢

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

void main() => runApp(Profile());

class Profile extends StatefulWidget {
  const Profile({Key? key}) : super(key: key);
  @override
  State<Profile> createState() => _ProfileState();
}

class _ProfileState extends State<Profile> {
  File? _photo;
  final ImagePick _picker = ImagePicker();

  Future imgPicker(src) async {
    final pickedFile = await _picker.pickImage(source: src);
    setState(() {
      if (pickedFile != null) {
        _photo = File(pickedFile.path);
        //uploadFile();
      } else {
        Fluttertoast.showToast(msg: 'No Image Selected');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            title: Text('Profile'),
            centerTitle: true,
          ),
          body: Center(
              child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (context) {
                      return StatefulBuilder(
                        builder: (BuildContext context, StateSetter setState) {
                          return AlertDialog(
                            title: Text(
                              "Upload Image",
                              textAlign: TextAlign.center,
                            ),
                            content: GestureDetector(
                              onTap: () {
                                _showPicker(context);
                              },
                              child: CircleAvatar(
                                radius: 55,
                                backgroundColor: Color(0xffFDCF09),
                                child: _photo != null
                                    ? ClipRRect(
                                        borderRadius: BorderRadius.circular(50),
                                        child: Image.file(
                                          _photo!,
                                          width: 100,
                                          height: 100,
                                          fit: BoxFit.fitHeight,
                                        ),
                                      )
                                    : Container(
                                        decoration: BoxDecoration(
                                            color: Colors.grey[200],
                                            borderRadius:
                                                BorderRadius.circular(50)),
                                        width: 100,
                                        height: 100,
                                        child: Icon(
                                          Icons.camera_alt,
                                          color: Colors.grey[800],
                                        ),
                                      ),
                              ),
                            ),
                            actions: <Widget>[
                              IconButton(
                                onPressed: () {
                                  setState(() => _photo = _photo);
                                },
                                icon: Icon(Icons.refresh),
                                color: Colors.blue,
                              ),
                              TextButton(
                                onPressed: () => Navigator.pop(context),
                                child: Text("Cancel"),
                              ),
                            ],
                          );
                        },
                      );
                    },
                  );
                },
                child: Text('Image Picker'),
              ),
            ],
          ))),
    );
  }

  void _showPicker(context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext bc) {
          return SafeArea(
            child: Container(
              child: Wrap(
                children: <Widget>[
                  ListTile(
                      leading: Icon(Icons.photo_library),
                      title: Text('Gallery'),
                      onTap: () {
                        imgPick(ImageSource.gallery);
                        Navigator.of(context).pop();
                      }),
                  ListTile(
                    leading: Icon(Icons.photo_camera),
                    title: Text('Camera'),
                    onTap: () {
                      imgPick(ImageSource.camera);
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              ),
            ),
          );
        });
  }
}

我想当我选择一个图像从画廊图像选择器应该显示当前图像选择

8hhllhi2

8hhllhi21#

对于这种情况,可以使用StatefulBuilder,如下所示

Future imgPicker(src, StateSetter _setState) async {
    final pickedFile = await _picker.pickImage(source: src);
    _setState(() {
      if (pickedFile != null) {
        _photo = File(pickedFile.path);
        //uploadFile();
      } else {
        Fluttertoast.showToast(msg: 'No Image Selected');
      }
    });
  }
  
  void _showPicker(context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext bc) {
          return StatefulBuilder(builder: (context, _setState) {
            return SafeArea(
              child: Container(
                child: Wrap(
                  children: <Widget>[
                    ListTile(
                        leading: Icon(Icons.photo_library),
                        title: Text('Gallery'),
                        onTap: () {
                          imgPick(ImageSource.gallery, _setState);
                          Navigator.of(context).pop();
                        }),
                    ListTile(
                      leading: Icon(Icons.photo_camera),
                      title: Text('Camera'),
                      onTap: () {
                        imgPick(ImageSource.camera, _setState);
                        Navigator.of(context).pop();
                      },
                    ),
                  ],
                ),
              ),
            );
          });
        });
  }

相关问题