lots of refactors

This commit is contained in:
commitimpush 2022-09-01 16:44:53 +02:00
parent 4a2161084d
commit a05ede7793
5 changed files with 66 additions and 109 deletions

View file

@ -38,7 +38,6 @@ class ImagePickerExampleHomePage extends StatefulWidget {
class _ImagePickerExampleHomePageState
extends State<ImagePickerExampleHomePage> {
Uint8List? image;
final ImagePicker imagePicker = ImagePicker();
final double whiteSpace = 20;
final double imageWidth = 300;
final String placeholder = 'assets/images/placeholder.png';
@ -89,18 +88,15 @@ class _ImagePickerExampleHomePageState
}
/// The [pickImage] function is used to show the usage of the Image Picker Package.
/// The most important part is the [showImagePickerDialog] function call.
/// The only required parameter is the [context] of the application.
/// There are multiple optional parameters that can be included to customize the Image Picker Dialog.
/// You can add an optional parameter by for example adding [title: "Image Picker"] to the function call after the context parameter.
/// Check the README for all possible optional parameters you can add.
/// The most important part is the [ImagePicker] call.
/// You can add a custom [ImagePickerTheme] to it if you want to change some of the UI.
/// You can do that by adding [imagePickerTheme: const ImagePickerTheme()] in the [ImagePicker] in the builder.
/// Check the README for all possible parameters you can add in the [ImagePickerTheme].
/// This function saves the image in a variable and if it's different than the current image it will get displayed in the application.
/// When the same image is chosen there will be a snackbar popping up to let you know it's already being displayed.
void pickImage() async {
Uint8List? imageInBytes = await showModalBottomSheet<Uint8List?>(
context: context,
builder: (BuildContext context) =>
imagePicker.showImagePickerDialog(context));
context: context, builder: (BuildContext context) => ImagePicker());
if (imageInBytes != null) {
if (!listEquals(image, imageInBytes)) {
setState(() {

View file

@ -1,49 +1,4 @@
import 'dart:typed_data';
import 'package:flutter/cupertino.dart';
library flutter_image_picker;
import 'src/models/image_picker_settings.dart';
import 'src/ui/image_picker_ui.dart';
class ImagePicker {
/// [showImagePickerDialog] is the function that gets called by the user of the package.
/// With this function the Image Picker Dialog gets shown and can be used to pick an image.
/// The image gets returned as a [Uint8List] and can be used in the application.
/// It can also return null when there is no image selected.
/// The function has one required parameter and multiple optional parameters to customize the Image Picker Dialog.
/// The only required parameter is [context] which is the [BuildContext] of the application.
/// Then you can give the following optional parameters to customize the Image Picker Dialog:
/// [title] expects a [String] that is used as the title of the Image Picker Dialog and will be showed at the top of it.
/// [titleTextSize] is the font size of the [title].
/// [iconSize] is the size of each icon shown in the Image Picker Dialog.
/// [iconTextSize] is the size of the text that's show underneath the icon.
/// [spaceBetweenIcons] is the size of the space that's between the two icons in the Image Picker Dialog.
/// [makePhotoIcon] is the icon as [IconData] that's shown for the make photo button of the Image Picker Dialog.
/// [makePhotoText] is the text that's shown underneath the make photo button in the Image Picker Dialog.
/// [selectImageIcon] is the icon as [IconData] that's shown for the select image button of the Image Picker Dialog.
/// [selectImageText] is the text that's shown underneath the select image button in the Image Picker Dialog.
/// [closeButtonText] is the text that's shown on the close dialog button on the bottom of the Image Picker Dialog.
Widget showImagePickerDialog(BuildContext context,
{String title = ImagePickerDefaultParameters.title,
double titleTextSize = ImagePickerDefaultParameters.titleTextSize,
double iconSize = ImagePickerDefaultParameters.iconSize,
double iconTextSize = ImagePickerDefaultParameters.iconTextSize,
double spaceBetweenIcons = ImagePickerDefaultParameters.spaceBetweenIcons,
IconData makePhotoIcon = ImagePickerDefaultParameters.makePhotoIcon,
String makePhotoText = ImagePickerDefaultParameters.makePhotoText,
IconData selectImageIcon = ImagePickerDefaultParameters.selectImageIcon,
String selectImageText = ImagePickerDefaultParameters.selectImageText,
String closeButtonText = ImagePickerDefaultParameters.closeButtonText}) {
return ImagePickerUI().pickImageDialog(
context,
title,
titleTextSize,
iconSize,
iconTextSize,
spaceBetweenIcons,
makePhotoIcon,
makePhotoText,
selectImageIcon,
selectImageText,
closeButtonText);
}
}
export 'src/models/image_picker_theme.dart';
export 'src/ui/image_picker_ui.dart';

View file

@ -1,16 +0,0 @@
import 'package:flutter/material.dart';
/// Default values for all the possible optional parameters to be included in the function call when opening the Image Picker Dialog.
/// When the function call has no optional parameters included these values will be used.
class ImagePickerDefaultParameters {
static const String title = "Upload Image";
static const double titleTextSize = 20;
static const double iconSize = 125;
static const double iconTextSize = 15;
static const double spaceBetweenIcons = 30;
static const IconData makePhotoIcon = Icons.camera_alt_rounded;
static const String makePhotoText = "Take a Picture";
static const IconData selectImageIcon = Icons.image;
static const String selectImageText = "Select File";
static const String closeButtonText = "Close";
}

View file

@ -0,0 +1,28 @@
import 'package:flutter/material.dart';
class ImagePickerTheme {
/// The [ImagePickerTheme] is used to style the [ImagePicker].
const ImagePickerTheme(
{this.title = "Upload Image",
this.titleTextSize = 20,
this.iconSize = 125,
this.iconTextSize = 15,
this.spaceBetweenIcons = 30,
this.makePhotoIcon = Icons.camera_alt_rounded,
this.makePhotoText = "Take a Picture",
this.selectImageIcon = Icons.image,
this.selectImageText = "Select File",
this.closeButtonText = "Close"});
final String title;
final double titleTextSize;
final double iconSize;
final double iconTextSize;
final double spaceBetweenIcons;
final IconData makePhotoIcon;
final String makePhotoText;
final IconData selectImageIcon;
final String selectImageText;
final String closeButtonText;
}

View file

@ -1,51 +1,47 @@
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter_image_picker/src/services/image_picker_service.dart';
import 'package:image_picker/image_picker.dart';
class ImagePickerUI {
import '../models/image_picker_theme.dart';
class ImagePicker extends StatelessWidget {
ImagePicker({Key? key, this.imagePickerTheme = const ImagePickerTheme()})
: super(key: key);
final ImagePickerTheme imagePickerTheme;
final ImagePickerService _imagePickerService = ImagePickerService();
/// [pickImageDialog] returns a [ModalBottomSheet] widget that displays two icons.
/// When clicked on the left icon the user can pick an image from their documents on their phone.
/// When clicked on the right icon the user can make a photo with the camera on their phone.
/// The function gets all the parameters from the [image_picker] class where a function provides them all.
/// See that function for a description of each parameter.
/// The [pickImageDialog] function can return a [Uint8List] that is the picked image as a bytes list.
/// It can also return null when no image gets chosen.
Widget pickImageDialog(
BuildContext context,
String title,
double titleTextSize,
double iconSize,
double iconTextSize,
double spaceBetweenIcons,
IconData makePhotoIcon,
String makePhotoText,
IconData selectImageIcon,
String selectImageText,
String closeButtonText) {
@override
Widget build(BuildContext context) {
return Wrap(
children: <Widget>[
ListTile(
title: Text(
title,
imagePickerTheme.title,
style: TextStyle(
fontSize: titleTextSize,
fontSize: imagePickerTheme.titleTextSize,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_generateIconButtonWithText(context, selectImageIcon, iconSize,
iconTextSize, ImageSource.gallery, selectImageText),
_generateIconButtonWithText(
context,
imagePickerTheme,
imagePickerTheme.selectImageIcon,
ImageSource.gallery,
imagePickerTheme.selectImageText),
SizedBox(
width: spaceBetweenIcons,
width: imagePickerTheme.spaceBetweenIcons,
),
_generateIconButtonWithText(context, makePhotoIcon, iconSize,
iconTextSize, ImageSource.camera, makePhotoText),
_generateIconButtonWithText(
context,
imagePickerTheme,
imagePickerTheme.makePhotoIcon,
ImageSource.camera,
imagePickerTheme.makePhotoText),
],
),
Row(
@ -56,7 +52,7 @@ class ImagePickerUI {
height: 40,
child: ElevatedButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(closeButtonText)),
child: Text(imagePickerTheme.closeButtonText)),
)
],
),
@ -70,16 +66,14 @@ class ImagePickerUI {
/// The [_generateIconButtonWithText] function returns a column that includes an [IconButton] and [Text].
/// The function requires the following parameters to be able to generate an icon with text:
/// [context] The build context that is required to make the [pickImage] function in [_imagePickerService] work.
/// [imagePickerTheme] The ImagePickerTheme that includes all default values for the Image Picker Dialog.
/// [icon] The icon that needs to be displayed, requires an [IconData] as value to be used.
/// [iconSize] The size of the icon.
/// [iconTextSize] The size of the text that's displayed underneath the icon.
/// [imageSource] The type of [ImageSource] to be used to pick an image when pressed on the icon.
/// [bottomText] The text that's displayed underneath the icon.
Column _generateIconButtonWithText(
BuildContext context,
ImagePickerTheme imagePickerTheme,
IconData icon,
double iconSize,
double iconTextSize,
ImageSource imageSource,
String bottomText) {
return Column(
@ -88,7 +82,7 @@ class ImagePickerUI {
IconButton(
key: Key(bottomText),
icon: Icon(icon),
iconSize: iconSize,
iconSize: imagePickerTheme.iconSize,
onPressed: () async {
var image = await _imagePickerService.pickImage(imageSource);
Navigator.of(context).pop(image);
@ -96,7 +90,7 @@ class ImagePickerUI {
),
Text(
bottomText,
style: TextStyle(fontSize: iconTextSize),
style: TextStyle(fontSize: imagePickerTheme.iconTextSize),
),
const SizedBox(
height: 20,