Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/santa112358/story
Instagram stories like UI with rich animations and customizability.
https://github.com/santa112358/story
instagram stories
Last synced: 3 months ago
JSON representation
Instagram stories like UI with rich animations and customizability.
- Host: GitHub
- URL: https://github.com/santa112358/story
- Owner: santa112358
- License: mit
- Created: 2020-12-29T20:52:25.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-11T04:09:33.000Z (5 months ago)
- Last Synced: 2024-06-20T06:52:08.458Z (5 months ago)
- Topics: instagram, stories
- Language: Dart
- Homepage: https://pub.dev/packages/story
- Size: 231 KB
- Stars: 36
- Watchers: 1
- Forks: 54
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Instagram stories like UI with rich animations and customizability.
## Usage
`StoryPageView` requires at least three arguments: `itemBuilder`, `pageLength`, and `storyLength`.
``` dart
/// 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](https://pub.dev/packages/story/example).
``` dart
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`
```dart
/// Example Data Model
class UserModel {
UserModel(this.stories, this.userName, this.imageUrl);
final List 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.
``` dart
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`
``` dart
class _StoryPageState extends State {
late ValueNotifier indicatorAnimationController;
@override
void initState() {
super.initState();
indicatorAnimationController = ValueNotifier(
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.
```dart
/// To pause the indicator
indicatorAnimationController.value = IndicatorAnimationCommand.pause;
/// To resume the indicator
indicatorAnimationController.value = IndicatorAnimationCommand.resume;
```
## Contributors
Santa Takahashi
π»
Isaias Mejia de los Santos
π»
ΠΠ΅Π΄ΠΈΠΊ
π»
Alperen Soysal
π»
AtixD
π»
harshitFinmapp
π»
dmitry-kotorov
π»
sachin kumar rajput
π»
Mohamed Othman
π»