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
- 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].
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;
}

84
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.
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,79 +38,67 @@ 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: <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(
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),
],
],
),
);
@ -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),
],
);
}

2
pubspec.yaml
View file

@ -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:

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 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);