mirror of
https://github.com/Iconica-Development/flutter_image_picker.git
synced 2025-05-18 19:53:45 +02:00
Merge pull request #10 from Iconica-Development/feature/config-for-setting-size-and-quality
feat: ImagePickerConfig for setting image size and quality
This commit is contained in:
commit
20814755cc
4 changed files with 107 additions and 75 deletions
|
@ -6,4 +6,5 @@ library flutter_image_picker;
|
||||||
|
|
||||||
export 'src/services/image_picker_service.dart';
|
export 'src/services/image_picker_service.dart';
|
||||||
export 'src/models/image_picker_theme.dart';
|
export 'src/models/image_picker_theme.dart';
|
||||||
|
export 'src/models/image_picker_config.dart';
|
||||||
export 'src/ui/image_picker.dart';
|
export 'src/ui/image_picker.dart';
|
||||||
|
|
20
lib/src/models/image_picker_config.dart
Normal file
20
lib/src/models/image_picker_config.dart
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
class ImagePickerConfig {
|
||||||
|
/// The [ImagePickerConfig] is used to configure the [ImagePicker].
|
||||||
|
const ImagePickerConfig({
|
||||||
|
this.maxWidth,
|
||||||
|
this.maxHeight,
|
||||||
|
this.imageQuality,
|
||||||
|
});
|
||||||
|
|
||||||
|
/// If specified, the image will be at most `maxWidth` wide and
|
||||||
|
/// `maxHeight` tall. Otherwise the image will be returned at it's
|
||||||
|
/// original width and height.
|
||||||
|
/// The `imageQuality` argument modifies the quality of the image, ranging from 0-100
|
||||||
|
/// where 100 is the original/max quality. If `imageQuality` is null, the image with
|
||||||
|
/// the original quality will be returned. Compression is only supported for certain
|
||||||
|
/// image types such as JPEG and on Android PNG and WebP, too. If compression is not supported for the image that is picked,
|
||||||
|
/// a warning message will be logged.
|
||||||
|
final double? maxWidth;
|
||||||
|
final double? maxHeight;
|
||||||
|
final int? imageQuality;
|
||||||
|
}
|
|
@ -3,7 +3,7 @@
|
||||||
// SPDX-License-Identifier: BSD-3-Clause
|
// SPDX-License-Identifier: BSD-3-Clause
|
||||||
|
|
||||||
import 'dart:typed_data';
|
import 'dart:typed_data';
|
||||||
|
import 'package:flutter_image_picker/src/models/image_picker_config.dart';
|
||||||
import 'package:image_picker/image_picker.dart';
|
import 'package:image_picker/image_picker.dart';
|
||||||
|
|
||||||
/// The Image Picker Service class is the functionality of the Image Picker package which uses the Image Picker package to choose an image.
|
/// The Image Picker Service class is the functionality of the Image Picker package which uses the Image Picker package to choose an image.
|
||||||
|
@ -11,7 +11,10 @@ import 'package:image_picker/image_picker.dart';
|
||||||
abstract class ImagePickerService {
|
abstract class ImagePickerService {
|
||||||
/// [pickImage] is the function that picks the image and returns it as a [Uint8List].
|
/// [pickImage] is the function that picks the image and returns it as a [Uint8List].
|
||||||
/// The function requires [source], an [ImageSource]
|
/// The function requires [source], an [ImageSource]
|
||||||
Future<Uint8List?> pickImage(ImageSource source);
|
Future<Uint8List?> pickImage(
|
||||||
|
ImageSource source, {
|
||||||
|
ImagePickerConfig? config,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/// The ImagePickerServiceDefault is the default implementation of the ImagePickerService.
|
/// The ImagePickerServiceDefault is the default implementation of the ImagePickerService.
|
||||||
|
@ -25,10 +28,15 @@ class ImagePickerServiceDefault implements ImagePickerService {
|
||||||
/// [pickImage] is the function that picks the image and returns it as a [Uint8List].
|
/// [pickImage] is the function that picks the image and returns it as a [Uint8List].
|
||||||
/// The function requires [source], an [ImageSource] that's the method of how the image needs to be picked, for example gallery or camera.
|
/// The function requires [source], an [ImageSource] that's the method of how the image needs to be picked, for example gallery or camera.
|
||||||
@override
|
@override
|
||||||
Future<Uint8List?> pickImage(ImageSource source) async {
|
Future<Uint8List?> pickImage(
|
||||||
var image =
|
ImageSource source, {
|
||||||
await (await (imagePicker ?? ImagePicker()).pickImage(source: source))
|
ImagePickerConfig? config,
|
||||||
?.readAsBytes();
|
}) async =>
|
||||||
return image;
|
await (await (imagePicker ?? ImagePicker()).pickImage(
|
||||||
}
|
source: source,
|
||||||
|
maxWidth: config?.maxWidth,
|
||||||
|
maxHeight: config?.maxHeight,
|
||||||
|
imageQuality: config?.imageQuality,
|
||||||
|
))
|
||||||
|
?.readAsBytes();
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,18 +3,18 @@
|
||||||
// SPDX-License-Identifier: BSD-3-Clause
|
// SPDX-License-Identifier: BSD-3-Clause
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_image_picker/src/services/image_picker_service.dart';
|
import 'package:flutter_image_picker/flutter_image_picker.dart';
|
||||||
import 'package:image_picker/image_picker.dart';
|
import 'package:image_picker/image_picker.dart';
|
||||||
|
|
||||||
import '../models/image_picker_theme.dart';
|
/// The Image Picker class generates the Image Picker Widget which can be displayed in your application. If you call the class you can give it 4 optional variables:
|
||||||
|
|
||||||
/// The Image Picker class generates the Image Picker Widget which can be displayed in your application. If you call the class you can give it 3 optional variables:
|
|
||||||
/// The first one is the [ImagePickerTheme] which can be used to change the UI of the widget.
|
/// The first one is the [ImagePickerTheme] which can be used to change the UI of the widget.
|
||||||
/// The second one is your own implementation of the ImagePickerService. Which can be used in testing for example.
|
/// The second one is the [ImagePickerConfig] which can be used to configure the behaviour of the image picker.
|
||||||
/// The third one is a custom Button widget.
|
/// The third one is your own implementation of the ImagePickerService. Which can be used in testing for example.
|
||||||
|
/// The fourth one is a custom Button widget.
|
||||||
class ImagePicker extends StatelessWidget {
|
class ImagePicker extends StatelessWidget {
|
||||||
const ImagePicker({
|
const ImagePicker({
|
||||||
this.imagePickerTheme = const ImagePickerTheme(),
|
this.imagePickerTheme = const ImagePickerTheme(),
|
||||||
|
this.imagePickerConfig = const ImagePickerConfig(),
|
||||||
this.imagePickerService,
|
this.imagePickerService,
|
||||||
this.customButton,
|
this.customButton,
|
||||||
super.key,
|
super.key,
|
||||||
|
@ -23,6 +23,9 @@ class ImagePicker extends StatelessWidget {
|
||||||
/// ImagePickerTheme can be used to change the UI of the Image Picker Widget to change the text/icons to your liking.
|
/// ImagePickerTheme can be used to change the UI of the Image Picker Widget to change the text/icons to your liking.
|
||||||
final ImagePickerTheme imagePickerTheme;
|
final ImagePickerTheme imagePickerTheme;
|
||||||
|
|
||||||
|
/// ImagePickerConfig can be used to define the size and quality for the uploaded image.
|
||||||
|
final ImagePickerConfig imagePickerConfig;
|
||||||
|
|
||||||
/// The Image Picker Dialog can have a custom button if you want to.
|
/// The Image Picker Dialog can have a custom button if you want to.
|
||||||
final Widget? customButton;
|
final Widget? customButton;
|
||||||
|
|
||||||
|
@ -32,74 +35,75 @@ class ImagePicker extends StatelessWidget {
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return SingleChildScrollView(
|
return SingleChildScrollView(
|
||||||
child: Column(
|
child: Column(
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
ListTile(
|
ListTile(
|
||||||
tileColor: imagePickerTheme.titleBackgroundColor,
|
tileColor: imagePickerTheme.titleBackgroundColor,
|
||||||
title: Text(
|
title: Text(
|
||||||
textAlign: imagePickerTheme.titleAlignment,
|
textAlign: imagePickerTheme.titleAlignment,
|
||||||
imagePickerTheme.title,
|
imagePickerTheme.title,
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontFamily: imagePickerTheme.font,
|
fontFamily: imagePickerTheme.font,
|
||||||
fontSize: imagePickerTheme.titleTextSize,
|
fontSize: imagePickerTheme.titleTextSize,
|
||||||
color: imagePickerTheme.titleColor,
|
color: imagePickerTheme.titleColor,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
const SizedBox(height: 20),
|
||||||
const SizedBox(
|
Row(
|
||||||
height: 20,
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
),
|
children: [
|
||||||
Row(
|
_generateIconButtonWithText(
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
|
||||||
children: [
|
|
||||||
_generateIconButtonWithText(
|
|
||||||
context,
|
context,
|
||||||
imagePickerTheme.selectImageIcon,
|
imagePickerTheme.selectImageIcon,
|
||||||
imagePickerTheme,
|
imagePickerTheme,
|
||||||
Icons.image,
|
Icons.image,
|
||||||
ImageSource.gallery,
|
ImageSource.gallery,
|
||||||
imagePickerTheme.selectImageText),
|
imagePickerTheme.selectImageText,
|
||||||
SizedBox(
|
),
|
||||||
width: imagePickerTheme.spaceBetweenIcons,
|
SizedBox(
|
||||||
),
|
width: imagePickerTheme.spaceBetweenIcons,
|
||||||
_generateIconButtonWithText(
|
),
|
||||||
|
_generateIconButtonWithText(
|
||||||
context,
|
context,
|
||||||
imagePickerTheme.makePhotoIcon,
|
imagePickerTheme.makePhotoIcon,
|
||||||
imagePickerTheme,
|
imagePickerTheme,
|
||||||
Icons.camera_alt_rounded,
|
Icons.camera_alt_rounded,
|
||||||
ImageSource.camera,
|
ImageSource.camera,
|
||||||
imagePickerTheme.makePhotoText),
|
imagePickerTheme.makePhotoText,
|
||||||
],
|
),
|
||||||
),
|
],
|
||||||
const SizedBox(
|
),
|
||||||
height: 10,
|
const SizedBox(height: 10),
|
||||||
),
|
Row(
|
||||||
Row(
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
children: [
|
||||||
children: [
|
SizedBox(
|
||||||
SizedBox(
|
width: imagePickerTheme.closeButtonWidth,
|
||||||
width: imagePickerTheme.closeButtonWidth,
|
height: imagePickerTheme.closeButtonHeight,
|
||||||
height: imagePickerTheme.closeButtonHeight,
|
child: customButton ??
|
||||||
child: customButton ??
|
ElevatedButton(
|
||||||
ElevatedButton(
|
|
||||||
style: ElevatedButton.styleFrom(
|
style: ElevatedButton.styleFrom(
|
||||||
backgroundColor:
|
backgroundColor:
|
||||||
imagePickerTheme.closeButtonBackgroundColor),
|
imagePickerTheme.closeButtonBackgroundColor,
|
||||||
|
),
|
||||||
onPressed: () => Navigator.of(context).pop(),
|
onPressed: () => Navigator.of(context).pop(),
|
||||||
child: Text(imagePickerTheme.closeButtonText,
|
child: Text(
|
||||||
style: TextStyle(
|
imagePickerTheme.closeButtonText,
|
||||||
fontFamily: imagePickerTheme.font,
|
style: TextStyle(
|
||||||
fontSize: imagePickerTheme.closeButtonTextSize,
|
fontFamily: imagePickerTheme.font,
|
||||||
color: imagePickerTheme.closeButtonTextColor,
|
fontSize: imagePickerTheme.closeButtonTextSize,
|
||||||
))),
|
color: imagePickerTheme.closeButtonTextColor,
|
||||||
)
|
),
|
||||||
],
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(
|
)
|
||||||
height: (30),
|
],
|
||||||
),
|
),
|
||||||
],
|
const SizedBox(height: 30),
|
||||||
));
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/// The [_generateIconButtonWithText] function returns a column that includes an [IconButton] and [Text].
|
/// The [_generateIconButtonWithText] function returns a column that includes an [IconButton] and [Text].
|
||||||
|
@ -125,7 +129,7 @@ class ImagePicker extends StatelessWidget {
|
||||||
final navigator = Navigator.of(context);
|
final navigator = Navigator.of(context);
|
||||||
var image =
|
var image =
|
||||||
await (imagePickerService ?? ImagePickerServiceDefault())
|
await (imagePickerService ?? ImagePickerServiceDefault())
|
||||||
.pickImage(imageSource);
|
.pickImage(imageSource, config: imagePickerConfig);
|
||||||
navigator.pop(image);
|
navigator.pop(image);
|
||||||
},
|
},
|
||||||
child: customIcon ??
|
child: customIcon ??
|
||||||
|
@ -138,13 +142,12 @@ class ImagePicker extends StatelessWidget {
|
||||||
Text(
|
Text(
|
||||||
bottomText,
|
bottomText,
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontFamily: imagePickerTheme.font,
|
fontFamily: imagePickerTheme.font,
|
||||||
fontSize: imagePickerTheme.iconTextSize,
|
fontSize: imagePickerTheme.iconTextSize,
|
||||||
color: imagePickerTheme.textColor),
|
color: imagePickerTheme.textColor,
|
||||||
),
|
),
|
||||||
const SizedBox(
|
|
||||||
height: 20,
|
|
||||||
),
|
),
|
||||||
|
const SizedBox(height: 20),
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue