From a05ede779350e2ea0fd0db2e08c2f56e95914372 Mon Sep 17 00:00:00 2001 From: commitimpush Date: Thu, 1 Sep 2022 16:44:53 +0200 Subject: [PATCH] lots of refactors --- example/lib/main.dart | 14 ++--- lib/image_picker.dart | 51 ++---------------- lib/src/models/image_picker_settings.dart | 16 ------ lib/src/models/image_picker_theme.dart | 28 ++++++++++ lib/src/ui/image_picker_ui.dart | 66 +++++++++++------------ 5 files changed, 66 insertions(+), 109 deletions(-) delete mode 100644 lib/src/models/image_picker_settings.dart create mode 100644 lib/src/models/image_picker_theme.dart diff --git a/example/lib/main.dart b/example/lib/main.dart index 1a7255e..bab28ee 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -38,7 +38,6 @@ class ImagePickerExampleHomePage extends StatefulWidget { class _ImagePickerExampleHomePageState extends State { 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( - context: context, - builder: (BuildContext context) => - imagePicker.showImagePickerDialog(context)); + context: context, builder: (BuildContext context) => ImagePicker()); if (imageInBytes != null) { if (!listEquals(image, imageInBytes)) { setState(() { diff --git a/lib/image_picker.dart b/lib/image_picker.dart index 75798e5..8689bbd 100644 --- a/lib/image_picker.dart +++ b/lib/image_picker.dart @@ -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'; diff --git a/lib/src/models/image_picker_settings.dart b/lib/src/models/image_picker_settings.dart deleted file mode 100644 index 6bb1109..0000000 --- a/lib/src/models/image_picker_settings.dart +++ /dev/null @@ -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"; -} diff --git a/lib/src/models/image_picker_theme.dart b/lib/src/models/image_picker_theme.dart new file mode 100644 index 0000000..dbe9253 --- /dev/null +++ b/lib/src/models/image_picker_theme.dart @@ -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; +} diff --git a/lib/src/ui/image_picker_ui.dart b/lib/src/ui/image_picker_ui.dart index 44bda76..64ed1fc 100644 --- a/lib/src/ui/image_picker_ui.dart +++ b/lib/src/ui/image_picker_ui.dart @@ -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: [ 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,