How to Automatically Scroll down when expanding ExpansionTile - flutter

Question

I am making my first Flutter App; enjoying it thus far. One annoying thing that I can not quite put my finger on, is that I have some ExpandedTiles, like so:
However, when the tile is expanded, the screen stays in the same position; like so:
What I would like, is if the app is scrolled down aa little bit when the ExpandedView is expanded.
I found this previous question, How to scroll an ExpansionTile / Listview when a tile is expanded? but that is a little different in that it just creates a list of the same items every time. I want the same functionality, but for 3 or 4 unique lists.
Widget build(BuildContext context) {
final title = 'Lunch Menu';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body:
ListView(
children:
<Widget>[
ListTile(
subtitle: Image.asset('assets/images/lunch-logo.jpg'),
title: ElevatedButton(
child: Text('Back'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomeRoute()),
);
},
),
),
ListTile(
//leading: Image.asset('assets/images/lunch-logo.jpg'),
subtitle: Text('Enjoy our Lunch Options!',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.w600,
) ,
textAlign: TextAlign.center ,
),
),
ExpansionTile(
leading: Text(
'Starters',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.w600,
),
),
children:<Widget>[ ListTile(
leading: Image.asset('assets/images/food/image1.png'),
title: Text('Title1'),
isThreeLine: true,
subtitle: Text('Description 1') ,
),ListTile(
leading: Image.asset('assets/images/food/image2.png'),
title: Text('Title2'),
isThreeLine: true,
subtitle: Text('Description2') ,
),
Would appreciate if someone can give me a pointer on how to implement the scroll controller correctly.

Answer 1

You can create your own ScrollController and pass it to ListView, then when ExpansionTile expands, use onExpansionChanged to animate the controller and scroll a bit down
class ListViewExample extends StatefulWidget {
ListViewExample({Key key}) : super(key: key);
#override
_ListViewExampleState createState() => _ListViewExampleState();
}
class _ListViewExampleState extends State<ListViewExample> {
final ScrollController scroll = ScrollController();
#override
void dispose() {
scroll.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return ListView(
controller: scroll,
children: [
ListTile(
subtitle: Image.asset('assets/images/lunch-logo.jpg'),
title: ElevatedButton(
child: Text('Back'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomeRoute()),
);
},
),
),
ListTile(
//leading: Image.asset('assets/images/lunch-logo.jpg'),
subtitle: Text('Enjoy our Lunch Options!',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.w600,
) ,
textAlign: TextAlign.center ,
),
),
ExpansionTile(
leading: Text(
'Starters',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.w600,
),
),
onExpansionChanged: (value) {
if (value)
scroll.animateTo(120, //this is a hardcoded value, would need some tweaking
duration: const Duration(milliseconds: 300),
curve: Curves.linear);
},
children: [
... //Your widgets
],
)
],
);
}
}
onExpansionChanged returns true when its expanding and false when collapsing, you can use those values and check the scroll offset to know if you need to animate the scroll to move downward

Answer 2

try this if you use listview and other scrollable, very helpfully
https://medium.com/flutter-community/flutter-how-to-scroll-an-expansiontile-when-it-is-expanded-ad706cfb80a6