flutter_better_pickers 0.0.7 copy "flutter_better_pickers: ^0.0.7" to clipboard
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: PickerTheme for consistent styling across all pickers.
  • NEW: MediaManagerConfig for 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 #

picker8
 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!