mirror of
https://github.com/Iconica-Development/flutter_image_picker.git
synced 2025-05-18 19:53:45 +02:00
lots of refactors
This commit is contained in:
parent
4a2161084d
commit
a05ede7793
5 changed files with 66 additions and 109 deletions
|
@ -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(() {
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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";
|
||||
}
|
28
lib/src/models/image_picker_theme.dart
Normal file
28
lib/src/models/image_picker_theme.dart
Normal 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;
|
||||
}
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue