Instagram Assets Picker Or Image Picker | A flutter image picker based on Instagram picker UI

10 May 2023
0
197

Instagram Assets Picker

An image picker based on Instagram picker UI. It is using the powerful flutter_wechat_assets_picker package to handle the picker and a custom version of image_crop for crop.

🚀 Features

✅ Instagram layout
Scroll behaviors, animation
Preview, select, unselect action logic
✅ Theme and language customization
✅ Multiple images pick (with maximum limit)
✅ Restore state of picker after pop
✅ Change aspect ratio from 1:1 to 4:5
✅ Crop all images at once and receive a stream with a progress value
❌ Videos are not supported

📸 Screenshots

Layout and scrollCrop

📖 Installation

Add this package to the pubspec.yaml

insta_assets_picker: ^1.2.2

‼️ DO NOT SKIP THIS PART

Since this package is a custom delegate of flutter_wechat_assets_picker you MUST follow this package setup recommendation : installation guide.

👀 Usage

For more details check out the example.

Future<List<AssetEntity>?> callPicker() => InstaAssetPicker.pickAssets(
    context,
    title: 'Select images',
    maxAssets: 10,
    onCompleted: (Stream<InstaAssetsExportDetails> stream) {
        // TODO : handle crop stream result
        // i.e : display it using a StreamBuilder
        // - in the same page (closeOnComplete=true)
        // - send it to another page (closeOnComplete=false)
        // or use `stream.listen` to handle the data manually in your state manager
        // - ...
    },
);

Fields in InstaAssetsExportDetails:

NameTypeDescriptioncroppedFilesList<File>List of all cropped filesselectedAssetsList<AssetEntity>Selected assets without cropaspectRatiodoubleSelected aspect ratio (1 or 4/5)progressdoubleProgress indicator of the exportation (between 0 and 1)

Picker configuration

Please follow flutter_wechat_assets_picker documentation : AssetPickerConfig

Localizations

Please follow flutter_wechat_assets_picker documentation : Localizations

Theme customization

Most of the components of the picker can be customized using theme.

// set picker theme based on app theme primary color
final theme = InstaAssetPicker.themeData(Theme.of(context).primaryColor);
InstaAssetPicker.pickAssets(
    context,
    title: 'Select images',
    pickerTheme: theme.copyWith(
      canvasColor: Colors.black, // body background color
      splashColor: Color.grey, // ontap splash color
      colorScheme: theme.colorScheme.copyWith(
        background: Colors.black87, // albums list background color
      ),
      appBarTheme: theme.appBarTheme.copyWith(
        backgroundColor: Colors.black, // app bar background color
        titleTextStyle: Theme.of(context)
            .appBarTheme
            .titleTextStyle
            ?.copyWith(color: Colors.white), // change app bar title text style to be like app theme
      ),
    ),
    onCompleted: (_) {},
);