flutter_better_pickers 0.0.7
flutter_better_pickers: ^0.0.7 copied to clipboard
This is a multi-picker package that includes several different modes, making it easy to use.
Flutter Better Pickers #
This is a multi-picker package that includes several different modes, making it easy to use.
Features #
- Easy integration.
- Customizable components with comprehensive theming system.
- Performance optimized with built-in caching.
- Extensive documentation.
- Picker UI Instagram.
- Telegram-style media picker with File, Video, and Audio support.
- This is a multi-picker.
- NEW: Internationalization support (English, Persian, Arabic, German, French).
- NEW:
PickerThemefor consistent styling across all pickers. - NEW:
MediaManagerConfigfor performance tuning.
Getting started #
import 'package:flutter_better_pickers/flutter_better_pickers.dart';
dependencies:
flutter_better_pickers: ^0.0.7
Usage #
use customPicker #
instagram pickers #
List<String> selectedMediaPaths = [];
ElevatedButton(
onPressed: () {
var picker = const FlutterBetterPicker(
maxCount: 5,
requestType: MyRequestType.image,
).instagram(context);
picker.then((value) {
selectedMediaPaths = value;
});
},
child: const Text("Instagram picker"),
),
- OR
onPressed: () {
const FlutterBetterPicker(maxCount: 10, requestType: MyRequestType.image)
.instagram(context)
.then((onValue) {
setState(() {
selectedMediaPaths = onValue;
});
});
},
CustomPicker #
ElevatedButton(
onPressed: () {
FlutterBetterPicker.customPicker(
context: context,
maxCount: 5,
requestType: MyRequestType.image,
).then((value) {
setState(() {
selectedMediaPaths = value;
});
});
},
child: const Text("Custom Picker"),
)
BottomSheets #
ElevatedButton(
onPressed: () {
FlutterBetterPicker.bottomSheets(
context: context,
maxCount: 5,
requestType: MyRequestType.image,
).then(
(value) {
setState(() {
selectedMediaPaths = value;
});
},
);
},
child: const Text("BottomSheet"),
),
TelegramMediaPickers #
- Step 1: Create a GlobalKey Start by creating a GlobalKey to manage the state of the TelegramMediaPickers widget.
final GlobalKey<TelegramMediaPickersState> _sheetKey = GlobalKey();
- Step 2: Create a Button to Open the Picker Next, create a button that will open the media picker when pressed.
ElevatedButton(
onPressed: () {
// Open the TelegramMediaPickers
_sheetKey.currentState?.toggleSheet(context);
},
child: const Text("Open Telegram Pickers"),
),
- Step 3: Implement the TelegramMediaPickers Widget Add the TelegramMediaPickers widget to your widget tree. It's important to set the requestType to a general value (like MyRequestType.all) to ensure that all types of media (images, videos, files) are displayed. Avoid changing this to a more specific type if you want the user to have access to all media options.
TelegramMediaPickers(
key: _sheetKey,
requestType: MyRequestType.all, // Set to 'all' to display images, videos, and files
maxCountPickMedia: 5, // Maximum number of media that can be selected
primeryColor: Colors.green, // Primary color for the UI
isRealCameraView: false, // Set to true to use the real camera view
onMediaPicked: (assets, files) {
if (files != null) {
for (var file in files) {
debugPrint(file.path); // Print the path of selected files
}
} else if (assets != null) {
for (var asset in assets) {
debugPrint("Asset: ${asset.file}"); // Print the asset details
}
}
},
),
- Complete Example Here's a complete example of how to implement the TelegramMediaPickers in your Flutter app. This example shows how to select media files and handle them.
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_better_pickers/flutter_better_pickers.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<TelegramMediaPickersState> _sheetKey = GlobalKey();
List<String> selectedMediaPaths = [];
List<File> selectedFiles = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: ElevatedButton(
onPressed: () {
// Open and close TelegramMediaPickers
_sheetKey.currentState?.toggleSheet(context);
setState(() {});
},
child: const Text("Telegram Pickers"),
),
),
// TelegramMediaPickers widget
TelegramMediaPickers(
key: _sheetKey,
requestType: MyRequestType.all, // Set to 'all' to display all media types
maxCountPickMedia: 5,
maxCountPickFiles: 5,
primeryColor: Colors.green,
isRealCameraView: false,
onMediaPicked: (assets, files) {
if (assets != null) {
setState(() {
selectedMediaPaths = assets;
});
}
if (files != null) {
setState(() {
selectedFiles = files;
});
for (var file in files) {
debugPrint(file.path); // Print the path of selected files
}
}
},
)
],
),
);
}
}
scaffoldBottomSheet #
ElevatedButton(
onPressed: () async {
await FlutterBetterPicker.scaffoldBottomSheet(
context: context,
maxCount: 5,
requestType: MyRequestType.image,
confirmText: "Confirm",
textEmptyList: "No album found",
confirmButtonColor: Colors.blue,
confirmTextColor: Colors.white,
backgroundColor: Colors.white,
textEmptyListColor: Colors.grey,
backgroundSnackBarColor: Colors.red,
).then((value) {
setState(() {
selectedMediaPaths = value;
});
});
},
child: const Text("scaffoldBottomSheet"),
),
BottomSheetImageSelector #
ElevatedButton(
onPressed: () async {
await FlutterBetterPicker.bottomSheetImageSelector(
cameraImageSettings: CameraImageSettings(),
context: context,
maxCount: 5,
requestType: MyRequestType.image,
confirmText: "Confirm",
textEmptyList: "No album found",
confirmButtonColor: Colors.blue,
confirmTextColor: Colors.black,
backgroundColor: Colors.white,
textEmptyListColor: Colors.grey,
backgroundSnackBarColor: Colors.red,
).then((value) {
setState(() {
selectedMediaPaths = value;
});
});
},
child: const Text("bottomSheetImageSelector"),
),
Additional information #
If you have any issues, questions, or suggestions related to this package, please feel free to contact us at swan.dev1993@gmail.com. We welcome your feedback and will do our best to address any problems or provide assistance. For more information about this package, you can also visit our GitHub repository where you can find additional resources, contribute to the package's development, and file issues or bug reports. We appreciate your contributions and feedback, and we aim to make this package as useful as possible for our users. Thank you for using our package, and we look forward to hearing from you!