การทำงานกับ Imager Picker Dependency ใน Flutter

Question

ฉันมีฟังก์ชันในแอปพลิเคชันที่ช่วยให้ผู้ใช้เลือกรูปภาพจากแกลเลอรีหรือถ่ายภาพด้วยกล้อง

  _getImage(ImageSource source) async {
    // ignore: deprecated_member_use
    File selectedImage = await ImagePicker.pickImage(
      source: source,
      imageQuality: 50,
      maxWidth: 400.0,
    ).whenComplete(() {
      setState(() {});
    });
    if (_imageFile == null) return;
    
    setState(() {
      _imageFile = selectedImage;
    });
  }

ฉันใช้การพึ่งพา image_pickerนี้และฉันทำตามตัวอย่างที่พบในนั้นและตัวอย่างการอัปเดตที่เป็นไปได้ที่ผู้อื่นทำทางออนไลน์ จากข้อเสนอแนะเกี่ยวกับคำถาม stackoverflow นี้ฉันขอแนะนำให้เพิ่ม whenComplete ในนั้นซึ่งฉันทำ

เมื่อฉันเลือกรูปภาพจากแกลเลอรีของฉันมันจะไม่อัปเดตวิดเจ็ตมุมมองภาพในหน้าจอของฉัน ตัวเลือกกล้องไม่ทำงาน ฉันจะขาดอะไรไปได้บ้าง?

นี่คือวิดเจ็ตรูปภาพของฉันที่แสดงรูปภาพ:

return Stack(
    alignment: AlignmentDirectional.bottomCenter,
    children: <Widget>[
      Image.file(
        _imageFile,
        fit: BoxFit.cover,
        height: 250,
      ),
      Container(
        width: 250.0,
        height: 100.0,
        color: Colors.black54,
        child: Column(
          children: <Widget>[
            Text(
              'Change Image',
              style: TextStyle(
                color: Colors.white,
                fontSize: 22.0,
                fontWeight: FontWeight.w400,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                //camera button
                IconButton(
                  icon: Icon(FontAwesomeIcons.camera),
                  onPressed: () => _getImage(ImageSource.camera),
                  color: kThemeStyleButtonFillColour,
                ),
                SizedBox(width: 20.0),
                IconButton(
                  icon: Icon(FontAwesomeIcons.fileImport),
                  onPressed: () => _getImage(ImageSource.gallery),
                  color: kThemeStyleButtonFillColour,
                ),
              ],
            ),
          ],
        ),
      ),
      SizedBox(height: 32.0),
    ],
  );

Answer 1

คุณใช้ตรรกะที่ไม่ถูกต้องภายในifคำสั่ง

วิธีที่ถูกต้องในการทำสิ่งนี้

if(selectedImage != null) { Update image widget here }

ฉันคิดว่าimageFileตัวแปรยังไม่ได้รับการกำหนดไฟล์ใด ๆ ในตอนแรกดังนั้นเงื่อนไขimageFile == nullจึงเป็นจริงเสมอและวิดเจ็ตรูปภาพจะไม่อัปเดต

Answer 2

** ฉันจะอัปเดตรหัสของคุณลองดู **

import 'package:image_picker/image_picker.dart';

class check extends StatefulWidget {
  @override
  _checkState createState() => _checkState();
}

class _checkState extends State<check> {
  File _imageFile;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(
      alignment: AlignmentDirectional.bottomCenter,
      children: <Widget>[
        _imageFile !=null ? Image.file(
          _imageFile ,
          height: 250,
          fit: BoxFit.fill,
        ) : Text('No image selected.'),
        SizedBox(height: 100,),
        Container(
          width: 250.0,
          height: 100.0,
          color: Colors.black54,
          child: Column(
            children: <Widget>[
              Text(
                'Change Image',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 22.0,
                  fontWeight: FontWeight.w400,
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  //camera button
                  IconButton(
                    icon: Icon(Icons.camera),
                    onPressed: () => _getImage(ImageSource.camera),
                  ),
                  SizedBox(width: 20.0),
                  IconButton(
                    icon: Icon(Icons.attach_file),
                    onPressed: () => _getImage(ImageSource.gallery),

                  ),
                ],
              ),
            ],
          ),
        ),
        SizedBox(height: 32.0),
      ],
    )
    );
  }

  _getImage(ImageSource source) async {
    // ignore: deprecated_member_use
    File selectedImage = await ImagePicker.pickImage(
      source: source,
      imageQuality: 50,
      maxWidth: 400.0,
    );

    setState(() {
      _imageFile = selectedImage;
    });
  }
}

Answer 3

ในกรณีของคุณ

   setState(() {
      _imageFile = selectedImage;
    });

คือไม่รอภาพที่เลือก

ลองสิ่งนี้:

   _getImage(ImageSource source) async {
    // ignore: deprecated_member_use
    File selectedImage = await ImagePicker.pickImage(
      source: source,
      imageQuality: 50,
      maxWidth: 400.0,
    );
    setState(() {
         _imageFile = selectedImage;
     });
  }

Answer 4

ฉันสามารถทำให้รหัสนี้ใช้งานได้และการแฮ็คยังคงเต้นฉันอยู่เพราะมันไม่สมเหตุสมผล

ฉันทำตามคำแนะนำที่ให้ไว้ข้างต้นโดยทำตาม whenComplete เนื่องจากมีการรอคอย

ฉันยังเปลี่ยนประเภทการประกาศของ selectedImage จาก File เป็น var ดังต่อไปนี้:

  _getImage(ImageSource source) async {
    var selectedImage;
    selectedImage = await ImagePicker.pickImage(
      source: source,
      imageQuality: 50,
      maxWidth: 400.0,
    );

    setState(() {
      _imageFile = selectedImage;
    });
  }

ไม่สมเหตุสมผลว่าทำไม var ถึงทำงานและ File ไม่ได้เนื่องจากเรารู้ว่าเราคาดหวังว่า File จะเป็นค่าที่ส่งคืน แต่ตอนนี้ทำงานได้ดี