ruffde_highlights 0.0.3 ruffde_highlights: ^0.0.3 copied to clipboard
A package that is is developed and maintain by Ruffde Team and used internally
ruffde_highlights #
Usage #
StoryPageView
needs at least three arguments: itemBuilder
, pageLength
, and storyLength
.
/// Minimum example to explain the usage.
return Scaffold(
body: HeightLightPageView(
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 argumentpageIndex
-
pageLength
is just the length ofHeightLightPageView
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: HeightLightPageView(
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 ofStoryModel
/// Example Data Model
class UserModel {
UserModel(this.stories, this.userName, this.imageUrl);
final List<HeightLightModel> stories;
final String userName;
final String imageUrl;
}
class HeightLightModel {
HeightLightModel(this.imageUrl);
final String imageUrl;
}