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:
Stein Milder 2022-11-07 14:54:43 +01:00 committed by GitHub
commit 20814755cc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 107 additions and 75 deletions

View file

@ -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';

View 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;
}

View file

@ -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();
} }

View file

@ -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),
], ],
); );
} }