storyig 0.1.3

Flutter widgets for Instagram-like story circles and a lightweight story creator.

storyig

A Flutter package that provides Instagram-style story building blocks:

• Story circles row (StoryCircleList)
• Story creation flow (StoryCreator)
• Fullscreen story playback (StoryViewer)
• Built-in video autoplay in StoryViewer using video_player

Install

Add to pubspec.yaml:

dependencies:
  storyig: ^0.1.3

For local development:

dependencies:
  storyig:
    path: ../storyig

Quick usage

StoryCircleList(
  users: users,
  onAddTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => StoryCreator(
          onPickMedia: (_) async => 'https://picsum.photos/500/900',
          onSubmit: (draft) async {},
        ),
      ),
    );
  },
  onUserTap: (user) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => StoryViewer(
          users: users.where((u) => u.stories.isNotEmpty).toList(),
          initialUserIndex: users.indexWhere((u) => u.id == user.id),
          onStorySeen: (userIndex, storyIndex, story) {},
        ),
      ),
    );
  },
)

Cross-platform media picker snippet (Web + Mobile)

Add these in your app:

dependencies:
  file_picker: ^10.3.2
  image_picker: ^1.2.0

Use file_picker for web and image_picker for mobile:

Future<String?> pickStoryMedia(BuildContext context) async {
  if (kIsWeb) {
    final result = await FilePicker.platform.pickFiles(
      type: FileType.custom,
      allowedExtensions: ['jpg', 'jpeg', 'png', 'webp', 'gif', 'mp4', 'mov'],
      withData: true,
    );
    if (result == null || result.files.single.bytes == null) return null;

    final bytes = result.files.single.bytes!;
    return 'data:image/jpeg;base64,${base64Encode(bytes)}';
  }

  final picker = ImagePicker();
  final file = await picker.pickImage(source: ImageSource.gallery);
  if (file == null) return null;

  final bytes = await file.readAsBytes();
  return 'data:image/jpeg;base64,${base64Encode(bytes)}';
}

Pass a custom preview renderer to StoryCreator:

StoryCreator(
  onPickMedia: pickStoryMedia,
  onSubmit: (draft) async {},
  previewBuilder: (_, mediaPath) => Image.network(mediaPath, fit: BoxFit.cover),
)

See example/lib/main.dart for a complete working integration.