I am using image cropper dependency in my flutter project.
I am using image_cropper: ^1.4.1, And I am getting an error showing
Error: Member not found: 'ImageCropper.cropImage'.
final croppedFile = await ImageCropper.cropImage(
^^^^^^^^^
This is my code
Future<File?> cropImage(File imageFile) async {
File? croppedFile;
try {
croppedFile = await ImageCropper.cropImage(
sourcePath: imageFile.path,
aspectRatioPresets: [
CropAspectRatioPreset.square,
CropAspectRatioPreset.ratio3x2,
CropAspectRatioPreset.original,
CropAspectRatioPreset.ratio4x3,
CropAspectRatioPreset.ratio16x9
],
androidUiSettings: AndroidUiSettings(
toolbarTitle: 'Cropper',
toolbarColor: accentColor,
toolbarWidgetColor: white,
initAspectRatio: CropAspectRatioPreset.original,
lockAspectRatio: false),
iosUiSettings: IOSUiSettings(
title: 'Cropper',
));
return croppedFile;
} catch (e) {
print(e);
}
return croppedFile;
}
I don't know what is causing the error
try replacing ImageCropper.cropImage with ImageCropper().cropImage
Related
*I'm actually following the Flutter Local Notification in YouTubel and the link is : Flutter Local Notification
I'm using windows laptop and android emulator and I also updated the build.gradle file.
I'm getting an error at
var iOSPlatformChannelSpecifics = new IOSNotificationDetails();
in displayNotification method. Can anyone help me with this?
here is the code snippet
code snippet
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:get/get.dart';
class NotifyHelper {
FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
FlutterLocalNotificationsPlugin(); //
initializeNotification() async {
//tz.initializeTimeZones();
final DarwinInitializationSettings initializationSettingsDarwin =
DarwinInitializationSettings(
onDidReceiveLocalNotification: onDidReceiveLocalNotification);
final AndroidInitializationSettings initializationSettingsAndroid =
const AndroidInitializationSettings("appicon");
final InitializationSettings initializationSettings =
InitializationSettings(
iOS: initializationSettingsDarwin,
android: initializationSettingsAndroid,
);
await flutterLocalNotificationsPlugin.initialize(initializationSettings,
onDidReceiveNotificationResponse: onDidReceiveNotificationResponse);
}
displayNotification({required String title, required String body}) async {
print("doing test");
var androidPlatformChannelSpecifics = new AndroidNotificationDetails(
'your channel id', 'your channel name',
importance: Importance.max, priority: Priority.high);
var iOSPlatformChannelSpecifics = new IOSNotificationDetails();
// ignore: unnecessary_new
var platformChannelSpecifics = new NotificationDetails(
android: androidPlatformChannelSpecifics,
iOS: iOSPlatformChannelSpecifics);
await flutterLocalNotificationsPlugin.show(
0,
'You change your theme',
'You changed your theme back !',
platformChannelSpecifics,
payload: 'It could be anything you pass',
);
}
void requestIOSPermissions() {
flutterLocalNotificationsPlugin
.resolvePlatformSpecificImplementation<
IOSFlutterLocalNotificationsPlugin>()
?.requestPermissions(
alert: true,
badge: true,
sound: true,
);
}
void onDidReceiveNotificationResponse(
NotificationResponse notificationResponse) async {
final String? payload = notificationResponse.payload;
if (notificationResponse.payload != null) {
debugPrint('notification payload: $payload');
} else {
debugPrint("Notification Done");
}
Get.to(() => Container(
color: Colors.white,
));
}
/*Future selectNotification(String? payload) async {
if (payload != null) {
print('notification payload: $payload');
} else {
print("Notification Done");
}
Get.to(() => Container(
color: Colors.white,
));
}*/
Future onDidReceiveLocalNotification(
int id, String? title, String? body, String? payload) async {
// display a dialog with the notification details, tap ok to go to another page
/*showDialog(
//context: context,
builder: (BuildContext context) => CupertinoAlertDialog(
title: Text(title),
content: Text(body),
actions: [
CupertinoDialogAction(
isDefaultAction: true,
child: Text('Ok'),
onPressed: () async {
Navigator.of(context, rootNavigator: true).pop();
await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondScreen(payload),
),
);
},
)
],
),
);*/
Get.dialog(const Text("Wellcome to flutter"));
}
}
Check the change log of the package. Version 10.0.0 introduced some breaking changes, and the guide you are following is probably earlier.
For example:
[iOS][macOS] Breaking changes iOS and macOS classes have been renamed and refactored as they are based on the same operating system and share the same notification APIs. Rather than having a prefix of either IOS or MacOS, these are now replaced by classes with a Darwin prefix. For example, IOSInitializationSettings can be replaced with DarwinInitializationSettings
So for your current issue the solution might be using DarwinNotificationDetails instead of IOSNotificationDetails. But there can be other issues as well.
Everything works normally, but when I click to load an image from the gallery or from the camera, it does not load the image
The message in the VSC Debug Console is:
D/MediaScannerConnection( 5069): Scanned /data/user/0/com.lot.sig/cache/ce7735c2-8d36-4633-996f-bfae03424df26527509175807023631.jpg to null
This is my user_profile.dart:
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';
class UserProfile extends StatefulWidget {
UserProfile();
#override
_UserProfile createState() => _UserProfile();
}
enum AppState {
free,
picked,
cropped,
}
class _UserProfile extends State<UserProfile> {
AppState? state;
File? imageFile;
#override
void initState() {
super.initState();
state = AppState.free;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black87,
title: Text("Hola"),
),
body: Center(
child: imageFile != null ? Image.file(imageFile!) : Container(),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.black87,
onPressed: () {
if (state == AppState.free)
_pickImage();
else if (state == AppState.picked)
_cropImage();
else if (state == AppState.cropped) _clearImage();
},
child: _buildButtonIcon(),
),
);
}
Widget _buildButtonIcon() {
if (state == AppState.free)
return Icon(Icons.add);
else if (state == AppState.picked)
return Icon(Icons.crop);
else if (state == AppState.cropped)
return Icon(Icons.clear);
else
return Container();
}
Future<Null> _pickImage() async {
final _imageFile = await ImagePicker().pickImage(source: ImageSource.gallery);
if (_imageFile != null) {
imageFile = File(_imageFile.path);
setState(() {
state = AppState.picked;
});
}
}
Future<Null> _cropImage() async {
File? 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;
});
}
}
void _clearImage() {
imageFile = null;
setState(() {
state = AppState.free;
});
}
}
And this is my image_picker_handler.dart :
import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';
import 'package:sig/utilitary/image_picker_dialog.dart';
class ImagePickerHandler {
late ImagePickerDialog imagePicker;
AnimationController? _controller;
ImagePickerListener _listener;
ImagePickerHandler(this._listener, this._controller);
final ImagePicker _picker = ImagePicker();
openCamera() async {
imagePicker.dismissDialog();
var image = await (_picker.pickImage(source: ImageSource.camera) as FutureOr<XFile>);
cropImage(image);
}
openGallery() async {
imagePicker.dismissDialog();
var image = await (_picker.pickImage(source: ImageSource.gallery) as FutureOr<XFile>);
cropImage(image);
}
void init() {
imagePicker = new ImagePickerDialog(this, _controller);
imagePicker.initState();
}
Future cropImage(XFile image) async {
File? croppedFile = await ImageCropper.cropImage(
sourcePath: image.path,
maxWidth: 512,
maxHeight: 512,
);
_listener.userImage(croppedFile);
}
showDialog(BuildContext context) {
imagePicker.getImage(context);
}
}
abstract class ImagePickerListener {
userImage(File? _image);
}
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.i want to 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,
}
Maybe you should add this line to setState block also.
if (croppedFile != null) {
//imageFile = croppedFile;
setState(() {
imageFile = croppedFile; //to here
state = AppState.cropped;
});
}
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),
I am trying to crop an image from picked image from gallery, the image is picked perfectly but while trying to crop an image it seems nothing happened in the screen, and some problem detected in console though I can't understand the problem. the code I have used is from official pub.dev site [https://pub.dev/packages/image_cropper/example]
My Task is : pick and crop an image for
Help me to Resolve this Problem, Thanks in Advance.
The Code:
....
class _EditGalleryScreenState extends State<EditGalleryScreen> {
File imageFile;
List _galleries = new List();
#override
void initState() {
.....
}
....
//SOME API CALLS
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Gallery"),
),
body: _galleries.isNotEmpty
? GridView.builder(/* DIAPLYING LIST OF IMAGES FROM API CALL */)
: SizedBox(),
//BUTTON TO TRIGGER IMAGE PICKER
floatingActionButton: FloatingActionButton(
tooltip: "Add Image",
onPressed: () {
_pickImage();
},
child: Icon(Icons.add_a_photo),
backgroundColor: AppColors.PRIMARY_COLOR,
),
);
}
Future<Null> _pickImage() async {
// imageFile = await ImagePicker.pickImage(source: ImageSource.gallery); // this was deprecated so i have updated to otherone
PickedFile imageFile = await ImagePicker().getImage(
source: ImageSource.gallery,
maxWidth: 500,
maxHeight: 500,
imageQuality: 20);
if (imageFile != null) {
setState(() {
state = AppState.picked;
debugPrint("Image Picked and State Changed");
_cropImage();//calling CROP FUNCTION
});
}
}
Future<Null> _cropImage() async {
debugPrint("Crop Image Called");
File 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;
});
}
}
}
Screen Shot of Console
I want to allow the user to crop the Image he chose from the image picker and save it(Similar to uploading profile pic on Whatsapp). How can I do this in flutter?
Sample Image:
You can use these 2 flutter libraries to achieve this,
image_picker;
image_cropper
The image picker use the native libraries in iOS and Android to achieve it, therefore it will delivery a good performance way.
Here is a sample available in image_picker:
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';
void main() => runApp(new ConfigScreen());
class ConfigScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ImageCropper',
theme: ThemeData.light().copyWith(primaryColor: Colors.deepOrange),
home: MyHomePage(
title: 'ImageCropper',
),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
MyHomePage({this.title});
#override
_MyHomePageState createState() => _MyHomePageState();
}
enum AppState {
free,
picked,
cropped,
}
class _MyHomePageState extends State<MyHomePage> {
AppState state;
File imageFile;
#override
void initState() {
super.initState();
state = AppState.free;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: imageFile != null ? Image.file(imageFile) : Container(),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.deepOrange,
onPressed: () {
if (state == AppState.free)
_pickImage();
else if (state == AppState.picked)
_cropImage();
else if (state == AppState.cropped) _clearImage();
},
child: _buildButtonIcon(),
),
);
}
Widget _buildButtonIcon() {
if (state == AppState.free)
return Icon(Icons.add);
else if (state == AppState.picked)
return Icon(Icons.crop);
else if (state == AppState.cropped)
return Icon(Icons.clear);
else
return Container();
}
Future<Null> _pickImage() async {
imageFile = await ImagePicker.pickImage(source: ImageSource.gallery);
if (imageFile != null) {
setState(() {
state = AppState.picked;
});
}
}
Future<Null> _cropImage() async {
File 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;
});
}
}
void _clearImage() {
imageFile = null;
setState(() {
state = AppState.free;
});
}
}
The image_picker already can crop the image. You pass in the specified width and height for the image you want and the plugin actually crops the original image.
_imageFile = ImagePicker.pickImage(source: source, maxWidth: 200.0, maxHeight: 300.0);
What you are asking for is another plugin to crop images after one has been selected and that would be outside the scope of the image_picker.
I am facing something similar and you can always have the user edit the photo or video with the built in camera app until there is a plugin made for cropping images.
For cropping images on the UI level you can do something like this:
https://stackoverflow.com/a/44665742/7303311
To crop the image from image_cropper library you case just set the
aspectRatio: CropAspectRatio(ratioX: 1, ratioY: 1)
Here's the sample code:
CroppedFile? croppedFile = await ImageCropper().cropImage(
sourcePath: pickedImage.path,
aspectRatio: imagePickingType == ImagePickingType.profilePic ? CropAspectRatio(ratioX: 1, ratioY: 1) :
imagePickingType == ImagePickingType.communityWall ? CropAspectRatio(ratioX: 16, ratioY: 9) : null,
uiSettings: [
AndroidUiSettings(
toolbarTitle: cropPageTitle ?? 'Edit Image',
toolbarColor: toolbarTextColor ??
theme.scaffoldBackgroundColor,
toolbarWidgetColor: toolbarBackgroundColor ??
theme.primaryColor,
initAspectRatio:
initialAspectRation ?? CropAspectRatioPreset.original,
lockAspectRatio: (imagePickingType == ImagePickingType.profilePic) || (imagePickingType == ImagePickingType.communityWall),
backgroundColor: theme.scaffoldBackgroundColor,
activeControlsWidgetColor: theme.primaryColor,
),
IOSUiSettings(
title: cropPageTitle ?? 'Edit Image',
rotateClockwiseButtonHidden: true,
aspectRatioPickerButtonHidden: true,
aspectRatioLockEnabled: (imagePickingType == ImagePickingType.profilePic) || (imagePickingType == ImagePickingType.communityWall),
rotateButtonsHidden: true,
),
],
);
if (croppedFile != null) {
return File(croppedFile.path);
} else {
File(pickedImage.path);
}