Add image as layer to pro editor #204
Answered
by
hm21
edwarddubi
asked this question in
Q&A
-
Is there any function in the ProImageEditorState to add images as layers/just images to the editor while using it? |
Beta Was this translation helpful? Give feedback.
Answered by
hm21
Aug 30, 2024
Replies: 1 comment 1 reply
-
Yes, you can add any layer you want, as demonstrated in the example below. const url = 'https://picsum.photos/id/200/2000';
/// IMPORTANT: precache the image
await precacheImage(const NetworkImage(url), context);
/// If you use it outside from `customWidgets` access the editor like below.
/// editorKey.currentState!.addLayer(...);
///
/// If you use it inside of `customWidgets` you can access the editor
/// directly like below.
editor.addLayer(
StickerLayerData(
sticker: ClipRRect(
borderRadius: BorderRadius.circular(7),
child: Image.network(
url,
width: 80,
height: 80,
fit: BoxFit.cover,
loadingBuilder: (context, child, loadingProgress) {
return AnimatedSwitcher(
layoutBuilder: (currentChild, previousChildren) {
return SizedBox(
width: 80,
height: 80,
child: Stack(
fit: StackFit.expand,
alignment: Alignment.center,
children: <Widget>[
...previousChildren,
if (currentChild != null) currentChild,
],
),
);
},
duration: const Duration(milliseconds: 200),
child: loadingProgress == null
? child
: Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes!
: null,
),
),
);
},
),
),
),
); |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
edwarddubi
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Yes, you can add any layer you want, as demonstrated in the example below.