blackmann / story_view

Story view for apps with stories.
BSD 3-Clause "New" or "Revised" License
417 stars 342 forks source link

Story blinks with a white screen when switching from one story to the next #190

Closed SmilingFarood closed 3 months ago

SmilingFarood commented 3 months ago

I am using the version 0.16.5 and when one story is completed, I get a blank white screen before I get my next story. This issue is same on both android and iOS. I also noticed the same blank white screen at the start of the first story. Below is my implementation

return Scaffold( body: StoryView( controller: model.controller, onStoryShow: (StoryItem storyItem, int i) {}, onComplete: () { model.goto(Routes.signUp); }, progressPosition: ProgressPosition.top, repeat: false, inline: true, onVerticalSwipeComplete: (Direction? direction) {}, storyItems: [ StoryItem( _storyItemView( image: 'assets/png/onboarding_1.png', title: 'story 1', content: 'Content of story 1', ), duration: const Duration(seconds: 2), ), StoryItem( _storyItemView( image: 'assets/png/onboarding_2.png', title: 'Story 2', content: 'Content of story 2', ), duration: const Duration(seconds: 2), ), StoryItem( _storyItemView( image: 'assets/png/onboarding_3.png', title: 'Story 3', content: 'Content of story 3', ), duration: const Duration(seconds: 2), ), ], ));

And here is my created widget

Widget _storyItemView({required String image, required String title, required String content}) { return Container( width: double.infinity, height: double.infinity, decoration: BoxDecoration( image: DecorationImage( fit: BoxFit.fill, image: AssetImage(image), ), ), child: Column( mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Text( title, textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontSize: 24.sp, fontWeight: FontWeight.w700, ), ), Text( content, textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontSize: 16.sp, fontWeight: FontWeight.w500, ), ) ], ), ); }

geekpius commented 3 months ago

You could preload or precache your image before loading it in story view. Also make sure your image size is not huge

SmilingFarood commented 3 months ago

Thank you @geekpius How can I go about the preload and precaching? Note: The images are loaded from assets and not from a network

geekpius commented 3 months ago

It's possible. Just Google it. Or ask chat GPT