Giter Club home page Giter Club logo

story's Introduction

version likes popularity License: MIT all contributors

Instagram stories like UI with rich animations and customizability.

final 2

Usage

StoryPageView requires at least three arguments: itemBuilder, pageLength, and storyLength.

/// Minimum example to explain the usage.
return Scaffold(
  body: StoryPageView(
    itemBuilder: (context, pageIndex, storyIndex) {
      return Center(
        child: Text("Index of PageView: $pageIndex Index of story on each page: $storyIndex"),
      );
    },
    storyLength: (pageIndex) {
      return 3;
    },
    pageLength: 4,
  );
  • itemBuilder builds the content of each story and is called with the index of the pageView and the index of the story on the page.

  • storyLength decides the length of story for each page. The example above always returns 3, but it should depend on pageIndex.

  • pageLength is just the length of StoryPageView

The example above just shows 12 stories by 4 pages, which is not practical.

This one is the proper usage, extracted from example.

return Scaffold(
  body: StoryPageView(
    itemBuilder: (context, pageIndex, storyIndex) {
      final user = sampleUsers[pageIndex];
      final story = user.stories[storyIndex];
      return Stack(
        children: [
          Positioned.fill(
            child: Container(color: Colors.black),
          ),
          Positioned.fill(
            child: Image.network(
              story.imageUrl,
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 44, left: 8),
            child: Row(
              children: [
                Container(
                  height: 32,
                  width: 32,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage(user.imageUrl),
                      fit: BoxFit.cover,
                    ),
                    shape: BoxShape.circle,
                  ),
                ),
                const SizedBox(
                  width: 8,
                ),
                Text(
                  user.userName,
                  style: TextStyle(
                    fontSize: 17,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ],
      );
    },
    gestureItemBuilder: (context, pageIndex, storyIndex) {
      return Align(
        alignment: Alignment.topRight,
        child: Padding(
          padding: const EdgeInsets.only(top: 32),
          child: IconButton(
            padding: EdgeInsets.zero,
            color: Colors.white,
            icon: Icon(Icons.close),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ),
      );
    },
    pageLength: sampleUsers.length,
    storyLength: (int pageIndex) {
      return sampleUsers[pageIndex].stories.length;
    },
    onPageLimitReached: () {
      Navigator.pop(context);
    },
  ),
);
  • gestureItemBuilder builds widgets that need gesture actions

In this case, IconButton to close the page is in the callback.

You CANNOT place the gesture widgets in itemBuilder as they are covered and disabled by the default story gestures.

  • onPageLimitReached is called when the very last story is finished.

  • It is recommended to use data model with two layers. In this case, UserModel which has the list of StoryModel

/// Example Data Model
class UserModel {
  UserModel(this.stories, this.userName, this.imageUrl);

  final List<StoryModel> stories;
  final String userName;
  final String imageUrl;
}

class StoryModel {
  StoryModel(this.imageUrl);

  final String imageUrl;
}

StoryImage

If you show images in StoryPageView, use StoryImage. It can stop the indicator until the image is fully loaded.

StoryImage(
  /// key is required
  key: ValueKey(story.imageUrl),
  imageProvider: NetworkImage(
    story.imageUrl,
  ),
  fit: BoxFit.fitWidth,
)

Be sure to assign the unique key value for each image, otherwise the image loading will not be handled properly.

indicatorAnimationController

If you stop/start the animation of the story with your custom widgets, use indicatorAnimationController

class _StoryPageState extends State<StoryPage> {
  late ValueNotifier<IndicatorAnimationCommand> indicatorAnimationController;

  @override
  void initState() {
    super.initState();
    indicatorAnimationController = ValueNotifier<IndicatorAnimationCommand>(
        IndicatorAnimationCommand.resume);
  }

  @override
  void dispose() {
    indicatorAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StoryPageView(
        indicatorAnimationController: indicatorAnimationController,
        ...,
      ),
    );
  }
}

Once the instance is passed to StoryPageView, you can stop handle the indicator by the methods below.

/// To pause the indicator
indicatorAnimationController.value = IndicatorAnimationCommand.pause;

/// To resume the indicator
indicatorAnimationController.value = IndicatorAnimationCommand.resume;

Contributors

Santa Takahashi
Santa Takahashi

💻
Isaias Mejia de los Santos
Isaias Mejia de los Santos

💻
Медик
Медик

💻
Alperen Soysal
Alperen Soysal

💻
AtixD
AtixD

💻
harshitFinmapp
harshitFinmapp

💻
dmitry-kotorov
dmitry-kotorov

💻

story's People

Contributors

santa112358 avatar dimakutko avatar dmitry-kotorov avatar imejiasoft avatar allcontributors[bot] avatar realmedik avatar alperensoysall avatar atixd avatar harshitfinmapp avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.