diff --git a/CHANGELOG.md b/CHANGELOG.md index 2940b81..43f2d0a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,3 +32,7 @@ ## 1.0.5 - February 7th 2024 - Added CI and linter + +## 2.0.0 - February 22nd 2024 + +- Simplified the ImagePickerTheme diff --git a/lib/src/models/image_picker_theme.dart b/lib/src/models/image_picker_theme.dart index 7432eaf..dfa843d 100644 --- a/lib/src/models/image_picker_theme.dart +++ b/lib/src/models/image_picker_theme.dart @@ -8,59 +8,23 @@ class ImagePickerTheme { /// The [ImagePickerTheme] is used to style the [ImagePicker]. const 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, - this.iconTextSize = 15, this.spaceBetweenIcons = 30, this.makePhotoIcon, this.makePhotoText = 'Take a Picture', this.selectImageIcon, this.selectImageText = 'Select File', - this.closeButtonText = 'Close', - this.closeButtonTextSize = 15, - this.closeButtonTextColor = Colors.white, - this.closeButtonWidth = 300, - this.closeButtonHeight = 40, - this.closeButtonBackgroundColor = Colors.black, + this.iconTextStyle, + this.closeButtonBuilder, }); - /// 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; - - /// 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; - /// 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; - /// The font size of the text underneath the icon buttons. - final double iconTextSize; - /// The size of the space between the two icons in the Image Picker Dialog. final double spaceBetweenIcons; @@ -79,24 +43,7 @@ class ImagePickerTheme { /// icon. final String selectImageText; - /// The text that is shown on the 'Close Dialog' button at the bottom of the - /// Image Picker Dialog. - final String closeButtonText; + final TextStyle? iconTextStyle; - /// 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; + final Widget Function(Function onTap)? closeButtonBuilder; } diff --git a/lib/src/ui/image_picker.dart b/lib/src/ui/image_picker.dart index 4e9b54d..fa8c719 100644 --- a/lib/src/ui/image_picker.dart +++ b/lib/src/ui/image_picker.dart @@ -18,19 +18,19 @@ import 'package:image_picker/image_picker.dart'; /// The fourth one is a custom Button widget. class ImagePicker extends StatelessWidget { const ImagePicker({ - this.imagePickerTheme = const ImagePickerTheme(), - this.imagePickerConfig = const ImagePickerConfig(), - this.imagePickerService, + this.theme = const ImagePickerTheme(), + this.config = const ImagePickerConfig(), + this.service, this.customButton, super.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; + final ImagePickerTheme theme; /// ImagePickerConfig can be used to define the size and quality for the /// uploaded image. - final ImagePickerConfig imagePickerConfig; + final ImagePickerConfig config; /// The Image Picker Dialog can have a custom button if you want to. final Widget? customButton; @@ -38,78 +38,66 @@ class ImagePicker extends StatelessWidget { /// 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; + final ImagePickerService? service; @override Widget build(BuildContext context) => SingleChildScrollView( child: Column( children: [ - ListTile( - tileColor: imagePickerTheme.titleBackgroundColor, - title: Text( - textAlign: imagePickerTheme.titleAlignment, - imagePickerTheme.title, - style: TextStyle( - fontFamily: imagePickerTheme.font, - fontSize: imagePickerTheme.titleTextSize, - color: imagePickerTheme.titleColor, - ), - ), - ), - const SizedBox(height: 20), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ _generateIconButtonWithText( context, - imagePickerTheme.selectImageIcon, - imagePickerTheme, + theme.selectImageIcon, + theme, Icons.image, ImageSource.gallery, - imagePickerTheme.selectImageText, + theme.selectImageText, ), - if (imagePickerConfig.cameraOption ?? true) ...[ + if (config.cameraOption ?? true) ...[ SizedBox( - width: imagePickerTheme.spaceBetweenIcons, + width: theme.spaceBetweenIcons, ), _generateIconButtonWithText( context, - imagePickerTheme.makePhotoIcon, - imagePickerTheme, + theme.makePhotoIcon, + theme, Icons.camera_alt_rounded, ImageSource.camera, - imagePickerTheme.makePhotoText, + theme.makePhotoText, ), ], ], ), - const SizedBox(height: 10), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - SizedBox( - width: imagePickerTheme.closeButtonWidth, - height: imagePickerTheme.closeButtonHeight, + if (theme.closeButtonBuilder != null) ...[ + theme.closeButtonBuilder!.call( + () => Navigator.of(context).pop(), + ), + ] else ...[ + const SizedBox(height: 30), + Center( + child: SizedBox( + width: 300, + height: 40, child: customButton ?? ElevatedButton( style: ElevatedButton.styleFrom( - backgroundColor: - imagePickerTheme.closeButtonBackgroundColor, + backgroundColor: Colors.black, ), onPressed: () => Navigator.of(context).pop(), - child: Text( - imagePickerTheme.closeButtonText, + child: const Text( + 'Close', style: TextStyle( - fontFamily: imagePickerTheme.font, - fontSize: imagePickerTheme.closeButtonTextSize, - color: imagePickerTheme.closeButtonTextColor, + fontSize: 15, + color: Colors.white, ), ), ), ), - ], - ), - const SizedBox(height: 30), + ), + const SizedBox(height: 30), + ], ], ), ); @@ -142,9 +130,8 @@ class ImagePicker extends StatelessWidget { key: Key(bottomText), onTap: () async { var navigator = Navigator.of(context); - var image = - await (imagePickerService ?? ImagePickerServiceDefault()) - .pickImage(imageSource, config: imagePickerConfig); + var image = await (service ?? ImagePickerServiceDefault()) + .pickImage(imageSource, config: config); navigator.pop(image); }, child: customIcon ?? @@ -156,13 +143,8 @@ class ImagePicker extends StatelessWidget { ), Text( bottomText, - style: TextStyle( - fontFamily: imagePickerTheme.font, - fontSize: imagePickerTheme.iconTextSize, - color: imagePickerTheme.textColor, - ), + style: theme.iconTextStyle, ), - const SizedBox(height: 20), ], ); } diff --git a/pubspec.yaml b/pubspec.yaml index 79c5c6b..30f76ec 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: flutter_image_picker description: A Flutter Image Picking package. -version: 1.0.5 +version: 2.0.0 repository: https://github.com/Iconica-Development/flutter_image_picker environment: diff --git a/test/image_picker_ui_test.dart b/test/image_picker_ui_test.dart index 4c690c2..098dc3b 100644 --- a/test/image_picker_ui_test.dart +++ b/test/image_picker_ui_test.dart @@ -26,18 +26,14 @@ void main() { ), ); - var titleFinder = - find.text(const iconica_image_picker.ImagePickerTheme().title); var makePhotoIconFinder = find.byIcon(Icons.camera_alt_rounded); var makePhotoTextFinder = find.text(const iconica_image_picker.ImagePickerTheme().makePhotoText); var selectImageIconFinder = find.byIcon(Icons.image); var selectImageTextFinder = find .text(const iconica_image_picker.ImagePickerTheme().selectImageText); - var closebuttonTextFinder = find - .text(const iconica_image_picker.ImagePickerTheme().closeButtonText); + var closebuttonTextFinder = find.text('Close'); - expect(titleFinder, findsOneWidget); expect(makePhotoIconFinder, findsOneWidget); expect(makePhotoTextFinder, findsOneWidget); expect(selectImageIconFinder, findsOneWidget); @@ -57,7 +53,7 @@ void main() { MaterialApp( home: Material( child: iconica_image_picker.ImagePicker( - imagePickerService: serviceMock, + service: serviceMock, ), ), ), @@ -85,7 +81,7 @@ void main() { MaterialApp( home: Material( child: iconica_image_picker.ImagePicker( - imagePickerService: serviceMock, + service: serviceMock, ), ), ), @@ -102,7 +98,6 @@ void main() { }); testWidgets('Image Picker Shows With Custom Theme', (tester) async { - var title = 'title'; Widget makePhotoIcon = Container( height: 125, width: 125, @@ -115,33 +110,29 @@ void main() { color: Colors.blue, ); var selectImageText = 'seleeeeect image'; - var closeButtonText = 'Close Dialog!'; + var closeButtonText = 'Close'; await tester.pumpWidget( MaterialApp( home: Material( child: iconica_image_picker.ImagePicker( - imagePickerTheme: iconica_image_picker.ImagePickerTheme( - title: title, + theme: iconica_image_picker.ImagePickerTheme( makePhotoIcon: makePhotoIcon, makePhotoText: makePhotoText, selectImageIcon: selectImageIcon, selectImageText: selectImageText, - closeButtonText: closeButtonText, ), ), ), ), ); - var titleFinder = find.text(title); var makePhotoIconFinder = find.byWidget(makePhotoIcon); var makePhotoTextFinder = find.text(makePhotoText); var selectImageIconFinder = find.byWidget(selectImageIcon); var selectImageTextFinder = find.text(selectImageText); var closebuttonTextFinder = find.text(closeButtonText); - expect(titleFinder, findsOneWidget); expect(makePhotoIconFinder, findsOneWidget); expect(makePhotoTextFinder, findsOneWidget); expect(selectImageIconFinder, findsOneWidget);