Merge pull request #3 from Iconica-Development/v0.0.3

v0.0.3
This commit is contained in:
Gorter-dev 2022-09-06 14:44:03 +02:00 committed by GitHub
commit d17b318220
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 76 additions and 16 deletions

View file

@ -1,3 +1,17 @@
## 0.0.1 - September 5th 2022 ## 0.0.1 - September 5th 2022
- Initial release - 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 | | 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. | | 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. | | titleTextSize | The font size of the title mentioned above. |
| iconSize | The size of the icons that are visible in the Image Picker Dialog. | | 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. | | 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. | | 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. | | 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. | | 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. | | 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. | | 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 ## Issues

View file

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

View file

@ -3,9 +3,12 @@ import 'package:flutter/material.dart';
class ImagePickerTheme { class ImagePickerTheme {
/// The [ImagePickerTheme] is used to style the [ImagePicker]. /// The [ImagePickerTheme] is used to style the [ImagePicker].
const ImagePickerTheme( const ImagePickerTheme({
{this.title = "Upload Image", this.font = "Roboto",
this.title = "Upload Image",
this.titleTextSize = 20, this.titleTextSize = 20,
this.textColor = Colors.black,
this.iconColor = Colors.black,
this.iconSize = 125, this.iconSize = 125,
this.iconTextSize = 15, this.iconTextSize = 15,
this.spaceBetweenIcons = 30, this.spaceBetweenIcons = 30,
@ -14,8 +17,15 @@ class ImagePickerTheme {
this.selectImageIcon = Icons.image, this.selectImageIcon = Icons.image,
this.selectImageText = "Select File", this.selectImageText = "Select File",
this.closeButtonText = "Close", this.closeButtonText = "Close",
this.closeButtonTextSize = 15,
this.closeButtonTextColor = Colors.white,
this.closeButtonWidth = 300, 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. /// The title displayed at the top of the Image Picker Dialog.
final String title; final String title;
@ -23,6 +33,12 @@ class ImagePickerTheme {
/// The font size of the title mentioned above. /// The font size of the title mentioned above.
final double titleTextSize; 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. /// The size of the icons that are visible in the Image Picker Dialog.
final double iconSize; 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. /// The text that is shown on the 'Close Dialog' button at the bottom of the Image Picker Dialog.
final String closeButtonText; 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. /// The width of the 'Close Dialog' button at the bottom of the Image Picker Dialog.
final double closeButtonWidth; final double closeButtonWidth;
/// The height of the 'Close Dialog' button at the bottom of the Image Picker Dialog. /// The height of the 'Close Dialog' button at the bottom of the Image Picker Dialog.
final double closeButtonHeight; 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( title: Text(
imagePickerTheme.title, imagePickerTheme.title,
style: TextStyle( style: TextStyle(
fontFamily: imagePickerTheme.font,
fontSize: imagePickerTheme.titleTextSize, fontSize: imagePickerTheme.titleTextSize,
color: imagePickerTheme.textColor,
), ),
), ),
), ),
@ -60,8 +62,16 @@ class ImagePicker extends StatelessWidget {
width: imagePickerTheme.closeButtonWidth, width: imagePickerTheme.closeButtonWidth,
height: imagePickerTheme.closeButtonHeight, height: imagePickerTheme.closeButtonHeight,
child: ElevatedButton( child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor:
imagePickerTheme.closeButtonBackgroundColor),
onPressed: () => Navigator.of(context).pop(), 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), key: Key(bottomText),
icon: Icon(icon), icon: Icon(icon),
iconSize: imagePickerTheme.iconSize, iconSize: imagePickerTheme.iconSize,
color: imagePickerTheme.iconColor,
onPressed: () async { onPressed: () async {
final navigator = Navigator.of(context); final navigator = Navigator.of(context);
var image = await (imagePickerService ?? ImagePickerService()) var image = await (imagePickerService ?? ImagePickerService())
@ -101,7 +112,10 @@ class ImagePicker extends StatelessWidget {
), ),
Text( Text(
bottomText, bottomText,
style: TextStyle(fontSize: imagePickerTheme.iconTextSize), style: TextStyle(
fontFamily: imagePickerTheme.font,
fontSize: imagePickerTheme.iconTextSize,
color: imagePickerTheme.textColor),
), ),
const SizedBox( const SizedBox(
height: 20, height: 20,