internal/flutter_image_picker
5
0
Fork 0
mirror of https://github.com/Iconica-Development/flutter_image_picker.git synced 2025-05-18 19:53:45 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #27 from Iconica-Development/bugfix/simple_theme

Browse source 
bugfix: SImplify ImagePickerTheme
This commit is contained in:
Gorter-dev 2024-02-27 16:27:38 +01:00 committed by GitHub
commit 9131a82501
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 49 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
CHANGELOG.md
View file

@ -32,3 +32,7 @@
## 1.0.5 - February 7th 2024 ## 1.0.5 - February 7th 2024
- Added CI and linter - Added CI and linter
## 2.0.0 - February 22nd 2024
- Simplified the ImagePickerTheme

61
lib/src/models/image_picker_theme.dart
View file

@ -8,59 +8,23 @@ class ImagePickerTheme {
/// The [ImagePickerTheme] is used to style the [ImagePicker]. /// The [ImagePickerTheme] is used to style the [ImagePicker].
const ImagePickerTheme({ 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.iconColor = Colors.black,
this.iconSize = 125, this.iconSize = 125,
this.iconTextSize = 15,
this.spaceBetweenIcons = 30, this.spaceBetweenIcons = 30,
this.makePhotoIcon, this.makePhotoIcon,
this.makePhotoText = 'Take a Picture', this.makePhotoText = 'Take a Picture',
this.selectImageIcon, this.selectImageIcon,
this.selectImageText = 'Select File', this.selectImageText = 'Select File',
this.closeButtonText = 'Close', this.iconTextStyle,
this.closeButtonTextSize = 15, this.closeButtonBuilder,
this.closeButtonTextColor = Colors.white,
this.closeButtonWidth = 300,
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;
/// 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 /// The color of the icons
final Color iconColor; 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;
/// 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. /// The size of the space between the two icons in the Image Picker Dialog.
final double spaceBetweenIcons; final double spaceBetweenIcons;
@ -79,24 +43,7 @@ class ImagePickerTheme {
/// icon. /// icon.
final String selectImageText; final String selectImageText;
/// The text that is shown on the 'Close Dialog' button at the bottom of the final TextStyle? iconTextStyle;
/// Image Picker Dialog.
final String closeButtonText;
/// The fontsize of the text of the close button of the Image Picker Dialog. final Widget Function(Function onTap)? closeButtonBuilder;
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;
} }

88
lib/src/ui/image_picker.dart
View file

@ -18,19 +18,19 @@ import 'package:image_picker/image_picker.dart';
/// The fourth one is a custom Button widget. /// The fourth one is a custom Button widget.
class ImagePicker extends StatelessWidget { class ImagePicker extends StatelessWidget {
const ImagePicker({ const ImagePicker({
this.imagePickerTheme = const ImagePickerTheme(), this.theme = const ImagePickerTheme(),
this.imagePickerConfig = const ImagePickerConfig(), this.config = const ImagePickerConfig(),
this.imagePickerService, this.service,
this.customButton, this.customButton,
super.key, super.key,
}); });
/// ImagePickerTheme can be used to change the UI of the Image Picker Widget to change the text/icons to your liking. /// 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 /// ImagePickerConfig can be used to define the size and quality for the
/// uploaded image. /// uploaded image.
final ImagePickerConfig imagePickerConfig; final ImagePickerConfig config;
/// The Image Picker Dialog can have a custom button if you want to. /// The Image Picker Dialog can have a custom button if you want to.
final Widget? customButton; final Widget? customButton;
@ -38,78 +38,66 @@ class ImagePicker extends StatelessWidget {
/// The ImagePickerService can be used if you want to use your own /// 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 /// 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. /// add more features. If null the current implementation will be used.
final ImagePickerService? imagePickerService; final ImagePickerService? service;
@override @override
Widget build(BuildContext context) => SingleChildScrollView( Widget build(BuildContext context) => SingleChildScrollView(
child: Column( child: Column(
children: <Widget>[ children: <Widget>[
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( Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
_generateIconButtonWithText( _generateIconButtonWithText(
context, context,
imagePickerTheme.selectImageIcon, theme.selectImageIcon,
imagePickerTheme, theme,
Icons.image, Icons.image,
ImageSource.gallery, ImageSource.gallery,
imagePickerTheme.selectImageText, theme.selectImageText,
), ),
if (imagePickerConfig.cameraOption ?? true) ...[ if (config.cameraOption ?? true) ...[
SizedBox( SizedBox(
width: imagePickerTheme.spaceBetweenIcons, width: theme.spaceBetweenIcons,
), ),
_generateIconButtonWithText( _generateIconButtonWithText(
context, context,
imagePickerTheme.makePhotoIcon, theme.makePhotoIcon,
imagePickerTheme, theme,
Icons.camera_alt_rounded, Icons.camera_alt_rounded,
ImageSource.camera, ImageSource.camera,
imagePickerTheme.makePhotoText, theme.makePhotoText,
), ),
], ],
], ],
), ),
const SizedBox(height: 10), if (theme.closeButtonBuilder != null) ...[
Row( theme.closeButtonBuilder!.call(
mainAxisAlignment: MainAxisAlignment.center, () => Navigator.of(context).pop(),
children: [ ),
SizedBox( ] else ...[
width: imagePickerTheme.closeButtonWidth, const SizedBox(height: 30),
height: imagePickerTheme.closeButtonHeight, Center(
child: SizedBox(
width: 300,
height: 40,
child: customButton ?? child: customButton ??
ElevatedButton( ElevatedButton(
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: backgroundColor: Colors.black,
imagePickerTheme.closeButtonBackgroundColor,
), ),
onPressed: () => Navigator.of(context).pop(), onPressed: () => Navigator.of(context).pop(),
child: Text( child: const Text(
imagePickerTheme.closeButtonText, 'Close',
style: TextStyle( style: TextStyle(
fontFamily: imagePickerTheme.font, fontSize: 15,
fontSize: imagePickerTheme.closeButtonTextSize, color: Colors.white,
color: imagePickerTheme.closeButtonTextColor,
), ),
), ),
), ),
), ),
], ),
), const SizedBox(height: 30),
const SizedBox(height: 30), ],
], ],
), ),
); );
@ -142,9 +130,8 @@ class ImagePicker extends StatelessWidget {
key: Key(bottomText), key: Key(bottomText),
onTap: () async { onTap: () async {
var navigator = Navigator.of(context); var navigator = Navigator.of(context);
var image = var image = await (service ?? ImagePickerServiceDefault())
await (imagePickerService ?? ImagePickerServiceDefault()) .pickImage(imageSource, config: config);
.pickImage(imageSource, config: imagePickerConfig);
navigator.pop(image); navigator.pop(image);
}, },
child: customIcon ?? child: customIcon ??
@ -156,13 +143,8 @@ class ImagePicker extends StatelessWidget {
), ),
Text( Text(
bottomText, bottomText,
style: TextStyle( style: theme.iconTextStyle,
fontFamily: imagePickerTheme.font,
fontSize: imagePickerTheme.iconTextSize,
color: imagePickerTheme.textColor,
),
), ),
const SizedBox(height: 20),
], ],
); );
} }

2
pubspec.yaml
View file

@ -1,6 +1,6 @@
name: flutter_image_picker name: flutter_image_picker
description: A Flutter Image Picking package. description: A Flutter Image Picking package.
version: 1.0.5 version: 2.0.0
repository: https://github.com/Iconica-Development/flutter_image_picker repository: https://github.com/Iconica-Development/flutter_image_picker
environment: environment:

19
test/image_picker_ui_test.dart
View file

@ -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 makePhotoIconFinder = find.byIcon(Icons.camera_alt_rounded);
var makePhotoTextFinder = var makePhotoTextFinder =
find.text(const iconica_image_picker.ImagePickerTheme().makePhotoText); find.text(const iconica_image_picker.ImagePickerTheme().makePhotoText);
var selectImageIconFinder = find.byIcon(Icons.image); var selectImageIconFinder = find.byIcon(Icons.image);
var selectImageTextFinder = find var selectImageTextFinder = find
.text(const iconica_image_picker.ImagePickerTheme().selectImageText); .text(const iconica_image_picker.ImagePickerTheme().selectImageText);
var closebuttonTextFinder = find var closebuttonTextFinder = find.text('Close');
.text(const iconica_image_picker.ImagePickerTheme().closeButtonText);
expect(titleFinder, findsOneWidget);
expect(makePhotoIconFinder, findsOneWidget); expect(makePhotoIconFinder, findsOneWidget);
expect(makePhotoTextFinder, findsOneWidget); expect(makePhotoTextFinder, findsOneWidget);
expect(selectImageIconFinder, findsOneWidget); expect(selectImageIconFinder, findsOneWidget);
@ -57,7 +53,7 @@ void main() {
MaterialApp( MaterialApp(
home: Material( home: Material(
child: iconica_image_picker.ImagePicker( child: iconica_image_picker.ImagePicker(
imagePickerService: serviceMock, service: serviceMock,
), ),
), ),
), ),
@ -85,7 +81,7 @@ void main() {
MaterialApp( MaterialApp(
home: Material( home: Material(
child: iconica_image_picker.ImagePicker( child: iconica_image_picker.ImagePicker(
imagePickerService: serviceMock, service: serviceMock,
), ),
), ),
), ),
@ -102,7 +98,6 @@ void main() {
}); });
testWidgets('Image Picker Shows With Custom Theme', (tester) async { testWidgets('Image Picker Shows With Custom Theme', (tester) async {
var title = 'title';
Widget makePhotoIcon = Container( Widget makePhotoIcon = Container(
height: 125, height: 125,
width: 125, width: 125,
@ -115,33 +110,29 @@ void main() {
color: Colors.blue, color: Colors.blue,
); );
var selectImageText = 'seleeeeect image'; var selectImageText = 'seleeeeect image';
var closeButtonText = 'Close Dialog!'; var closeButtonText = 'Close';
await tester.pumpWidget( await tester.pumpWidget(
MaterialApp( MaterialApp(
home: Material( home: Material(
child: iconica_image_picker.ImagePicker( child: iconica_image_picker.ImagePicker(
imagePickerTheme: iconica_image_picker.ImagePickerTheme( theme: iconica_image_picker.ImagePickerTheme(
title: title,
makePhotoIcon: makePhotoIcon, makePhotoIcon: makePhotoIcon,
makePhotoText: makePhotoText, makePhotoText: makePhotoText,
selectImageIcon: selectImageIcon, selectImageIcon: selectImageIcon,
selectImageText: selectImageText, selectImageText: selectImageText,
closeButtonText: closeButtonText,
), ),
), ),
), ),
), ),
); );
var titleFinder = find.text(title);
var makePhotoIconFinder = find.byWidget(makePhotoIcon); var makePhotoIconFinder = find.byWidget(makePhotoIcon);
var makePhotoTextFinder = find.text(makePhotoText); var makePhotoTextFinder = find.text(makePhotoText);
var selectImageIconFinder = find.byWidget(selectImageIcon); var selectImageIconFinder = find.byWidget(selectImageIcon);
var selectImageTextFinder = find.text(selectImageText); var selectImageTextFinder = find.text(selectImageText);
var closebuttonTextFinder = find.text(closeButtonText); var closebuttonTextFinder = find.text(closeButtonText);
expect(titleFinder, findsOneWidget);
expect(makePhotoIconFinder, findsOneWidget); expect(makePhotoIconFinder, findsOneWidget);
expect(makePhotoTextFinder, findsOneWidget); expect(makePhotoTextFinder, findsOneWidget);
expect(selectImageIconFinder, findsOneWidget); expect(selectImageIconFinder, findsOneWidget);