Advance in the flutter project_ image_ Picker component usage

One 、 explain

Advance_image_picker yes flutter plug-in unit , For from Android and ios Select multiple pictures in the image library , Take new photos with your camera , And edit it .

The following figure shows the final effect ：

Here is a bug , Press When rotating the camera , The program will get stuck .

Two 、 Usage mode

IOS ：
Add these settings to ios/Runner/Info.plist

<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>
<key>NSMicrophoneUsageDescription</key>
<string>Can I use the mic please?</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>App need your agree, can visit your album</string>

Android ：
In your android/app/build.gradle The file will have the lowest Android sdk Version changed to 21（ Or higher ）.
Add activities and permissions to your AndroidManifest.xml, Just like the next step .

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="vn.weta.freemarimagepickerexample">

    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="freemarimagepicker_example"
        android:requestLegacyExternalStorage="true"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name="com.yalantis.ucrop.UCropActivity"
            android:screenOrientation="portrait"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>
    </application>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.CAMERA" />
</manifest>

Add to pubspec
flutter Project pubspec.yaml Add dependency to ：

dependencies:
  advance_image_picker: $latest_version

3、 ... and 、 Project code

The latest DIY project is through Getx Development . The plug-in test code is divided into view End code and controller End code , Posted here

view End code ：

class ImagePickerScreen extends GetView<ImagePickerController> {
    
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: Obx(
          () => Text(
            controller.pageName.value,
            style: TextStyle(
              color: Theme.of(context).appBarTheme.titleTextStyle!.color,
            ),
          ),
        ),
        centerTitle: true,
      ),
      body: _buildBody(context),
    );
  }

  Widget _buildBody(BuildContext context) {
    
    return SingleChildScrollView(
      child: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              child: ElevatedButton(
                onPressed: () {
    
                  controller.getImages();
                },
                child: Text(' Upload icon '),
              ),
            ),
            _buildImages(context),
          ],
        ),
      ),
    );
  }

  Widget _buildImages(BuildContext context) {
    
    return Obx(
      () => GridView.builder(
        itemCount: controller.imgObjs.length,
        shrinkWrap: true,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4, mainAxisSpacing: 2),
        itemBuilder: (BuildContext context, int index) {
    
          return Padding(
            padding: EdgeInsets.all(2),
            child: Image.file(
              File(controller.imgObjs[index]),
              height: 80,
              fit: BoxFit.cover,
            ),
          );
        },
      ),
    );
  }
}

contoller Part of the code ：
ApiRepository For network requests , Here we use constructor dependency injection . Because during the test , No network requests are used , This part is omitted .

class ImagePickerController extends GetxController
    with GetSingleTickerProviderStateMixin {
    
  final pageName = "imagePicker".obs;
  final ApiRepository apiRepository;
  late ImagePickerConfigs imageConfig;

  RxList<String> imgObjs = <String>[].obs;

  CommodityAddController({
    required this.apiRepository});

  @override
  void onInit() {
    
    imageConfig = ImagePickerConfigs();
    imageConfig.appBarTextColor = Colors.white;
    imageConfig.appBarBackgroundColor = Colors.black54;
    imageConfig.stickerFeatureEnabled = false; // ON/OFF features
    imageConfig.translateFunc = (name, value) => name.tr;
    imageConfig.iconCamera = FontAwesomeIcons.camera;
    imageConfig.doneButtonStyle = DoneButtonStyle.outlinedButton;
    imageConfig.adjustFeatureEnabled = false;
    imageConfig.externalImageEditors['external_image_editor_1'] = EditorParams(
      title: 'external_image_editor_1',
      icon: Icons.edit_rounded,
      onEditorEvent: (
              {
    required BuildContext context,
              required File file,
              required String title,
              int maxWidth = 1080,
              int maxHeight = 1920,
              int compressQuality = 90,
              ImagePickerConfigs? configs}) async =>
          navigator!.push(
        MaterialPageRoute(
          fullscreenDialog: true,
          builder: (context) => ImageEdit(
              file: file,
              title: title,
              maxWidth: maxWidth,
              maxHeight: maxHeight,
              configs: configs),
        ),
      ),
    );
    imageConfig.imagePreProcessingBeforeEditingEnabled = true;
    imageConfig.filterFeatureEnabled = false;
    imageConfig.imagePreProcessingEnabled = true;
    imageConfig.cropFeatureEnabled = false;

    super.onInit();
  }

  void getImages() async {
    
    List<ImageObject> objects = await navigator!.push(
      MaterialPageRoute(
        builder: (_) {
    
          return ImagePicker(maxCount: 5);
        },
      ),
    );
    if (objects.length > 0) {
    
      imgObjs.addAll(objects.map((e) => e.modifiedPath).toList());
    }
  }
}

Four 、 Last thing

ImagePickerConfigs by imagePicker Configuration information . The plug-in pops up the image selection interface , Display language default Display in English .

imageConfig.translateFunc = (name, value) => name.tr; Used for configuration imagePicker Language internationalization .

getx Multilingual configuration ：

1. File structure ：
   
2. The contents of the document ：

translation_service.dart：

import 'dart:ui';

import 'package:get/get.dart';

import 'en_US.dart';
import 'zh_CN.dart';

class TranslationService extends Translations {
    
  static Locale? get locale => Get.deviceLocale;
  static final fallbackLocale = Locale('zh', 'CN');
  @override
  Map<String, Map<String, String>> get keys => {
    
        'zh_CN': zh_CN,
        'en_US': en_US,
      };
}

en_US.dart

const Map<String, String> en_US = {
    
  'name': 'name',
  'image_picker_camera_title': 'camera',
  'image_picker_album_title': 'album',

  'image_picker_select_button_title': 'select',
  'image_picker_select_images_title': 'selected images count:',
  'image_picker_select_images_guide': 'drag images for sorting list...:',
  'image_picker_exposure_title':'exposure',
  'image_picker_exposure_locked_title':'locked',
  'image_picker_exposure_auto_title':'auto',
};

zh_CN.dart

const Map<String, String> zh_CN = {
    
  'name': ' user name ',
  'image_picker_camera_title': ' The camera ',
  'image_picker_album_title': ' Photo album ',
  'image_picker_select_button_title': ' determine ',
  'image_picker_select_images_title': ' Have chosen :',
  'image_picker_select_images_guide': ' Drag pictures to reorder :',
  'image_picker_exposure_title': ' Filter ',
  'image_picker_exposure_locked_title': ' lock ',
  'image_picker_exposure_auto_title': ' Automatically ',
  'image_picker_confirm': ' determine ',
  'image_picker_confirm_delete': ' Do you want to delete this photo ',
  'no': ' no ',
  'yes': ' yes ',
  'image_picker_exit_without_selecting': ' Do you want to exit without selecting an image ？',
  'image_picker_preview_title': ' preview ',
  'image_picker_image_edit_title': ' edit ',
  'image_picker_image_edit_contrast': ' Contrast ',
  'image_picker_image_edit_brightness': ' brightness ',
  'image_picker_image_edit_saturation': ' saturation ',
  'image_picker_image_filter_title': ' Filter ',
  'image_picker_confirm_reset_changes': ' Reset changes ？',
};

main.dart in need Pass parameters to GetMaterialApp To define language and Translation .

return GetMaterialApp(
    translations: Messages(), //  Your translation 
    locale: Locale('zh', 'CN'), //  Will be translated in the language specified here 
    fallbackLocale: Locale('en', 'US'), //  Add a callback language option , In case the language translation specified above does not exist 
);

Configuration in the project ：