Flutter未知功能插件advstory的探索使用

AdvStory 📸

Quite simple & Quite advanced

Buy Me A Coffee

🚀 Advanced Story viewer for Flutter. Create and customize slideshow presentations similar to Instagram, TikTok and Snapchat stories. Supports image, video and custom story contents. Full control over stories for developer and smooth experience for users.

Features

• High performance, minimum delays, preload and cache enabled. Works using builders, provides flexibility and lazy loading.
• Story view can be in any shape, size and position or full-screen.
• Predefined story types for images, videos and simple contents. But not limited to these types, allows you to use base class of predefined widgets. This literally makes the options endless.
• Gestures for skip story, skip content, pause, resume and close.
• Interceptors that block events and manipulate the story flow without being noticed by the app user.
• A functional controller for listening interactions and skip stories/contents, pause, play and more…
• Predefined highly customizable story tray. But you are not limited to that, you can create your own non-animated or animated trays, AdvStory handles animation.
• Header and footer areas for predefined stories with customization option specific to a predefined story content.
• Object based, you can create as many story views as you want within the same application.
• Well documented, go to docs:
  • Documentation

What can I do using AdvStory?

• Quite simple: when you don’t need much customization, a fully functional story view is just 8 lines of code.

  AdvStory(
    storyCount: 5,
    storyBuilder: (storyIndex) => Story(
      contentCount: 10,
      contentBuilder: (contentIndex) => const ImageContent(url: ""),
    ),
    trayBuilder: (index) => AdvStoryTray(url: ""),
  );
  

• Quite advanced: when you need more you can,

  • create stories asynchronously in storyBuilder, send some requests to your server!
  • create different story trays and tray animations for each story, trays can be any widget you want.
  • create different footer & header areas for each story contents.
  • create contents with different skip durations.
  • create your own contents, AdvStory provides ways to you for caching media and handling story logic.
  • disable gestures, jump to a position, hide and show header/footer areas, pause and resume story via controller.
  • block events and call your own callbacks instead default story flow actions via interceptor.
  • create story view using AdvStory.player to define opening animations, custom shape, size…
  • customize tray list, story progress indicator, loading screen.

Supporters & Sponsors

• jtkeyva ☕️ x 5

Roadmap

Some screenshots:

示例代码

main.dart

import 'package:example/examples/controller_usage.dart';
import 'package:example/examples/player.dart';
import 'package:example/tabs/footer_header_showcase.dart';
import 'package:example/tabs/story_type_showcase.dart';
import 'package:example/tabs/tray_showcase.dart';
import 'package:flutter/material.dart';

/// All examples are in the lib/examples. Other classes are related to
/// UI and fake data, no need to check them.
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const AdvStoryDemoApp());
}

class AdvStoryDemoApp extends StatelessWidget {
  const AdvStoryDemoApp({Key? key}) : super(key: key);

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

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

  @override
  State<AdvStoryDemo> createState() => _AdvStoryDemoState();
}

class _AdvStoryDemoState extends State<AdvStoryDemo> {
  int _selectedIndex = 0;
  late final items = const [
    TrayShowcase(),
    StoryTypeShowcase(),
    FooterHeaderShowcase(),
    ControllerUsage(),
    Player(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: items[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            label: "Trays",
            icon: Icon(Icons.palette_outlined),
          ),
          BottomNavigationBarItem(
            label: "Contents",
            icon: Icon(Icons.extension),
          ),
          BottomNavigationBarItem(
            label: "Footer &\nHeader",
            icon: Icon(Icons.unfold_more_outlined),
          ),
          BottomNavigationBarItem(
            label: "Controller",
            icon: Icon(Icons.signpost_outlined),
          ),
          BottomNavigationBarItem(
            label: "Player",
            icon: Icon(Icons.play_circle_rounded),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.deepOrange,
        unselectedItemColor: Colors.grey,
        showUnselectedLabels: true,
        onTap: (index) => setState(() {
          _selectedIndex = index;
        }),
      ),
    );
  }
}

这个帖子详细介绍了Flutter插件advstory的功能和用法，并提供了一个简单的示例代码，帮助你快速上手。如果你有任何问题或需要更详细的解释，请随时提问！