feat: added icon mode

This commit is contained in:
Tim 2022-12-23 11:57:28 +01:00
parent 114443fb57
commit 25c20f9298
12 changed files with 168 additions and 41 deletions

File diff suppressed because one or more lines are too long

View file

@ -58,10 +58,14 @@ class _MediaPickerState extends ConsumerState<MediaPickerPage> {
const SizedBox( const SizedBox(
height: 15, height: 15,
), ),
// Icons example of Media Picker
MediaPicker( MediaPicker(
buttonType: ButtonType.icons, buttonType: ButtonType.icons,
horizontalSpacing: 40,
verticalSpacing: 20,
mediaPickerInputs: [ mediaPickerInputs: [
MediaPickerInputPhoto( MediaPickerInputPhoto(
label: "Make photo",
pickFile: mediaService.pickImageFile, pickFile: mediaService.pickImageFile,
checkPageSettings: { checkPageSettings: {
'title': 'Share photo', 'title': 'Share photo',
@ -73,6 +77,7 @@ class _MediaPickerState extends ConsumerState<MediaPickerPage> {
}, },
), ),
MediaPickerInputVideo( MediaPickerInputVideo(
label: "Make video",
pickFile: mediaService.pickVideoFile, pickFile: mediaService.pickVideoFile,
videoPlayerFactory: MediaPickerVideoPlayerFactory(), videoPlayerFactory: MediaPickerVideoPlayerFactory(),
checkPageSettings: { checkPageSettings: {
@ -86,6 +91,7 @@ class _MediaPickerState extends ConsumerState<MediaPickerPage> {
), ),
if (!kIsWeb) if (!kIsWeb)
MediaPickerInputAudio( MediaPickerInputAudio(
label: "Record audio",
checkPageSettings: {'title': 'Share audio'}, checkPageSettings: {'title': 'Share audio'},
onComplete: (MediaResult result) { onComplete: (MediaResult result) {
Navigator.pop(context); Navigator.pop(context);
@ -93,12 +99,14 @@ class _MediaPickerState extends ConsumerState<MediaPickerPage> {
audioService: audioService, audioService: audioService,
), ),
MediaPickerInputText( MediaPickerInputText(
label: "Write text",
checkPageSettings: {'title': 'Share text'}, checkPageSettings: {'title': 'Share text'},
onComplete: (MediaResult result) { onComplete: (MediaResult result) {
Navigator.pop(context); Navigator.pop(context);
}, },
), ),
MediaPickerInputFile( MediaPickerInputFile(
label: "Select file",
pickFile: mediaService.pickFile, pickFile: mediaService.pickFile,
fileExtensions: [ fileExtensions: [
'pdf', 'pdf',
@ -128,6 +136,83 @@ class _MediaPickerState extends ConsumerState<MediaPickerPage> {
onComplete: onComplete, onComplete: onComplete,
), ),
), ),
// Text example of Media Picker
// MediaPicker(
// buttonType: ButtonType.text,
// mediaPickerInputs: [
// MediaPickerInputPhoto(
// label: "Make photo",
// pickFile: mediaService.pickImageFile,
// checkPageSettings: {
// 'title': 'Share photo',
// 'width': 125.0,
// 'height': 200.0,
// },
// onComplete: (MediaResult result) {
// Navigator.pop(context);
// },
// ),
// MediaPickerInputVideo(
// label: "Make video",
// pickFile: mediaService.pickVideoFile,
// videoPlayerFactory: MediaPickerVideoPlayerFactory(),
// checkPageSettings: {
// 'title': 'Share video',
// 'width': 122.5,
// 'height': 200.0,
// },
// onComplete: (MediaResult result) {
// Navigator.pop(context);
// },
// ),
// if (!kIsWeb)
// MediaPickerInputAudio(
// label: "Record audio",
// checkPageSettings: {'title': 'Share audio'},
// onComplete: (MediaResult result) {
// Navigator.pop(context);
// },
// audioService: audioService,
// ),
// MediaPickerInputText(
// label: "Write text",
// checkPageSettings: {'title': 'Share text'},
// onComplete: (MediaResult result) {
// Navigator.pop(context);
// },
// ),
// MediaPickerInputFile(
// label: "Select file",
// pickFile: mediaService.pickFile,
// fileExtensions: [
// 'pdf',
// 'doc',
// 'png',
// 'jpg',
// 'docx',
// 'bmp',
// 'gif',
// 'txt',
// ],
// checkPageSettings: {
// 'title': 'Share file',
// },
// onComplete: (MediaResult result) {
// Navigator.pop(context);
// },
// ),
// ],
// mediaCheckPage: (Widget displayResult,
// Map<String, dynamic>? inputSettings,
// Function onComplete) =>
// MediaCheckPage(
// cancel: widget.callback,
// displayResult: displayResult,
// inputSettings: inputSettings ?? {},
// onComplete: onComplete,
// ),
// ),
const SizedBox( const SizedBox(
height: 30, height: 30,
), ),

View file

@ -113,15 +113,6 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "0.18.5+1" version: "0.18.5+1"
flutter_image_picker:
dependency: transitive
description:
path: "."
ref: "1.0.3"
resolved-ref: "20814755cca74296600a0ae3e016e46979e66a7e"
url: "https://github.com/Iconica-Development/flutter_image_picker"
source: git
version: "1.0.3"
flutter_lints: flutter_lints:
dependency: "direct dev" dependency: "direct dev"
description: description:

View file

@ -5,6 +5,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_media_picker/src/enums/button_type.dart'; import 'package:flutter_media_picker/src/enums/button_type.dart';
import 'package:flutter_media_picker/src/media_result.dart'; import 'package:flutter_media_picker/src/media_result.dart';
import 'package:flutter_media_picker/src/widgets/icon_button_with_text.dart';
/// Abstract class for inputs used by [MediaPicker]. /// Abstract class for inputs used by [MediaPicker].
/// ///
@ -24,7 +25,7 @@ import 'package:flutter_media_picker/src/media_result.dart';
abstract class MediaPickerInput { abstract class MediaPickerInput {
String label = "Media Picker input"; String label = "Media Picker input";
Widget icon = const Icon(Icons.image); Widget icon = const IconButtonWithText();
Future<MediaResult> onPressed(BuildContext context); Future<MediaResult> onPressed(BuildContext context);

View file

@ -7,21 +7,24 @@ import 'dart:io';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_media_picker/flutter_media_picker.dart'; import 'package:flutter_media_picker/flutter_media_picker.dart';
import 'package:flutter_media_picker/src/widgets/icon_button_with_text.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:intl/intl.dart'; import 'package:intl/intl.dart';
/// Input for audio used by [MediaPicker]. /// Input for audio used by [MediaPicker].
/// ///
/// This feature is only usable for nativa applications. /// This feature is only usable for native applications.
class MediaPickerInputAudio implements MediaPickerInput { class MediaPickerInputAudio implements MediaPickerInput {
MediaPickerInputAudio({ MediaPickerInputAudio({
this.label = "Audio", this.label = "Audio",
this.icon = const Icon(Icons.audio_file),
this.checkPageSettings, this.checkPageSettings,
this.onComplete, this.onComplete,
required this.audioService, required this.audioService,
this.inputStyling, this.inputStyling,
}); }) : icon = IconButtonWithText(
icon: Icons.record_voice_over,
iconText: label,
);
final AudioService audioService; final AudioService audioService;

View file

@ -4,24 +4,21 @@
import 'package:file_picker/file_picker.dart'; import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_media_picker/src/abstracts/media_picker_input.dart'; import 'package:flutter_media_picker/src/widgets/icon_button_with_text.dart';
import 'package:path/path.dart' as path; import 'package:path/path.dart' as path;
import 'package:flutter_media_picker/src/media_result.dart';
import '../../flutter_media_picker.dart'; import '../../flutter_media_picker.dart';
/// Input for photo used by [MediaPicker]. /// Input for photo used by [MediaPicker].
class MediaPickerInputFile implements MediaPickerInput { class MediaPickerInputFile implements MediaPickerInput {
MediaPickerInputFile({ MediaPickerInputFile({
this.label = "File", this.label = "File",
this.icon = const Icon(Icons.file_copy),
this.fileExtensions = const ['pdf', 'jpg', 'png'], this.fileExtensions = const ['pdf', 'jpg', 'png'],
this.checkPageSettings, this.checkPageSettings,
this.onComplete, this.onComplete,
this.pickFile, this.pickFile,
}); }) : icon = IconButtonWithText(icon: Icons.file_copy, iconText: label,);
final Future<FilePickerResult?> Function(List<String>)? pickFile; final Future<FilePickerResult?> Function(List<String>)? pickFile;
final List<String> fileExtensions; final List<String> fileExtensions;

View file

@ -8,16 +8,19 @@ import 'package:flutter/material.dart';
import 'package:flutter_media_picker/src/abstracts/media_picker_input.dart'; import 'package:flutter_media_picker/src/abstracts/media_picker_input.dart';
import 'package:flutter_media_picker/src/media_result.dart'; import 'package:flutter_media_picker/src/media_result.dart';
import 'package:flutter_media_picker/src/widgets/icon_button_with_text.dart';
/// Input for photo used by [MediaPicker]. /// Input for photo used by [MediaPicker].
class MediaPickerInputPhoto implements MediaPickerInput { class MediaPickerInputPhoto implements MediaPickerInput {
MediaPickerInputPhoto({ MediaPickerInputPhoto({
this.label = "Photo", this.label = "Photo",
this.icon = const Icon(Icons.image),
this.checkPageSettings, this.checkPageSettings,
this.onComplete, this.onComplete,
this.pickFile, this.pickFile,
}); }) : icon = IconButtonWithText(
icon: Icons.camera_alt,
iconText: label,
);
final Future<Uint8List?> Function()? pickFile; final Future<Uint8List?> Function()? pickFile;

View file

@ -6,16 +6,19 @@ import 'package:flutter/material.dart';
import 'package:flutter_form/flutter_form.dart'; import 'package:flutter_form/flutter_form.dart';
import 'package:flutter_media_picker/src/abstracts/media_picker_input.dart'; import 'package:flutter_media_picker/src/abstracts/media_picker_input.dart';
import 'package:flutter_media_picker/src/media_result.dart'; import 'package:flutter_media_picker/src/media_result.dart';
import 'package:flutter_media_picker/src/widgets/icon_button_with_text.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
/// Input for text used by [MediaPicker]. /// Input for text used by [MediaPicker].
class MediaPickerInputText implements MediaPickerInput { class MediaPickerInputText implements MediaPickerInput {
MediaPickerInputText({ MediaPickerInputText({
this.label = "Text", this.label = "Text",
this.icon = const Icon(Icons.text_fields),
this.checkPageSettings, this.checkPageSettings,
this.onComplete, this.onComplete,
}); }) : icon = IconButtonWithText(
icon: Icons.text_fields,
iconText: label,
);
@override @override
String label; String label;

View file

@ -6,17 +6,17 @@ import 'dart:typed_data';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_media_picker/flutter_media_picker.dart'; import 'package:flutter_media_picker/flutter_media_picker.dart';
import 'package:flutter_media_picker/src/widgets/icon_button_with_text.dart';
/// Input for video used by [MediaPicker]. /// Input for video used by [MediaPicker].
class MediaPickerInputVideo implements MediaPickerInput { class MediaPickerInputVideo implements MediaPickerInput {
MediaPickerInputVideo({ MediaPickerInputVideo({
this.label = "Video", this.label = "Video",
this.icon = const Icon(Icons.video_camera_front),
this.checkPageSettings, this.checkPageSettings,
this.onComplete, this.onComplete,
this.pickFile, this.pickFile,
required this.videoPlayerFactory, required this.videoPlayerFactory,
}); }) : icon = IconButtonWithText(icon: Icons.video_camera_front, iconText: label,);
final Future<Uint8List?> Function()? pickFile; final Future<Uint8List?> Function()? pickFile;
final VideoPlayerFactory videoPlayerFactory; final VideoPlayerFactory videoPlayerFactory;

View file

@ -100,6 +100,7 @@ import '../flutter_media_picker.dart';
/// ], /// ],
/// ); /// );
///``` ///```
class MediaPicker extends ConsumerWidget { class MediaPicker extends ConsumerWidget {
const MediaPicker({ const MediaPicker({
this.mediaPickerInputs, this.mediaPickerInputs,
@ -108,6 +109,8 @@ class MediaPicker extends ConsumerWidget {
this.onComplete, this.onComplete,
this.mediaCheckPage, this.mediaCheckPage,
this.buttonType = ButtonType.text, this.buttonType = ButtonType.text,
this.horizontalSpacing = 0,
this.verticalSpacing = 0,
Key? key, Key? key,
}) : super(key: key); }) : super(key: key);
@ -117,6 +120,8 @@ class MediaPicker extends ConsumerWidget {
iconButton; iconButton;
final void Function(MediaResult result)? onComplete; final void Function(MediaResult result)? onComplete;
final ButtonType buttonType; final ButtonType buttonType;
final double horizontalSpacing;
final double verticalSpacing;
final Widget Function( final Widget Function(
Widget displayResult, Widget displayResult,
Map<String, dynamic>? inputSettings, Map<String, dynamic>? inputSettings,
@ -139,7 +144,11 @@ class MediaPicker extends ConsumerWidget {
inputs = mediaPickerInputs!; inputs = mediaPickerInputs!;
} }
return Column( return Wrap(
alignment: WrapAlignment.center,
direction: Axis.horizontal,
spacing: horizontalSpacing,
runSpacing: verticalSpacing,
children: [ children: [
if (buttonType == ButtonType.text) ...[ if (buttonType == ButtonType.text) ...[
for (final input in inputs) ...[ for (final input in inputs) ...[
@ -180,17 +189,17 @@ class MediaPicker extends ConsumerWidget {
for (final input in inputs) ...[ for (final input in inputs) ...[
iconButton?.call(input.label, input.icon, (BuildContext ct) async { iconButton?.call(input.label, input.icon, (BuildContext ct) async {
await onPressedMediaType(ct, input); await onPressedMediaType(ct, input);
}) ?? GestureDetector( }) ??
onTap: () async { GestureDetector(
await onPressedMediaType(context, input); onTap: () async {
}, await onPressedMediaType(context, input);
child: Column( },
children: [ child: Wrap(
input.icon, children: [
Text(input.label), input.icon,
], ],
), ),
) ),
], ],
] ]
], ],

View file

@ -0,0 +1,37 @@
import 'package:flutter/material.dart';
class IconButtonWithText extends StatelessWidget {
const IconButtonWithText({
super.key,
this.iconSize = 40,
this.iconText = "Button",
this.iconTextSize = 16,
this.icon = Icons.file_copy,
});
final double iconSize;
final String iconText;
final double iconTextSize;
final IconData icon;
@override
Widget build(BuildContext context) {
return FittedBox(
fit: BoxFit.fitHeight,
child: Column(
children: [
Icon(
icon,
size: iconSize,
),
Text(
iconText,
style: TextStyle(fontSize: iconTextSize),
textAlign: TextAlign.center,
),
],
),
);
}
}

View file

@ -12,10 +12,8 @@ dependencies:
flutter: flutter:
sdk: flutter sdk: flutter
flutter_image_picker: path: any
git: image_picker: any
url: https://github.com/Iconica-Development/flutter_image_picker
ref: 1.0.3
file_picker: any file_picker: any
video_player: any video_player: any
path_provider: any path_provider: any