From 03158424aa09322e42a3d344da20a43c295006bd Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 23 Dec 2022 13:20:56 +0100 Subject: [PATCH] feat: added new example for icons option Also added the option to add your own icon for each button --- example/lib/main.dart | 55 +++++-- ...er.dart => media_picker_icon_options.dart} | 91 ++--------- example/lib/media_picker_text_options.dart | 146 ++++++++++++++++++ lib/flutter_media_picker.dart | 1 + lib/src/inputs/input_audio.dart | 11 +- lib/src/inputs/input_file.dart | 10 +- lib/src/inputs/input_photo.dart | 3 +- lib/src/inputs/input_text.dart | 3 +- lib/src/inputs/input_video.dart | 4 +- lib/src/widgets/widgets.dart | 1 + 10 files changed, 216 insertions(+), 109 deletions(-) rename example/lib/{media_picker.dart => media_picker_icon_options.dart} (58%) create mode 100644 example/lib/media_picker_text_options.dart create mode 100644 lib/src/widgets/widgets.dart diff --git a/example/lib/main.dart b/example/lib/main.dart index f2e4232..8d18655 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -2,7 +2,8 @@ // // SPDX-License-Identifier: BSD-3-Clause -import 'package:example/media_picker.dart'; +import 'package:example/media_picker_icon_options.dart'; +import 'package:example/media_picker_text_options.dart'; import 'package:flutter/material.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; @@ -43,23 +44,47 @@ class _MyHomePageState extends State { appBar: AppBar( title: Text(widget.title), ), - body: Center( - child: ElevatedButton( - child: const Text('Media Picker'), - onPressed: () { - showModalBottomSheet( - backgroundColor: Colors.transparent, - context: context, - builder: (context) { - return MediaPickerPage( - callback: () { - Navigator.pop(context); + body: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Center( + child: ElevatedButton( + child: const Text('Media Picker Text Options'), + onPressed: () { + showModalBottomSheet( + backgroundColor: Colors.transparent, + context: context, + builder: (context) { + return MediaPickerPageTextOptions( + callback: () { + Navigator.pop(context); + }, + ); }, ); }, - ); - }, - ), + ), + ), + Center( + child: ElevatedButton( + child: const Text('Media Picker Icon Options'), + onPressed: () { + showModalBottomSheet( + backgroundColor: Colors.transparent, + context: context, + builder: (context) { + return MediaPickerPageIconOptions( + callback: () { + Navigator.pop(context); + }, + ); + }, + ); + }, + ), + ), + ], ), ); } diff --git a/example/lib/media_picker.dart b/example/lib/media_picker_icon_options.dart similarity index 58% rename from example/lib/media_picker.dart rename to example/lib/media_picker_icon_options.dart index dcb0f77..d306058 100644 --- a/example/lib/media_picker.dart +++ b/example/lib/media_picker_icon_options.dart @@ -8,15 +8,16 @@ import 'package:flutter/material.dart'; import 'package:flutter_media_picker/flutter_media_picker.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; -class MediaPickerPage extends ConsumerStatefulWidget { - const MediaPickerPage({required this.callback, Key? key}) : super(key: key); +class MediaPickerPageIconOptions extends ConsumerStatefulWidget { + const MediaPickerPageIconOptions({required this.callback, Key? key}) + : super(key: key); final Function callback; @override - ConsumerState createState() => _MediaPickerState(); + ConsumerState createState() => _MediaPickerIconOptionsState(); } -class _MediaPickerState extends ConsumerState { +class _MediaPickerIconOptionsState extends ConsumerState { @override Widget build(BuildContext context) { var mediaService = ref.read(mediaPickerServiceProvider); @@ -58,7 +59,6 @@ class _MediaPickerState extends ConsumerState { const SizedBox( height: 15, ), - // Icons example of Media Picker MediaPicker( buttonType: ButtonType.icons, horizontalSpacing: 40, @@ -66,6 +66,10 @@ class _MediaPickerState extends ConsumerState { mediaPickerInputs: [ MediaPickerInputPhoto( label: "Make photo", + icon: const IconButtonWithText( + icon: Icons.camera_alt, + iconText: "Custom Photo Icon", + ), pickFile: mediaService.pickImageFile, checkPageSettings: { 'title': 'Share photo', @@ -136,83 +140,6 @@ class _MediaPickerState extends ConsumerState { 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? inputSettings, - // Function onComplete) => - // MediaCheckPage( - // cancel: widget.callback, - // displayResult: displayResult, - // inputSettings: inputSettings ?? {}, - // onComplete: onComplete, - // ), - // ), const SizedBox( height: 30, ), diff --git a/example/lib/media_picker_text_options.dart b/example/lib/media_picker_text_options.dart new file mode 100644 index 0000000..4677b05 --- /dev/null +++ b/example/lib/media_picker_text_options.dart @@ -0,0 +1,146 @@ +// SPDX-FileCopyrightText: 2022 Iconica +// +// SPDX-License-Identifier: BSD-3-Clause + +import 'package:example/media_picker_check.dart'; +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_media_picker/flutter_media_picker.dart'; +import 'package:hooks_riverpod/hooks_riverpod.dart'; + +class MediaPickerPageTextOptions extends ConsumerStatefulWidget { + const MediaPickerPageTextOptions({required this.callback, Key? key}) + : super(key: key); + final Function callback; + + @override + ConsumerState createState() => _MediaPickerTextOptionsState(); +} + +class _MediaPickerTextOptionsState extends ConsumerState { + @override + Widget build(BuildContext context) { + var mediaService = ref.read(mediaPickerServiceProvider); + var audioService = ref.read(audioPlayerServiceProvider); + return Wrap( + children: [ + Container( + width: MediaQuery.of(context).size.width, + decoration: const BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only( + topLeft: Radius.circular(15), + topRight: Radius.circular(15), + ), + ), + child: Column( + children: [ + const SizedBox( + height: 8, + ), + Container( + width: 70, + height: 5, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(100), + color: const Color(0xFF000000).withOpacity(0.50), + ), + ), + const SizedBox( + height: 14, + ), + const Text( + 'Create/Pick', + style: TextStyle( + fontWeight: FontWeight.w900, + fontSize: 20, + ), + ), + const SizedBox( + height: 15, + ), + 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? inputSettings, + Function onComplete) => + MediaCheckPage( + cancel: widget.callback, + displayResult: displayResult, + inputSettings: inputSettings ?? {}, + onComplete: onComplete, + ), + ), + const SizedBox( + height: 30, + ), + ], + ), + ), + ], + ); + } +} diff --git a/lib/flutter_media_picker.dart b/lib/flutter_media_picker.dart index 2d0d81b..f7dcab8 100644 --- a/lib/flutter_media_picker.dart +++ b/lib/flutter_media_picker.dart @@ -10,6 +10,7 @@ export './src/service/services.dart'; export './src/media_result.dart'; export './src/media_picker.dart'; export './src/enums/enums.dart'; +export './src/widgets/widgets.dart'; import 'package:flutter_media_picker/flutter_media_picker.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; diff --git a/lib/src/inputs/input_audio.dart b/lib/src/inputs/input_audio.dart index dd760d8..8a51692 100644 --- a/lib/src/inputs/input_audio.dart +++ b/lib/src/inputs/input_audio.dart @@ -7,7 +7,6 @@ import 'dart:io'; import 'package:flutter/material.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:intl/intl.dart'; @@ -17,14 +16,16 @@ import 'package:intl/intl.dart'; class MediaPickerInputAudio implements MediaPickerInput { MediaPickerInputAudio({ this.label = "Audio", + Widget? icon, this.checkPageSettings, this.onComplete, required this.audioService, this.inputStyling, - }) : icon = IconButtonWithText( - icon: Icons.record_voice_over, - iconText: label, - ); + }) : icon = icon ?? + IconButtonWithText( + icon: Icons.record_voice_over, + iconText: label, + ); final AudioService audioService; diff --git a/lib/src/inputs/input_file.dart b/lib/src/inputs/input_file.dart index 705b82c..aee447d 100644 --- a/lib/src/inputs/input_file.dart +++ b/lib/src/inputs/input_file.dart @@ -4,21 +4,25 @@ import 'package:file_picker/file_picker.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_media_picker/src/widgets/icon_button_with_text.dart'; import 'package:path/path.dart' as path; import '../../flutter_media_picker.dart'; -/// Input for photo used by [MediaPicker]. +/// Input for file used by [MediaPicker]. class MediaPickerInputFile implements MediaPickerInput { MediaPickerInputFile({ this.label = "File", + Widget? icon, this.fileExtensions = const ['pdf', 'jpg', 'png'], this.checkPageSettings, this.onComplete, this.pickFile, - }) : icon = IconButtonWithText(icon: Icons.file_copy, iconText: label,); + }) : icon = icon ?? + IconButtonWithText( + icon: Icons.file_copy, + iconText: label, + ); final Future Function(List)? pickFile; final List fileExtensions; diff --git a/lib/src/inputs/input_photo.dart b/lib/src/inputs/input_photo.dart index 8ae962a..122f4cc 100644 --- a/lib/src/inputs/input_photo.dart +++ b/lib/src/inputs/input_photo.dart @@ -14,10 +14,11 @@ import 'package:flutter_media_picker/src/widgets/icon_button_with_text.dart'; class MediaPickerInputPhoto implements MediaPickerInput { MediaPickerInputPhoto({ this.label = "Photo", + Widget? icon, this.checkPageSettings, this.onComplete, this.pickFile, - }) : icon = IconButtonWithText( + }) : icon = icon ?? IconButtonWithText( icon: Icons.camera_alt, iconText: label, ); diff --git a/lib/src/inputs/input_text.dart b/lib/src/inputs/input_text.dart index b2bce09..e47ae44 100644 --- a/lib/src/inputs/input_text.dart +++ b/lib/src/inputs/input_text.dart @@ -13,9 +13,10 @@ import 'package:hooks_riverpod/hooks_riverpod.dart'; class MediaPickerInputText implements MediaPickerInput { MediaPickerInputText({ this.label = "Text", + Widget? icon, this.checkPageSettings, this.onComplete, - }) : icon = IconButtonWithText( + }) : icon = icon ?? IconButtonWithText( icon: Icons.text_fields, iconText: label, ); diff --git a/lib/src/inputs/input_video.dart b/lib/src/inputs/input_video.dart index 8b126dc..e0cefd9 100644 --- a/lib/src/inputs/input_video.dart +++ b/lib/src/inputs/input_video.dart @@ -6,17 +6,17 @@ import 'dart:typed_data'; import 'package:flutter/material.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]. class MediaPickerInputVideo implements MediaPickerInput { MediaPickerInputVideo({ this.label = "Video", + Widget? icon, this.checkPageSettings, this.onComplete, this.pickFile, required this.videoPlayerFactory, - }) : icon = IconButtonWithText(icon: Icons.video_camera_front, iconText: label,); + }) : icon = icon ?? IconButtonWithText(icon: Icons.video_camera_front, iconText: label,); final Future Function()? pickFile; final VideoPlayerFactory videoPlayerFactory; diff --git a/lib/src/widgets/widgets.dart b/lib/src/widgets/widgets.dart new file mode 100644 index 0000000..d519c07 --- /dev/null +++ b/lib/src/widgets/widgets.dart @@ -0,0 +1 @@ +export 'icon_button_with_text.dart';