I want to implement that after clicking upload button it will pick image from gallery. After picking image then open Image cropper screen lastly cropped image will show in alert dialog. But here clicking upload button it pick image again clicking upload button open crop screen lastly clicking upload button it shows alert dialog.May be wont change state automatically .. How can i fix that. Here is a sample code i have tried

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

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

    class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
   }
  }
     class Home extends StatefulWidget {
      const Home({Key? key}) : super(key: key);
    
      @override
      State<Home> createState() => _HomeState();
      }
    
      class _HomeState extends State<Home> {
      late AppState state;
      File? imageFile;
    
      @override
       void initState() {
        super.initState();
        state = AppState.free;
      }
    
      @override
      Widget build(BuildContext context) {
        Future pickedImage() async {
          final pickedImage =
              await ImagePicker().pickImage(source: ImageSource.gallery);
          imageFile = pickedImage != null ? File(pickedImage.path) : null;
          if (imageFile != null) {
            setState(() {
              state = AppState.picked;
            });
          }
        }

    Future<Null> _cropImage() async {
      var croppedFile = await ImageCropper().cropImage(
          sourcePath: imageFile!.path,
          aspectRatioPresets: Platform.isAndroid
              ? [
                  CropAspectRatioPreset.square,
                  CropAspectRatioPreset.ratio3x2,
                  CropAspectRatioPreset.original,
                  CropAspectRatioPreset.ratio4x3,
                  CropAspectRatioPreset.ratio16x9
                ]
              : [
                  CropAspectRatioPreset.original,
                  CropAspectRatioPreset.square,
                  CropAspectRatioPreset.ratio3x2,
                  CropAspectRatioPreset.ratio4x3,
                  CropAspectRatioPreset.ratio5x3,
                  CropAspectRatioPreset.ratio5x4,
                  CropAspectRatioPreset.ratio7x5,
                  CropAspectRatioPreset.ratio16x9
                ],
          androidUiSettings: AndroidUiSettings(
              toolbarTitle: 'Cropper',
              toolbarColor: Colors.deepOrange,
              toolbarWidgetColor: Colors.white,
              initAspectRatio: CropAspectRatioPreset.original,
              lockAspectRatio: false),
          iosUiSettings: IOSUiSettings(
            title: 'Cropper',
          ));
      if (croppedFile != null) {
        imageFile = croppedFile;
        setState(() {
          state = AppState.cropped;
        });
      }
    }

    return Scaffold(
        appBar: AppBar(),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            ElevatedButton(
                onPressed: () {
                  if (state == AppState.free)
                    pickedImage();
                  else if (state == AppState.picked)
                    _cropImage();
                  else if (state == AppState.cropped) {
                    showAlertDialog(context);
                  } else {
                    Container();
                  }
                },
                child: Text("Upload"))
          ],
        ));
  }

  showAlertDialog(BuildContext context) {
    // Create button
    Widget okButton = FlatButton(
      child: Text("OK"),
      onPressed: () {
        Navigator.of(context).pop();
      },
    );

    // Create AlertDialog
    AlertDialog alert = AlertDialog(
      title: Text("Simple Alert"),
      content: Container(
        width: 250,
        height: 100,
        child: imageFile != null ? Image.file(imageFile!) : Container(),
      ),
      actions: [
        okButton,
      ],
    );

    // show the dialog
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }
}

enum AppState {
  free,
  picked,
  cropped,
}

CodePudding user response：

Maybe you should add this line to setState block also.

  if (croppedFile != null) {
    //imageFile = croppedFile;
    setState(() {
      imageFile = croppedFile; //to here 
      state = AppState.cropped;
    });
  }

CodePudding user response：

ImagePicker return a nullable CroppedFile?.

You can create a state variable to hold it.

  File? imageFile;
  CroppedFile? croppedFile;

/// you can also directly assing it on  `croppedFile = await ImageCropper().cropImage(`
if (croppedFile != null) {
  croppedFile = croppedFile;
  setState(() {
    state = AppState.cropped;
  });
}

Now to view the croppedFile

croppedFile != null ? Image.file(File(croppedFile!.path)) : null),