Flutter图片拼贴插件image_collage_widget_updated的使用

Flutter图片拼贴插件image_collage_widget_updated的使用

A flutter package for creating photo collages in your applications.

预览

关键特性

• 创建11种不同类型的拼贴。
• 可以从图库预加载图像（仅限Android）。
• 允许用户向拼贴中添加或删除照片。
• 用户可以从图库或相机更新图像。
• 不用担心权限问题，我们已经处理好了。

使用方法

步骤1：在pubspec.yaml文件中添加依赖

dependencies:
  ...
  image_collage_widget: ^1.0.1

步骤2：准备AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

步骤3：准备Info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>Need to access photo library</string>
<key>NSCameraUsageDescription</key>
<string>To upload your picture</string>

步骤4：在Dart文件中添加ImageCollageWidget

import 'package:image_collage_widget/image_collage_widget.dart';
import 'package:image_collage_widget/utils/collage_type.dart';

...

/// @param withImage:- 如果withImage为true，则将从给定的{filePath（默认值= "Camera"）}加载图像
/// @param collageType:- CollageType.CenterBig

child: ImageCollageWidget(
  collageType: widget.collageType,
  withImage: true,
  filePath: _directory?.path?.toString(),
),

依赖项

• flutter_staggered_grid_view
• flutter_bloc
• flutter_file_manager
• permission_handler
• image_picker
• equatable

许可证

Image Collage Widget 的许可证为 MIT 许可证。

让我们知道！

如果您在项目中使用了我们的组件，请发送电子邮件到 sales@mindinventory.com 告诉我们。如果您有任何问题或建议，请随时与我们联系。

示例代码

import 'package:flutter/material.dart';

import 'src/screens/collage_sample.dart';
import 'src/tranistions/fade_route_transition.dart';

import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:image_collage_widget_updated/utils/CollageType.dart';

void main() {
  BlocOverrides.runZoned(
    () => runApp(MyApp()),
    blocObserver: AppBlocObserver(),
  );
}

// 自定义[BlocObserver]，用于观察所有bloc和cubit的状态变化。
class AppBlocObserver extends BlocObserver {
  [@override](/user/override)
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
  }

  [@override](/user/override)
  void onTransition(Bloc bloc, Transition transition) {
    super.onTransition(bloc, transition);
  }
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.blue,
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var color = Colors.white;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    Widget buildRaisedButton(CollageType collageType, String text) {
      return ElevatedButton(
        onPressed: () => pushImageWidget(collageType),
        style: ButtonStyle(
            foregroundColor: MaterialStateProperty.all(Colors.white),
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              buttonShape(),
            )
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(text),
        ),
      );
    }

    ///创建多个形状
    return Scaffold(
      appBar: AppBar(
        title: Text("测试"),
      ),
      body: Center(
        child: ListView(
          padding: EdgeInsets.all(16.0),
          shrinkWrap: true,
          children: [
            buildRaisedButton(CollageType.VSplit, 'Vsplit'),
            buildRaisedButton(CollageType.HSplit, 'HSplit'),
            buildRaisedButton(CollageType.FourSquare, 'FourSquare'),
            buildRaisedButton(CollageType.NineSquare, 'NineSquare'),
            buildRaisedButton(CollageType.ThreeVertical, 'ThreeVertical'),
            buildRaisedButton(CollageType.ThreeHorizontal, 'ThreeHorizontal'),
            buildRaisedButton(CollageType.LeftBig, 'LeftBig'),
            buildRaisedButton(CollageType.RightBig, 'RightBig'),
            buildRaisedButton(CollageType.FourLeftBig, 'FourLeftBig'),
            buildRaisedButton(CollageType.VMiddleTwo, 'VMiddleTwo'),
            buildRaisedButton(CollageType.CenterBig, 'CenterBig'),
          ],
        ),
      ),
    );
  }

  ///点击特定类型的按钮时显示该类型的widget
  pushImageWidget(CollageType type) async {
    await Navigator.of(context).push(
      FadeRouteTransition(page: CollageSample(type)),
    );
  }

  RoundedRectangleBorder buttonShape() {
    return RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0));
  }
}