Skip to content

Commit

Permalink
fix: correct layer interaction to handle multiple layers
Browse files Browse the repository at this point in the history 
refactor: improve code readability for better maintainability
  • Loading branch information
@hm21
hm21 committed Apr 21, 2024
1 parent b1f8ff0 commit 1b05eee
Show file tree
Hide file tree
Showing 49 changed files with 2,439 additions and 2,905 deletions.
4 changes: 4 additions & 0 deletions .github/workflows/publish.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ jobs:
flutter-version: '3.19.5'
- name: Install Package Dependencies
run: flutter pub get
- name: Format dart code
run: dart format .
- name: Analyze dart code
run: dart analyze .
- name: Check publish with dry run
run: flutter pub publish --dry-run
- name: Publish package
Expand Down
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# Changelog

## Version 2.6.7
- **fix**: correct layer interaction to handle multiple layers
- **refactor**: improve code readability for better maintainability

## Version 2.6.6
- **refactor:** Update editor code examples

Expand Down
17 changes: 14 additions & 3 deletions example/lib/pages/movable_background_image.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'dart:math';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:pro_image_editor/models/layer.dart';
import 'package:pro_image_editor/modules/paint_editor/utils/draw/draw_canvas.dart';
import 'package:pro_image_editor/pro_image_editor.dart';
Expand Down Expand Up @@ -57,9 +58,13 @@ class _MoveableBackgroundImageExampleState
var width = MediaQuery.of(context).size.width;
var height = MediaQuery.of(context).size.height;

double imgRatio = 1; // set the aspect ratio from your image.
Size editorSize = Size(
width,
height - kToolbarHeight - kBottomNavigationBarHeight,
width - MediaQuery.of(context).padding.horizontal,
height -
kToolbarHeight -
kBottomNavigationBarHeight -
MediaQuery.of(context).padding.vertical,
);

await _createTransparentImage(editorSize.aspectRatio);
Expand Down Expand Up @@ -149,6 +154,9 @@ class _MoveableBackgroundImageExampleState
blurEditorConfigs:
const BlurEditorConfigs(enabled: false),
imageEditorTheme: const ImageEditorTheme(
uiOverlayStyle: SystemUiOverlayStyle(
statusBarColor: Colors.black,
),
background: Colors.transparent,

/// Optionally remove background
Expand All @@ -159,7 +167,10 @@ class _MoveableBackgroundImageExampleState
),
stickerEditorConfigs: StickerEditorConfigs(
enabled: false,
initWidth: editorSize.width / _initScale,
initWidth: (editorSize.aspectRatio > imgRatio
? editorSize.height
: editorSize.width) /
_initScale,
buildStickers: (setLayer) {
// Optionally your code to pick layers
return const SizedBox();
Expand Down
127 changes: 63 additions & 64 deletions example/lib/pages/reorder_layer_example.dart
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:pro_image_editor/models/layer.dart';
import 'package:pro_image_editor/modules/paint_editor/utils/draw/draw_canvas.dart';
Expand Down Expand Up @@ -58,6 +59,7 @@ class _ReorderLayerExampleState extends State<ReorderLayerExample>
onPressed: () {
showModalBottomSheet(
context: context,
showDragHandle: true,
builder: (context) {
return ReorderLayerSheet(
layers: editorKey.currentState!.activeLayers,
Expand All @@ -66,7 +68,7 @@ class _ReorderLayerExampleState extends State<ReorderLayerExample>
oldIndex: oldIndex,
newIndex: newIndex,
);
Navigator.pop(context);
/* Navigator.pop(context); */
},
);
},
Expand Down Expand Up @@ -98,70 +100,67 @@ class ReorderLayerSheet extends StatefulWidget {
class _ReorderLayerSheetState extends State<ReorderLayerSheet> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Text(
'Reorder',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.w500),
),
),
Expanded(
child: ReorderableListView.builder(
itemBuilder: (context, index) {
Layer layer = widget.layers[index];
return ListTile(
key: ValueKey(layer),
title: layer.runtimeType == TextLayerData
? Text(
(layer as TextLayerData).text,
style: const TextStyle(fontSize: 20),
)
: layer.runtimeType == EmojiLayerData
? Text(
(layer as EmojiLayerData).emoji,
style: const TextStyle(fontSize: 24),
)
: layer.runtimeType == PaintingLayerData
? SizedBox(
height: 40,
child: FittedBox(
alignment: Alignment.centerLeft,
child: CustomPaint(
size: (layer as PaintingLayerData).size,
willChange: true,
isComplex:
layer.item.mode == PaintModeE.freeStyle,
painter: DrawCanvas(
item: layer.item,
scale: layer.scale,
enabledHitDetection: false,
freeStyleHighPerformanceScaling: false,
freeStyleHighPerformanceMoving: false,
),
),
),
)
: layer.runtimeType == StickerLayerData
? SizedBox(
height: 40,
child: FittedBox(
alignment: Alignment.centerLeft,
child:
(layer as StickerLayerData).sticker,
),
)
: Text(layer.id.toString()),
);
},
itemCount: widget.layers.length,
onReorder: widget.onReorder,
),
return ReorderableListView.builder(
header: const Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Text(
'Reorder',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.w500),
),
],
),
footer: const SizedBox(height: 30),
dragStartBehavior: DragStartBehavior.down,
itemBuilder: (context, index) {
Layer layer = widget.layers[index];
return ListTile(
key: ValueKey(layer),
tileColor: Theme.of(context).cardColor,
title: layer.runtimeType == TextLayerData
? Text(
(layer as TextLayerData).text,
style: const TextStyle(fontSize: 20),
)
: layer.runtimeType == EmojiLayerData
? Text(
(layer as EmojiLayerData).emoji,
style: const TextStyle(fontSize: 24),
)
: layer.runtimeType == PaintingLayerData
? SizedBox(
height: 40,
child: FittedBox(
alignment: Alignment.centerLeft,
child: CustomPaint(
size: (layer as PaintingLayerData).size,
willChange: true,
isComplex:
layer.item.mode == PaintModeE.freeStyle,
painter: DrawCanvas(
item: layer.item,
scale: layer.scale,
enabledHitDetection: false,
freeStyleHighPerformanceScaling: false,
freeStyleHighPerformanceMoving: false,
),
),
),
)
: layer.runtimeType == StickerLayerData
? SizedBox(
height: 40,
child: FittedBox(
alignment: Alignment.centerLeft,
child: (layer as StickerLayerData).sticker,
),
)
: Text(
layer.id.toString(),
),
trailing: const Icon(Icons.drag_handle_rounded),
);
},
itemCount: widget.layers.length,
onReorder: widget.onReorder,
);
}
}
1 change: 1 addition & 0 deletions example/lib/pages/stickers_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ class _StickersExampleState extends State<StickersExample>
onImageEditingComplete: onImageEditingComplete,
onCloseEditor: onCloseEditor,
configs: ProImageEditorConfigs(
blurEditorConfigs: const BlurEditorConfigs(enabled: false),
stickerEditorConfigs: StickerEditorConfigs(
enabled: true,
buildStickers: (setLayer) {
Expand Down
129 changes: 66 additions & 63 deletions example/lib/pages/whatsapp_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,77 +176,80 @@ class _WhatsAppExampleState extends State<WhatsAppExample>
},
),
customWidgets: ImageEditorCustomWidgets(
whatsAppBottomWidget: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 7, 16, 12),
child: TextField(
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
filled: true,
isDense: true,
prefixIcon: const Padding(
padding: EdgeInsets.only(left: 7.0),
child: Icon(
Icons.add_photo_alternate_rounded,
size: 24,
color: Colors.white,
whatsAppBottomWidget: LayoutBuilder(builder: (context, constraints) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 7, 16, 12),
child: TextField(
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
filled: true,
isDense: true,
prefixIcon: const Padding(
padding: EdgeInsets.only(left: 7.0),
child: Icon(
Icons.add_photo_alternate_rounded,
size: 24,
color: Colors.white,
),
),
hintText: 'Add a caption...',
hintStyle: const TextStyle(
color: Color.fromARGB(255, 238, 238, 238),
fontWeight: FontWeight.w400,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(40),
borderSide: BorderSide.none,
),
fillColor: const Color(0xFF202D35),
),
hintText: 'Add a caption...',
hintStyle: const TextStyle(
color: Color.fromARGB(255, 238, 238, 238),
fontWeight: FontWeight.w400,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(40),
borderSide: BorderSide.none,
),
fillColor: const Color(0xFF202D35),
),
),
),
),
Flexible(
child: Container(
padding: const EdgeInsets.fromLTRB(16, 7, 16, 12),
color: Colors.black38,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.symmetric(
vertical: 4,
horizontal: 10,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: const Color(0xFF202D35),
),
child: const Text(
'Alex Frei',
style: TextStyle(
fontSize: 13,
Flexible(
child: Container(
padding: EdgeInsets.fromLTRB(16, 7, 16,
12 + MediaQuery.of(context).viewInsets.bottom),
color: Colors.black38,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.symmetric(
vertical: 4,
horizontal: 10,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: const Color(0xFF202D35),
),
child: const Text(
'Alex Frei',
style: TextStyle(
fontSize: 13,
),
),
),
),
IconButton(
onPressed: () {
editorKey.currentState?.doneEditing();
},
icon: const Icon(Icons.send),
style: IconButton.styleFrom(
backgroundColor: const Color(0xFF0DA886),
),
)
],
IconButton(
onPressed: () {
editorKey.currentState?.doneEditing();
},
icon: const Icon(Icons.send),
style: IconButton.styleFrom(
backgroundColor: const Color(0xFF0DA886),
),
)
],
),
),
),
)
],
),
)
],
);
}),
),
),
);
Expand Down
Loading

0 comments on commit 1b05eee

Please sign in to comment.