Flutter故事编辑器插件mirroru_story_editor的使用

特性

miroru故事编辑器在主题定制和现代、可扩展架构方面具有优势。它遵循Material Design指南，使用ThemeData进行所有主题设置，简化了修改应用程序外观和感觉的过程。

• 智能主题适应
  根据所选背景图像的亮度自动调整主题，在浅色模式和深色模式之间切换，增强用户体验和可读性。
• 快速主题定制
  通过使用ThemeData，可以轻松高效地更改主题以匹配您的偏好或品牌身份。
• 设计灵活
  我们的架构确保易于定制和未来的扩展，使miroru故事编辑器保持技术前沿。
• 多语言支持
  miroru故事编辑器支持六种语言：英语、日语、中文、韩语、俄语和印地语，满足多样化用户群体的需求。

支持的语言

开始使用

首先，添加插件到你的pubspec.yaml文件中：

dependencies:
  miroru_story_editor: ^最新版本号

然后运行以下命令来安装插件：

flutter pub add miroru_story_editor

使用示例

完整示例Demo

下面是一个完整的示例代码，展示了如何使用miroru_story_editor插件来创建一个简单的Flutter应用：

import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:miroru_story_editor/miroru_story_editor.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:device_info_plus/device_info_plus.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  Uint8List? image;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('miroru故事编辑器'),
      ),
      body: Column(
        children: [
          Expanded(
            child: image != null
                ? Image.memory(image!) // 显示编辑后的图片
                : Center(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        SizedBox(
                          width: 200,
                          height: 200,
                          child: Image.asset('assets/images/miroru_girl.png'), // 默认显示的图片
                        ),
                      ],
                    ),
                  ),
          ),
          Center(
            child: FilledButton(
              onPressed: () async {
                // 请求权限
                if (Platform.isAndroid) {
                  final deviceInfo = DeviceInfoPlugin();
                  final androidInfo = await deviceInfo.androidInfo;
                  if (androidInfo.version.sdkInt >= 33) {
                    await Permission.photos.request(); // Android 13及以上请求照片权限
                  } else {
                    await Permission.storage.request(); // Android 13以下请求存储权限
                  }
                } else {
                  await Permission.photos.request(); // iOS请求照片权限
                }

                // 打开图片选择器
                final file = await ImagePicker().pickImage(
                  source: ImageSource.gallery, // 从相册选择图片
                );

                if (file == null) {
                  return; // 用户取消选择
                }

                if (!context.mounted) {
                  return; // 确保上下文仍然存在
                }

                // 打开miroru故事编辑器
                final imageData = await showMiroruStoryEditor(
                  context,
                  imageFile: File(file.path), // 传递选择的图片文件
                );

                if (imageData == null) {
                  return; // 用户取消编辑
                }

                setState(() {
                  image = imageData; // 更新状态，显示编辑后的图片
                });
              },
              child: const Text('打开miroru故事编辑器'),
            ),
          ),
        ],
      ),
      bottomNavigationBar: const SafeArea(
        child: Padding(
          padding: EdgeInsets.all(8),
          child: Text(
            'naoki namba / miroru.com',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

主要功能说明

1. 权限处理
   在打开图片选择器之前，根据平台和Android版本请求相应的权限。对于Android 13及以上版本，请求照片权限；对于Android 13以下版本，请求存储权限。iOS则统一请求照片权限。

2. 图片选择
   使用ImagePicker从相册中选择一张图片。如果用户取消选择，则不会继续执行后续操作。

3. 打开miroru故事编辑器
   调用showMiroruStoryEditor方法，传递选择的图片文件。编辑器返回编辑后的图片数据（Uint8List），并将其显示在界面上。

4. 显示编辑后的图片
   如果用户成功编辑了图片，编辑后的图片将显示在界面上。如果没有编辑或取消编辑，则保持原样。

自定义主题

你可以通过传递ThemeDataDto来自定义编辑器的主题。例如：

await showMiroruStoryEditor(
  context,
  imageFile: File(file.path),
  themeDataDto: ThemeDataDto(
    themeLight: yourLightTheme, // 自定义浅色主题
    themeDark: yourDarkTheme,   // 自定义深色主题
  ),
);

更改语言

你还可以通过传递languageType参数来更改编辑器的语言。例如，将语言设置为日语：

await showMiroruStory_editor(
  context,
  imageFile: File(file.path),
  languageType: LanguageType.ja, // 设置为日语
);