story_maker License: MIT

A package for creating instagram like story, you can use this package to edit images and make it story ready by adding other contents over it like text and gradients.

GIF 1 GIF 2

Getting Started

Add this to your package's pubspec.yaml file:

dependencies:
  story_maker: ^1.0.4

Example

import 'package:story_maker/story_maker.dart';

class _MyAppState extends State<MyApp> {
  File? image;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Story Designer Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                await [
                  Permission.photos,
                  Permission.storage,
                ].request();
                final picker = ImagePicker();
                await picker
                    .pickImage(source: ImageSource.gallery)
                    .then((file) async {
                  final File editedFile = await Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => StoryMaker(
                        filePath: file!.path,
                      ),
                    ),
                  );
                  setState(() {
                    image = editedFile;
                  });
                  print('editedFile: ${image!.path}');
                });
              },
              child: const Text('Pick Image'),
            ),
            if (image != null)
              Expanded(
                child: Image.file(image!),
              ),
          ],
        ),
      ),
    );
  }
}

Available for use now

  • x Image scaling
  • x Rotate the image
  • x Adding text to an image
  • x Choosing text size, font family, and color
  • x Selecting gradients for text background
  • x Selecting gradients for the background of the image

To be added

  • Customize text font list
  • Customize the list of text colors
  • Customize gradient color list
  • Adding stickers
  • Adding color filters
  • Animations for text
  • Export GIF

Libraries

background_gradient_selector_widget
context_extension
editable_items
font_colors
font_family_select_widget
font_styles
gradient_util
gradients
item_type
overlay_item_widget
remove_widget
size_slider_widget
story_maker
text_color_select_widget
text_field_widget
top_tools_widget