added back profile picture crop functionality

This commit is contained in:
Kima 2023-08-26 00:19:41 +02:00
parent 360426d851
commit 6fda457bbb
3 changed files with 61 additions and 8 deletions

View File

@ -68,6 +68,9 @@ dependencies:
screenshot: ^2.1.0 screenshot: ^2.1.0
flutter_staggered_grid_view: ^0.7.0 flutter_staggered_grid_view: ^0.7.0
sqflite_common_ffi_web: ^0.4.0 sqflite_common_ffi_web: ^0.4.0
image_crop:
git:
url: https://github.com/kimaah/image_crop.git
dev_dependencies: dev_dependencies:
flutter_lints: ^2.0.1 flutter_lints: ^2.0.1

View File

@ -14,6 +14,7 @@ import 'package:flutter_feather_icons/flutter_feather_icons.dart';
import 'package:filcnaplo_mobile_ui/screens/settings/settings_screen.i18n.dart'; import 'package:filcnaplo_mobile_ui/screens/settings/settings_screen.i18n.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:image_picker/image_picker.dart'; import 'package:image_picker/image_picker.dart';
import 'package:image_crop/image_crop.dart';
// ignore: must_be_immutable // ignore: must_be_immutable
class UserMenuProfilePic extends StatelessWidget { class UserMenuProfilePic extends StatelessWidget {
@ -52,6 +53,7 @@ class UserProfilePicEditor extends StatefulWidget {
class _UserProfilePicEditorState extends State<UserProfilePicEditor> { class _UserProfilePicEditorState extends State<UserProfilePicEditor> {
late final UserProvider user; late final UserProvider user;
final cropKey = GlobalKey<CropState>();
File? _file; File? _file;
File? _sample; File? _sample;
File? _lastCropped; File? _lastCropped;
@ -63,10 +65,16 @@ class _UserProfilePicEditorState extends State<UserProfilePicEditor> {
if (image == null) return; if (image == null) return;
File imageFile = File(image.path); File imageFile = File(image.path);
final sample = await ImageCrop.sampleImage(
file: imageFile,
preferredSize: context.size!.longestSide.ceil(),
);
_sample?.delete(); _sample?.delete();
_file?.delete(); _file?.delete();
setState(() { setState(() {
_sample = sample;
_file = imageFile; _file = imageFile;
}); });
} on PlatformException catch (e) { } on PlatformException catch (e) {
@ -74,6 +82,17 @@ class _UserProfilePicEditorState extends State<UserProfilePicEditor> {
} }
} }
Widget cropImageWidget() {
return SizedBox(
height: 300,
child: Crop.file(
_sample!,
key: cropKey,
aspectRatio: 1.0,
),
);
}
Widget openImageWidget() { Widget openImageWidget() {
return InkWell( return InkWell(
customBorder: RoundedRectangleBorder( customBorder: RoundedRectangleBorder(
@ -83,20 +102,25 @@ class _UserProfilePicEditorState extends State<UserProfilePicEditor> {
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border.all(color: Colors.grey), border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(14.0)), borderRadius: BorderRadius.circular(14.0),
),
width: double.infinity, width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 32.0, horizontal: 8.0), padding: const EdgeInsets.symmetric(vertical: 32.0, horizontal: 8.0),
child: Column( child: Column(
children: [ children: [
Text( Text(
"click_here".i18n, "click_here".i18n,
style: style: const TextStyle(
const TextStyle(fontSize: 22.0, fontWeight: FontWeight.w600), fontSize: 22.0,
fontWeight: FontWeight.w600,
),
), ),
Text( Text(
"select_profile_picture".i18n, "select_profile_picture".i18n,
style: style: const TextStyle(
const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500), fontSize: 14.0,
fontWeight: FontWeight.w500,
),
) )
], ],
), ),
@ -105,13 +129,36 @@ class _UserProfilePicEditorState extends State<UserProfilePicEditor> {
} }
Future<void> _cropImage() async { Future<void> _cropImage() async {
List<int> imageBytes = await _file!.readAsBytes(); final scale = cropKey.currentState!.scale;
final area = cropKey.currentState!.area;
if (area == null || _file == null) {
return;
}
final sample = await ImageCrop.sampleImage(
file: _file!,
preferredSize: (2000 / scale).round(),
);
final file = await ImageCrop.cropImage(
file: sample,
area: area,
);
sample.delete();
_lastCropped?.delete();
_lastCropped = file;
List<int> imageBytes = await _lastCropped!.readAsBytes();
String base64Image = base64Encode(imageBytes); String base64Image = base64Encode(imageBytes);
widget.u.picture = base64Image; widget.u.picture = base64Image;
Provider.of<DatabaseProvider>(context, listen: false) Provider.of<DatabaseProvider>(context, listen: false)
.store .store
.storeUser(widget.u); .storeUser(widget.u);
Provider.of<UserProvider>(context, listen: false).refresh(); Provider.of<UserProvider>(context, listen: false).refresh();
debugPrint('$file');
} }
@override @override
@ -141,7 +188,7 @@ class _UserProfilePicEditorState extends State<UserProfilePicEditor> {
Padding( Padding(
padding: padding:
const EdgeInsets.symmetric(vertical: 12.0, horizontal: 24.0), const EdgeInsets.symmetric(vertical: 12.0, horizontal: 24.0),
child: openImageWidget(), child: _sample == null ? openImageWidget() : cropImageWidget(),
), ),
if (widget.u.picture != "") if (widget.u.picture != "")
TextButton( TextButton(

View File

@ -24,6 +24,9 @@ dependencies:
dropdown_button2: ^1.8.9 dropdown_button2: ^1.8.9
home_widget: ^0.1.6 home_widget: ^0.1.6
image_picker: ^0.8.6 image_picker: ^0.8.6
image_crop:
git:
url: https://github.com/kimaah/image_crop.git
lottie: ^1.4.3 lottie: ^1.4.3
animations: ^2.0.1 animations: ^2.0.1
flutter_svg: ^1.1.6 flutter_svg: ^1.1.6