feat: added new example for icons option

Also added the option to add your own icon for each button
This commit is contained in:
Tim 2022-12-23 13:20:56 +01:00
parent 25c20f9298
commit 03158424aa
10 changed files with 216 additions and 109 deletions

View file

@ -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<MyHomePage> {
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);
},
);
},
);
},
),
),
],
),
);
}

View file

@ -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<ConsumerStatefulWidget> createState() => _MediaPickerState();
ConsumerState<ConsumerStatefulWidget> createState() => _MediaPickerIconOptionsState();
}
class _MediaPickerState extends ConsumerState<MediaPickerPage> {
class _MediaPickerIconOptionsState extends ConsumerState<MediaPickerPageIconOptions> {
@override
Widget build(BuildContext context) {
var mediaService = ref.read<MediaPickerService>(mediaPickerServiceProvider);
@ -58,7 +59,6 @@ class _MediaPickerState extends ConsumerState<MediaPickerPage> {
const SizedBox(
height: 15,
),
// Icons example of Media Picker
MediaPicker(
buttonType: ButtonType.icons,
horizontalSpacing: 40,
@ -66,6 +66,10 @@ class _MediaPickerState extends ConsumerState<MediaPickerPage> {
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<MediaPickerPage> {
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(
height: 30,
),

View file

@ -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<ConsumerStatefulWidget> createState() => _MediaPickerTextOptionsState();
}
class _MediaPickerTextOptionsState extends ConsumerState<MediaPickerPageTextOptions> {
@override
Widget build(BuildContext context) {
var mediaService = ref.read<MediaPickerService>(mediaPickerServiceProvider);
var audioService = ref.read<AudioService>(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<String, dynamic>? inputSettings,
Function onComplete) =>
MediaCheckPage(
cancel: widget.callback,
displayResult: displayResult,
inputSettings: inputSettings ?? {},
onComplete: onComplete,
),
),
const SizedBox(
height: 30,
),
],
),
),
],
);
}
}

View file

@ -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';

View file

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

View file

@ -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<FilePickerResult?> Function(List<String>)? pickFile;
final List<String> fileExtensions;

View file

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

View file

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

View file

@ -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<Uint8List?> Function()? pickFile;
final VideoPlayerFactory videoPlayerFactory;

View file

@ -0,0 +1 @@
export 'icon_button_with_text.dart';