Merge pull request #4 from Iconica-Development/v0.0.4

added more customization options

README.md

@@ -23,9 +23,12 @@ As a whole you get `ImagePicker(ImagePickerTheme(imagePickerTheme: const ImagePi
 |-------------------|----------------|
 |       font        | The font that is being used in the Image Picker Dialog. |
 |       title       | The title displayed at the top of the Image Picker Dialog. |
+|   titleTextSize   | The font size of the title mentioned above. |
+|     titleColor    | The color of the title text. |
+| titleBackgroundColor | The color of the title background. |
+|   titleAlignment  | The alignment of the title text. |
 |     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. |
 | spaceBetweenIcons | The size of the space between the two icons in the Image Picker Dialog. |

example/lib/main.dart

@@ -1,12 +1,28 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_image_picker/flutter_image_picker.dart';
+import 'package:flutter_image_picker_example/button.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-final imageProvider = StateProvider.autoDispose<Uint8List?>((ref) {
+final imageProvider =
-  return null;
+    StateNotifierProvider.autoDispose<ImageNotifier, Uint8List?>((ref) {
+  return ImageNotifier();
 });
 
+class ImageNotifier extends StateNotifier<Uint8List?> {
+  ImageNotifier() : super(null);
+
+  Uint8List? image;
+
+  void changeImage(Uint8List newImage) {
+    state = image = newImage;
+  }
+
+  void cleanImage() {
+    state = image = null;
+  }
+}
+
 void main() {
   runApp(const ProviderScope(child: ImagePickerExample()));
 }
@@ -66,7 +82,8 @@ class ImagePickerExampleHomePageState
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
-              Column(children: [
+              ProviderScope(
+                  child: Column(children: [
                 if (imageWatcher == null) ...[
                   Image.asset(
                     placeholder,
@@ -80,7 +97,7 @@ class ImagePickerExampleHomePageState
                     height: imageWidth,
                   )
                 ]
-              ]),
+              ])),
               SizedBox(height: whiteSpace),
               const Text(
                 'Pick an image or make a photo!',
@@ -104,6 +121,7 @@ class ImagePickerExampleHomePageState
   /// An example on how to do that is: ImagePickerTheme(imagePickerTheme: const ImagePickerTheme(title: "Image Picker")).
   /// As a whole you get `ImagePicker(ImagePickerTheme(imagePickerTheme: const ImagePickerTheme(title: "Image Picker")))`
   /// Check the README for all possible parameters you can add in the [ImagePickerTheme].
+  /// You can also add a custom Button as a Widget to the Image Picker Dialog.
   /// 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 {
@@ -113,7 +131,7 @@ class ImagePickerExampleHomePageState
         builder: (BuildContext context) => const ImagePicker());
     if (imageInBytes != null) {
       if (!listEquals(ref.read(imageProvider), imageInBytes)) {
-        ref.read(imageProvider.state).state = imageInBytes;
+        ref.read(imageProvider.notifier).changeImage(imageInBytes);
       } else {
         if (!mounted) return;
         ScaffoldMessenger.of(context).showSnackBar(
@@ -121,5 +139,6 @@ class ImagePickerExampleHomePageState
         );
       }
     }
+    imageInBytes = null;
   }
 }

lib/src/models/image_picker_theme.dart

@@ -7,6 +7,9 @@ class ImagePickerTheme {
     this.font = "Roboto",
     this.title = "Upload Image",
     this.titleTextSize = 20,
+    this.titleColor = Colors.black,
+    this.titleBackgroundColor = Colors.white,
+    this.titleAlignment = TextAlign.left,
     this.textColor = Colors.black,
     this.iconColor = Colors.black,
     this.iconSize = 125,
@@ -33,6 +36,15 @@ class ImagePickerTheme {
   /// The font size of the title mentioned above.
   final double titleTextSize;
 
+  /// The color of the title text.
+  final Color titleColor;
+
+  /// The color of the title background.
+  final Color titleBackgroundColor;
+
+  /// The alignment of the title text.
+  final TextAlign titleAlignment;
+
   /// The color of the icons
   final Color iconColor;
 

lib/src/ui/image_picker.dart

@@ -4,19 +4,24 @@ import 'package:image_picker/image_picker.dart';
 
 import '../models/image_picker_theme.dart';
 
-/// The Image Picker class generates the Image Picker Widget which can be displayed in your application. If you call the class you can give it 2 optional variables:
+/// The Image Picker class generates the Image Picker Widget which can be displayed in your application. If you call the class you can give it 3 optional variables:
 /// The first one is the [ImagePickerTheme] which can be used to change the UI of the widget.
 /// The second one is your own implementation of the ImagePickerService. Which can be used in testing for example.
+/// The third one is a custom Button widget.
 class ImagePicker extends StatelessWidget {
   const ImagePicker(
       {Key? key,
       this.imagePickerTheme = const ImagePickerTheme(),
-      this.imagePickerService})
+      this.imagePickerService,
+      this.customButton})
       : super(key: key);
 
   /// ImagePickerTheme can be used to change the UI of the Image Picker Widget to change the text/icons to your liking.
   final ImagePickerTheme imagePickerTheme;
 
+  /// The Image Picker Dialog can have a custom button if you want to.
+  final StatelessWidget? customButton;
+
   /// The ImagePickerService can be used if you want to use your own implementation of the Image Service if you want to use it for testing or add more features. If null the current implementation will be used.
   final ImagePickerService? imagePickerService;
 
@@ -26,12 +31,14 @@ class ImagePicker extends StatelessWidget {
         child: Wrap(
       children: <Widget>[
         ListTile(
+          tileColor: imagePickerTheme.titleBackgroundColor,
           title: Text(
+            textAlign: imagePickerTheme.titleAlignment,
             imagePickerTheme.title,
             style: TextStyle(
               fontFamily: imagePickerTheme.font,
               fontSize: imagePickerTheme.titleTextSize,
-              color: imagePickerTheme.textColor,
+              color: imagePickerTheme.titleColor,
             ),
           ),
         ),
@@ -61,7 +68,8 @@ class ImagePicker extends StatelessWidget {
             SizedBox(
               width: imagePickerTheme.closeButtonWidth,
               height: imagePickerTheme.closeButtonHeight,
-              child: ElevatedButton(
+              child: customButton ??
+                  ElevatedButton(
                       style: ElevatedButton.styleFrom(
                           backgroundColor:
                               imagePickerTheme.closeButtonBackgroundColor),
@@ -75,8 +83,8 @@ class ImagePicker extends StatelessWidget {
             )
           ],
         ),
-        const SizedBox(
+        SizedBox(
-          height: 60,
+          height: (20 + imagePickerTheme.closeButtonHeight),
         ),
       ],
     ));