Instagram stories like UI with rich animations and customizability.
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,
);-
itemBuilderbuilds the content of each story and is called with the index of the pageView and the index of the story on the page. -
storyLengthdecides the length of story for each page. The example above always returns 3, but it should depend onpageIndex. -
pageLengthis just the length ofStoryPageView
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);
},
),
);gestureItemBuilderbuilds 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.
-
onPageLimitReachedis called when the very last story is finished. -
It is recommended to use data model with two layers. In this case,
UserModelwhich has the list ofStoryModel
/// 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;
}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.
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;
 Santa Takahashi 💻 |
 Isaias Mejia de los Santos 💻 |
 Медик 💻 |
 Alperen Soysal 💻 |
 AtixD 💻 |
 harshitFinmapp 💻 |
 dmitry-kotorov 💻 |
 sachin kumar rajput 💻 |
 Mohamed Othman 💻 |
![allcontributors[bot] avatar](https://avatars.githubusercontent.com/in/23186?v=4 "allcontributors[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent