Bekerja dengan Imager Picker Dependency di Flutter

Question

Saya memiliki fungsi dalam aplikasi saya yang membantu pengguna memilih Gambar dari galeri atau mengambil foto dengan kamera.

  _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;
    });
  }

Saya menggunakan ketergantungan image_picker ini dan saya mengikuti contoh yang saya temukan di dalamnya dan juga contoh pembaruan yang mungkin dilakukan oleh orang lain secara online. Dari saran tentang pertanyaan stackoverflow ini , saya disarankan untuk menambahkan whenComplete di dalamnya, yang saya lakukan.

Ketika saya memilih gambar dari galeri saya, itu tidak memperbarui widget tampilan gambar di layar saya. Opsi kamera juga tidak berfungsi. Apa yang mungkin saya lewatkan?

Inilah widget Gambar saya yang menampilkan gambar:

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

Anda menggunakan logika yang salah di dalam ifpernyataan.

Cara yang benar untuk melakukan ini,

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

Saya pikir imageFilevariabel belum diberi file apa pun pada awalnya sehingga kondisinya imageFile == nullselalu benar dan widget gambar tidak pernah diperbarui.

Answer 2

** Saya akan memperbarui kode Anda, coba ini **

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

Dalam kasus Anda,

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

Tidak menunggu gambar yang dipilih

Coba ini:

   _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

Saya bisa mendapatkan kode ini untuk bekerja dan peretasan masih memukul saya karena tidak masuk akal.

Saya mengikuti rekomendasi yang diberikan di atas dengan menghapus whenComplete karena ada menunggu.

Saya juga mengubah jenis deklarasi selectedImage dari File ke var seperti di bawah ini:

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

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

Tidak masuk akal mengapa var berfungsi dan File tidak karena kami tahu kami mengharapkan File sebagai nilai yang dikembalikan, tetapi berfungsi dengan baik sekarang.