flutter 故事编辑器

这是模仿Instagram故事创建者风格的软件包，您可以使用它来创建包含图片、文本、贴纸（GIF）和手指绘画的图像。它们可以导出为图像到图库，或直接分享到社交网络。

演示

安装

此软件包仅在Android上进行了测试，部分功能在Web上可用
将stories_editor: 0.1.0添加到您的pubspec.yaml依赖项中，然后导入它。

import 'package:stories_editor/stories_editor.dart';

如何使用

在AndroidMAnifest.xml文件中添加uses-permission

 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
     android:maxSdkVersion="31" />
 <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.VIBRATE"/>

在您的runApp()中添加MultiProvider，如下所示

void main() {
  runApp(
    MultiProvider(
      providers: StoriesEditorProvider().providers, /// is required to use it
      child: const MyApp(),
    )
  );
}

创建一个StoriesEditor()小部件，并传入参数

StoriesEditor(
    giphyKey: '[YOUR GIPHY API KEY]', /// (String) required param
     onDone: (String uri){
      /// uri is the local path of final render Uint8List
      /// here your code
     },
    colorList: [] /// (List<Color>[]) optional param 
    gradientColors: [] /// (List<List<Color>>[]) optional param 
    middleBottomWidget: Container() /// (Widget) optional param, you can add your own logo or text in the bottom tool
    fontList: [] /// (List<String>) optional param
    fontPackage: '' /// (String) if you use a own font list is required add your name app package
);

示例

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:share_plus/share_plus.dart';
import 'package:stories_editor/stories_editor.dart';

void main() {
  runApp(
    MultiProvider(
      providers: StoriesEditorProvider().providers,
      child: const MyApp(),
    )
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter stories editor Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: const Example(),
    );
  }
}

class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);



  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black,
        resizeToAvoidBottomInset: false,
        body: Container(
          child: Center(
            child: ElevatedButton(
              onPressed: (){
                Navigator.push(context, MaterialPageRoute(builder: (context) => StoriesEditor(
                  giphyKey: '[YOUR GIPHY API KEY]',
                  onDone: (uri){
                    print(uri);
                    if(uri != null){
                      Share.shareFiles([uri]);
                    }
                  },
                ))
                );
              },
              child: const Text('Open Stories Editor'),
            ),
          ),
        )
    );
  }
}