mirror of
https://github.com/Iconica-Development/flutter_media_picker.git
synced 2025-05-18 16:33:45 +02:00
feat: added new example for icons option
Also added the option to add your own icon for each button
This commit is contained in:
parent
25c20f9298
commit
03158424aa
10 changed files with 216 additions and 109 deletions
|
@ -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);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
),
|
146
example/lib/media_picker_text_options.dart
Normal file
146
example/lib/media_picker_text_options.dart
Normal 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,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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';
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
);
|
||||
|
|
|
@ -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,
|
||||
);
|
||||
|
|
|
@ -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;
|
||||
|
|
1
lib/src/widgets/widgets.dart
Normal file
1
lib/src/widgets/widgets.dart
Normal file
|
@ -0,0 +1 @@
|
|||
export 'icon_button_with_text.dart';
|
Loading…
Reference in a new issue