Question 221321 in Flutter Question posted in
The official Flutter documentation can be found here.

How to achieve this flutter UI

enter image description here

This is the UI i am trying to get in my flutter application,

Tried with camera plugin but don’t know to costomise it can any one provide a full code for this have been stuck with this for more than 3 days,

Tags:

2

Answers


  1. 0

    Maybe you can check the third-party package like image_editor and extended_image(Github)

    You can create a new ExtendedImage with edit mode

        ExtendedImage.network(
      imageTestUrl,
      fit: BoxFit.contain,
      mode: ExtendedImageMode.editor,
      extendedImageEditorKey: editorKey,
      initEditorConfigHandler: (state) {
        return EditorConfig(
            maxScale: 8.0,
            cropRectPadding: EdgeInsets.all(20.0),
            hitTestSize: 20.0,
            cropAspectRatio: _aspectRatio.aspectRatio);
      },
    );

    And if you want the border to be a circle, you may need to pass a custom cornerPainter param to the config when creating ExtendedImage

    ...
initEditorConfigHandler: (state) {
        return EditorConfig(
            /// Other configs
            /// Here choose a circle border painer
            cornerPainter: ExtendedImageCropLayerPainterCircleCorner()
      },
...

    However you may need to create a cornerPainter class yourself if you want the image edit UI to be highly customized, and you can check the github repo of extended_image for more info.

    Login or Signup to reply.
  2. 0

    you can try this package to achieve both the ui and to crop circular crop_your_image

    sample code

     Crop(
     controller: _cropController,
                      image: //Uint8List of image data,
                      onCropped: (croppedData) {
                        setState(() {
                          _croppedData = croppedData;
                          _isCropping = false;
                        });
                      },
                      withCircleUi: true,
                      onStatusChanged: (status) => setState(() {
                      
                      }),
                      initialSize: 0.5,
                      maskColor: _isSumbnail ? Colors.white : null,
                      cornerDotBuilder: (size, edgeAlignment) =>
                          const SizedBox.shrink(),
                      interactive: true,
                      fixArea: true,
                      radius: 20,
                      initialAreaBuilder: (rect) {
                        return Rect.fromLTRB(
                          rect.left + 24,
                          rect.top + 24,
                          rect.right - 24,
                          rect.bottom - 24,
                        );
                      },
                    ),

    and when crop use the .cropcircle() method to crop the image circular

     _cropController.cropCircle();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search