hl_image_picker 1.2.16

Choose images/videos from the library, crop images, and capture new photos/videos with ease.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:hl_image_picker/hl_image_picker.dart';
import 'package:hl_image_picker_example/widgets/aspect_ratio_select.dart';
import 'package:hl_image_picker_example/widgets/custom_switch.dart';
import 'package:hl_image_picker_example/widgets/increase_decrease.dart';
import 'package:hl_image_picker_example/widgets/media_preview.dart';
import 'package:hl_image_picker_example/widgets/media_type_select.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Image Picker Demo',
      home: MyHomePage(title: 'Image Picker Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, this.title});

  final String? title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _picker = HLImagePicker();

  List<HLPickerItem> _selectedImages = [];

  bool _isCroppingEnabled = false;
  int _count = 4;
  MediaType _type = MediaType.all;
  bool _isExportThumbnail = true;
  bool _enablePreview = false;
  bool _usedCameraButton = true;
  int _numberOfColumn = 3;
  bool _includePrevSelected = false;
  CropAspectRatio? _aspectRatio;
  List<CropAspectRatioPreset>? _aspectRatioPresets;
  double _compressQuality = 0.9;
  CroppingStyle _croppingStyle = CroppingStyle.normal;

  _openPicker() async {
    try {
      final images = await _picker.openPicker(
        cropping: _isCroppingEnabled,
        selectedIds: _includePrevSelected
            ? _selectedImages.map((e) => e.id).toList()
            : null,
        pickerOptions: HLPickerOptions(
          mediaType: _type,
          enablePreview: _enablePreview,
          isExportThumbnail: _isExportThumbnail,
          thumbnailCompressFormat: CompressFormat.jpg,
          thumbnailCompressQuality: 0.9,
          maxSelectedAssets: _count,
          usedCameraButton: _usedCameraButton,
          numberOfColumn: _numberOfColumn,
          isGif: true,
        ),
        cropOptions: HLCropOptions(
          aspectRatio: _aspectRatio,
          aspectRatioPresets: _aspectRatioPresets,
          compressQuality: _compressQuality,
          compressFormat: CompressFormat.jpg,
          croppingStyle: _croppingStyle,
        ),
      );
      setState(() {
        _selectedImages = images;
      });
    } catch (e) {
      debugPrint(e.toString());
    }
  }

  _openCamera() async {
    try {
      final image = await _picker.openCamera(
        cropping: _isCroppingEnabled,
        cameraOptions: HLCameraOptions(
          cameraType:
              _type == MediaType.video ? CameraType.video : CameraType.image,
          recordVideoMaxSecond: 40,
          isExportThumbnail: _isExportThumbnail,
          thumbnailCompressFormat: CompressFormat.jpg,
          thumbnailCompressQuality: 0.9,
        ),
        cropOptions: HLCropOptions(
          aspectRatio: _aspectRatio,
          aspectRatioPresets: _aspectRatioPresets,
          croppingStyle: _croppingStyle,
        ),
      );
      setState(() {
        _selectedImages = [image];
      });
    } catch (e) {
      debugPrint(e.toString());
    }
  }

  _openCropper() async {
    try {
      if (_selectedImages.isEmpty) {
        return;
      }
      final image = await _picker.openCropper(
        _selectedImages[0].path,
        cropOptions: HLCropOptions(
          aspectRatio: _aspectRatio,
          aspectRatioPresets: _aspectRatioPresets,
          compressQuality: _compressQuality,
          compressFormat: CompressFormat.jpg,
          croppingStyle: _croppingStyle,
        ),
      );
      setState(() {
        _selectedImages = [image];
      });
    } catch (e) {
      debugPrint(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(widget.title!),
        ),
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              MediaPreview(items: _selectedImages),
              Align(
                child: ElevatedButton(
                  onPressed: _openPicker,
                  child: const Text('Open Picker'),
                ),
              ),
              Align(
                child: ElevatedButton(
                  onPressed: _openCamera,
                  child: const Text('Open camera'),
                ),
              ),
              Align(
                child: ElevatedButton(
                  onPressed: _selectedImages.isNotEmpty ? _openCropper : null,
                  child: const Text('Open cropper'),
                ),
              ),

              // Configuration
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Padding(
                      padding: EdgeInsets.only(bottom: 16.0),
                      child: Text('Configuration',
                          style: TextStyle(
                              fontSize: 16, fontWeight: FontWeight.bold)),
                    ),
                    MediaTypeSelect(
                      value: _type,
                      onChanged: (value) {
                        if (value != null && value != _type) {
                          setState(() {
                            _type = value;
                            _isCroppingEnabled = false;
                          });
                        }
                      },
                    ),
                    IncreaseAndDecrease(
                        label: "Max selected assets",
                        value: _count,
                        onChanged: (value) => setState(() {
                              _count = value;
                            })),
                    ..._type == MediaType.image
                        ? [
                            CustomSwitch(
                              label: 'Enable cropping',
                              value: _isCroppingEnabled,
                              onChanged: (value) => setState(() {
                                _isCroppingEnabled = value;
                              }),
                            ),
                          ]
                        : [
                            CustomSwitch(
                              label: 'Generate video thumbnail',
                              value: _isExportThumbnail,
                              onChanged: (value) => setState(() {
                                _isExportThumbnail = value;
                              }),
                            ),
                          ],

                    if (_isCroppingEnabled) ...[
                      const SizedBox(height: 16),
                      const Text("Cropping style"),
                      Row(
                        children: [
                          Expanded(
                            child: RadioListTile(
                              value: CroppingStyle.normal,
                              groupValue: _croppingStyle,
                              title: const Text("Normal"),
                              onChanged: (value) {
                                setState(() {
                                  _croppingStyle = CroppingStyle.normal;
                                });
                              },
                            ),
                          ),
                          Expanded(
                            child: RadioListTile(
                              value: CroppingStyle.circular,
                              groupValue: _croppingStyle,
                              title: const Text("Circular"),
                              onChanged: (_) {
                                setState(() {
                                  _croppingStyle = CroppingStyle.circular;
                                });
                              },
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 16),
                      AspectRatioSelect(
                          aspectRatio: _aspectRatio,
                          aspectRatioPresets: _aspectRatioPresets,
                          onChangedPreset: (preset, value) {
                            setState(() {
                              if (_aspectRatioPresets == null) {
                                _aspectRatioPresets = [preset];
                              } else {
                                if (value) {
                                  _aspectRatioPresets!.add(preset);
                                } else {
                                  _aspectRatioPresets!.remove(preset);
                                  if (_aspectRatioPresets!.isEmpty) {
                                    _aspectRatioPresets = null;
                                  }
                                }
                              }
                            });
                          },
                          onChangeCustomRatio: (newRatio) => {
                                setState(() {
                                  _aspectRatio = newRatio;
                                })
                              }),
                      const SizedBox(height: 16),
                      Text("Compress quality ($_compressQuality)"),
                      Slider(
                          label: "$_compressQuality",
                          value: _compressQuality,
                          min: 0.1,
                          max: 1,
                          onChanged: (value) {
                            setState(() {
                              _compressQuality =
                                  double.parse(value.toStringAsFixed(1));
                            });
                          }),
                    ],

                    // Common
                    const Padding(
                      padding: EdgeInsets.only(top: 32.0),
                      child: Text('Common Configuration',
                          style: TextStyle(
                              fontSize: 16, fontWeight: FontWeight.bold)),
                    ),
                    CustomSwitch(
                      label: 'Enable preview',
                      value: _enablePreview,
                      onChanged: (value) => setState(() {
                        _enablePreview = value;
                      }),
                    ),
                    CustomSwitch(
                      label: 'Show camera button in picker',
                      value: _usedCameraButton,
                      onChanged: (value) => setState(() {
                        _usedCameraButton = value;
                      }),
                    ),
                    CustomSwitch(
                      label: 'Include previously selected items',
                      value: _includePrevSelected,
                      onChanged: (value) => setState(() {
                        _includePrevSelected = value;
                      }),
                    ),
                    IncreaseAndDecrease(
                        label: "Number of columns",
                        value: _numberOfColumn,
                        onChanged: (value) => setState(() {
                              _numberOfColumn = value;
                            })),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}