Reputation: 73
In a flutter app I need to create an effect like the NestedScrollView, when the screen is displayed I will show an image and when the user scroll it will turn in a appbar with a title.
The problem is that I need to fire the innerBoxIsScrolled when the text starts going being the AppBar and the default behaviour only set the innerBoxIsScrolled to true about 50px after the text goes behind the AppBar.
Here is an example:
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatelessWidget(),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
print(innerBoxIsScrolled);
return <Widget>[
SliverAppBar(
title: innerBoxIsScrolled ? Text('Updated title') : Text('Initial title'),
pinned: true,
expandedHeight: 200.0,
forceElevated: innerBoxIsScrolled,
),
];
},
body: ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: 30,
itemBuilder: (BuildContext context, int index) {
return SizedBox(
height: 50,
child: Center(child: Text('Item $index')),
);
})));
}
}
The "Initial title" should change at this moment
But only changed when the Item 2 is near to go behind the appbar
There are any way to control the offset to fire the change of the innerBoxIsScrolled earlier?
Upvotes: 2
Views: 347