A Camera Picker Based on WeChat's UI Which Is A Separate Runnable Extension

A camera picker based on WeChat's UI which is a separate runnable extension to wechat_assets_picker. The package based on camera for camera functions and photo_manager for asset implementation.

Current WeChat version that UI based on: 8.3.x UI designs will be updated following the WeChat update in anytime.

See the Migration Guide to learn how to migrate between breaking changes.

Features ✨ 

• ♿ Complete a11y support with TalkBack and VoiceOver
• ♻️ Fully implementable with States override
• 🎏 Fully customizable theme based on ThemeData
• 💚 Completely WeChat style (even more)
• ⚡️ Adjustable performance with different configurations
• 📷 Picture taking support
• 🎥 Video recording support
  • ⏱ Duration limitation support
  • 🔍 Scale when recording support
• ☀️ Exposure adjust support
• 🔍️ Scale with pinch support
• 💱 i18n support
  • ⏪ RTL language support
• 🖾 Foreground custom widget builder support
• 🕹️ Intercept saving with custom process

Screenshots 📸 

READ THIS FIRST ‼️ 

Be aware of below notices before you started anything:

• Due to understanding differences and the limitation of a single document, documents will not cover all the contents. If you find nothing related to your expected features and cannot understand about concepts, run the example project and check every options first. It has covered 90% of regular requests with the package.
• The package deeply integrates with the photo_manager plugin, make sure you understand these two concepts as much as possible:
  • Asset (photos/videos/audio) - AssetEntity
  • Assets collection (albums/libraries) - AssetPathEntity

When you have questions about related APIs and behaviors, check photo_manager's API docs for more details.

Most usages are detailed covered by the example. Please walk through the example carefully before you have any questions.

Preparing for use 🍭 

Versions compatibility 

The package only guarantees to be working on the stable version of Flutter. We won't update it in real-time to align with other channels of Flutter.

If you got a resolve conflict error when running flutter pub get, please use dependency_overrides to fix it.

Setup 

Run flutter pub add wechat_camera_picker, or add wechat_camera_picker to pubspec.yaml dependencies manually.

dependencies:
  wechat_camera_picker: ^latest_version

The latest stable version is: 

The latest dev version is: 

Then import the package in your code:

import 'package:wechat_camera_picker/wechat_camera_picker.dart';

See also:

• wechat_assets_picker#preparing-for-use
• camera#installation

Android 13 (API 33) permissions

When using the package, please upgrade targetSdkVersion and compileSdkVersion to 33. Otherwise, no assets can be fetched on Android 13.

If you don't need to take photos or videos, consider removing relevant permission in your apps, more specifically:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Add this if you need to take photos. -->
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
    <!-- Add this if you need to take videos. -->
    <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
</manifest>

Usage 📖 

Localizations 

When you're picking assets, the package will obtain the Locale? from your BuildContext, and return the corresponding text delegate of the current language. Make sure you have a valid Locale in your widget tree that can be accessed from the BuildContext. Otherwise, the default Chinese delegate will be used.

Embedded text delegates languages are:

• 简体中文 (default)
• English
• Tiếng Việt

If you want to use a custom/fixed text delegate, pass it through the CameraPickerConfig.textDelegate.

Simple usage 

final AssetEntity? entity = await CameraPicker.pickFromCamera(context);

With configurations 

Use CameraPickerConfig for more picking behaviors.

final AssetEntity? entity = await CameraPicker.pickFromCamera(
  context,
  pickerConfig: const CameraPickerConfig(),
);

Fields in CameraPickerConfig:

Using custom States 

All user interface can be customized through custom States, including:

• CameraPickerState
• CameraPickerViewerState

After override States, pass them through the picking method, more specifically:

• CameraPicker.pickFromCamera(createPickerState: () => CustomCameraPickerState());
• CameraPickerViewer.pushToViewer(..., createViewerState: () => CustomCameraPickerViewerState());

Frequently asked question 💭 

Why the orientation behavior is strange on iOS? 

Currently, the preview is not correctly synced on the iOS. You can find more details in this issue: https://github.com/flutter/flutter/issues/89216 . Other than that, please submit issues to describe your question.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add wechat_camera_picker

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  wechat_camera_picker: ^4.0.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:wechat_camera_picker/wechat_camera_picker.dart';

example/lib/main.dart

// Copyright 2019 The FlutterCandies author. All rights reserved.
// Use of this source code is governed by an Apache license that can be found
// in the LICENSE file.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'extensions/color_extension.dart';
import 'extensions/l10n_extensions.dart';
import 'l10n/gen/app_localizations.dart';
import 'pages/splash_page.dart';

const Color themeColor = Color(0xff00bc56);

String? packageVersion;

void main() {
  runApp(const MyApp());
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle.dark.copyWith(statusBarColor: Colors.transparent),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateTitle: (BuildContext context) => context.l10n.appTitle,
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: themeColor.swatch,
        textSelectionTheme: const TextSelectionThemeData(
          cursorColor: themeColor,
        ),
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: themeColor.swatch,
        textSelectionTheme: const TextSelectionThemeData(
          cursorColor: themeColor,
        ),
      ),
      home: const SplashPage(),
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
    );
  }
}

Download details:

Author: fluttercandies.com

Source: https://github.com/fluttercandies/flutter_wechat_camera_picker

#flutter #android #ios