blidzco / story_time

Instagram stories like UI with rich animations and customizability.

story_time

A fork of story. Instagram stories like UI with rich animations and even more customizability than the original package.

Usage

StoryPageView needs 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 is necessary to build the content of story. It is called with index of pageView and 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 the argument 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 is the builder for the widgets which needs gesture actions.

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

You CANNOT place the gesture widgets in itemBuilder because it is covered and disabled by 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;
}

Controlling animations

My point of forking the original package was to add the ability to control the duration of a specific index of a story. Look at the example to see how to use it if you are interested.

Callbacks for pausing and unpausing stories

The package also supports adding callbacks for pausing and unpausing a story to the StoryPageView widget. See the example project for more details.

Callbacks for moving to a different page

The package also supports adding callbacks for going a page backwards and for going a page forwards to the StoryPageView widget. See the example project for more details.

Callbacks for moving to a different story

The package also supports adding a callback for whenever the story index changes to the StoryPageView widget. See the example project for more details.

Tips

This package is still under development. If you have any requests or questions, please ask on github