new image picker customization options

This commit is contained in:
commitimpush 2022-09-06 14:22:28 +02:00
parent 5a8d1da467
commit c0b129d912
5 changed files with 76 additions and 16 deletions

View file

@ -1,3 +1,17 @@
## 0.0.1 - September 5th 2022
- Initial release
## 0.0.2 - September 6th 2022
- Camera now works in release build of application on Android
## 0.0.3 - September 6th 2022
- More customization options for the Image Picker Dialog added:
- Font
- Text color
- Icon color
- Close Button background color
- Close Button text color
- Close Button text size

View file

@ -21,7 +21,10 @@ As a whole you get `ImagePicker(ImagePickerTheme(imagePickerTheme: const ImagePi
| Parameter | Explaination |
|-------------------|----------------|
| font | The font that is being used in the Image Picker Dialog. |
| title | The title displayed at the top of the Image Picker Dialog. |
| textColor | The color of the text that is displayed in the Image Picker Dialog. |
| iconColor | The color of the icons that are displayed in the Image Picker Dialog. |
| titleTextSize | The font size of the title mentioned above. |
| iconSize | The size of the icons that are visible in the Image Picker Dialog. |
| iconTextSize | The font size of the text underneath the icon buttons. |
@ -31,8 +34,11 @@ As a whole you get `ImagePicker(ImagePickerTheme(imagePickerTheme: const ImagePi
| selectImageIcon | The icon that is displayed for the 'Select Image From Gallery' functionality of the Image Picker Dialog. |
| selectImageText | The text that is displayed underneath the 'Select Image From Gallery' icon. |
| closeButtonText | The text that is shown on the 'Close Dialog' button at the bottom of the Image Picker Dialog. |
| closeButtonTextSize | The size of the text that is being displayed on the 'Close Dialog' button at the bottom of the Image Picker Dialog. |
| closeButtonTextColor | The color of the text that is being displayed on the 'Close Dialog' button at the bottom of the Image Picker Dialog. |
| closeButtonWidth | The width of the 'Close Dialog' button at the bottom of the Image Picker Dialog. |
| closeButtonHeight | The height of the 'Close Dialog' button at the bottom of the Image Picker Dialog. |
| closeButtonBackgroundColor | The background color of the 'Close Dialog' button at the bottom of the Image Picker Dialog. |
## Issues

View file

@ -96,6 +96,7 @@ class _ImagePickerExampleHomePageState
void pickImage() async {
Uint8List? imageInBytes = await showModalBottomSheet<Uint8List?>(
context: context,
backgroundColor: Colors.white,
builder: (BuildContext context) => const ImagePicker());
if (imageInBytes != null) {
if (!listEquals(image, imageInBytes)) {

View file

@ -3,9 +3,12 @@ import 'package:flutter/material.dart';
class ImagePickerTheme {
/// The [ImagePickerTheme] is used to style the [ImagePicker].
const ImagePickerTheme(
{this.title = "Upload Image",
const ImagePickerTheme({
this.font = "Roboto",
this.title = "Upload Image",
this.titleTextSize = 20,
this.textColor = Colors.black,
this.iconColor = Colors.black,
this.iconSize = 125,
this.iconTextSize = 15,
this.spaceBetweenIcons = 30,
@ -14,8 +17,15 @@ class ImagePickerTheme {
this.selectImageIcon = Icons.image,
this.selectImageText = "Select File",
this.closeButtonText = "Close",
this.closeButtonTextSize = 15,
this.closeButtonTextColor = Colors.white,
this.closeButtonWidth = 300,
this.closeButtonHeight = 40});
this.closeButtonHeight = 40,
this.closeButtonBackgroundColor = Colors.black,
});
/// The font that's used in the Image Picker
final String font;
/// The title displayed at the top of the Image Picker Dialog.
final String title;
@ -23,6 +33,12 @@ class ImagePickerTheme {
/// The font size of the title mentioned above.
final double titleTextSize;
/// The color of the icons
final Color iconColor;
/// The color of the text in the Image Picker Dialog
final Color textColor;
/// The size of the icons that are visible in the Image Picker Dialog.
final double iconSize;
@ -47,9 +63,18 @@ class ImagePickerTheme {
/// The text that is shown on the 'Close Dialog' button at the bottom of the Image Picker Dialog.
final String closeButtonText;
/// The fontsize of the text of the close button of the Image Picker Dialog.
final double closeButtonTextSize;
/// The color of the text of the close button of the Image Picker Dialog.
final Color closeButtonTextColor;
/// The width of the 'Close Dialog' button at the bottom of the Image Picker Dialog.
final double closeButtonWidth;
/// The height of the 'Close Dialog' button at the bottom of the Image Picker Dialog.
final double closeButtonHeight;
/// The color of the close button of the Image Picker Dialog.
final Color closeButtonBackgroundColor;
}

View file

@ -29,7 +29,9 @@ class ImagePicker extends StatelessWidget {
title: Text(
imagePickerTheme.title,
style: TextStyle(
fontFamily: imagePickerTheme.font,
fontSize: imagePickerTheme.titleTextSize,
color: imagePickerTheme.textColor,
),
),
),
@ -60,8 +62,16 @@ class ImagePicker extends StatelessWidget {
width: imagePickerTheme.closeButtonWidth,
height: imagePickerTheme.closeButtonHeight,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor:
imagePickerTheme.closeButtonBackgroundColor),
onPressed: () => Navigator.of(context).pop(),
child: Text(imagePickerTheme.closeButtonText)),
child: Text(imagePickerTheme.closeButtonText,
style: TextStyle(
fontFamily: imagePickerTheme.font,
fontSize: imagePickerTheme.closeButtonTextSize,
color: imagePickerTheme.closeButtonTextColor,
))),
)
],
),
@ -92,6 +102,7 @@ class ImagePicker extends StatelessWidget {
key: Key(bottomText),
icon: Icon(icon),
iconSize: imagePickerTheme.iconSize,
color: imagePickerTheme.iconColor,
onPressed: () async {
final navigator = Navigator.of(context);
var image = await (imagePickerService ?? ImagePickerService())
@ -101,7 +112,10 @@ class ImagePicker extends StatelessWidget {
),
Text(
bottomText,
style: TextStyle(fontSize: imagePickerTheme.iconTextSize),
style: TextStyle(
fontFamily: imagePickerTheme.font,
fontSize: imagePickerTheme.iconTextSize,
color: imagePickerTheme.textColor),
),
const SizedBox(
height: 20,