SlideShare a Scribd company logo
1 of 11
How to Programmatically Scrolling to the End of a
ListView in Flutter?
A ListView is a scrollable collection of widgets organized linearly in
Flutter. Additionally, it is the scrolling widget that is used the most. So,
we will examine what the ListView widget in Flutter is in this article.
The ListView Widget in Flutter fulfils the necessary tasks by placing the
elements inside it in the correct order according to the Flutter
developer requirements.
ListViews Widgets come in the following four types:
Learn more about the listview widget and its type for more details.
In our code, we sometimes need to scroll the list view to the Top or
bottom (programmatically). So, in this article, We will learn how to
scroll down to the bottom of a ListView in Flutter.
ListView()
ListView.builder()
ListView.separated()
ListView.custom()
To manage our ListView, we will want a ScrollController.
ScrollController _scrollController = ScrollController();
To jump listview from top to bottom, you can use the below snippet.
onPressed: () async {
SchedulerBinding.instance?.addPostFrameCallback((_) {
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 1),
curve: Curves.fastOutSlowIn);
});
},
To jump listview from bottom to Top, you can use the below snippet.
onPressed: () async {
SchedulerBinding.instance?.addPostFrameCallback((_) {
_scrollController.animateTo(
_scrollController.position.minScrollExtent,
duration: const Duration(milliseconds: 1),
curve: Curves.fastOutSlowIn);
});
},
Let’s see a complete example of a scrolling list view of both sides.
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final ScrollController _scrollController = ScrollController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Coflutter'),
),
body: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ElevatedButton(
child: const Text('To Top'),
onPressed: () async {
SchedulerBinding.instance?.addPostFrameCallback((_) {
_scrollController.animateTo(
_scrollController.position.minScrollExtent,
duration: const Duration(milliseconds: 1),
curve: Curves.fastOutSlowIn);
});
},
),
ElevatedButton(
child: const Text('To Bottom'),
onPressed: () async {
SchedulerBinding.instance?.addPostFrameCallback((_) {
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 1),
curve: Curves.fastOutSlowIn);
});
},
),
],
),
Expanded(
child: ListView.builder(
controller: _scrollController,
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return Card(
child: ListTile(
title: Text("Index : $index"),
),
);
},
),
),
const Divider(),
],
));
}
}
Output:
Conclusion:
We have learned an exciting ListView feature in this article that you
may have seen on multiple websites and blogs. We as a leading Flutter
business app development company known for custom application
solutions for small, medium and large enterprises. Consult our
developers for productive and operational app solutions. So now you
can add the same functionality to your app. Hope you like this article.
Source: https://flutteragency.com/programmatically-scrolling-end-
of-listview/

More Related Content

More from Flutter Agency

Hire Flutter Developers to Build Cross-Platform App Services - Stonesmentor
Hire Flutter Developers to Build Cross-Platform App Services - StonesmentorHire Flutter Developers to Build Cross-Platform App Services - Stonesmentor
Hire Flutter Developers to Build Cross-Platform App Services - StonesmentorFlutter Agency
 
A Guide For Recovering Your Failing App Project | Flutter Agency
A Guide For Recovering Your Failing App Project | Flutter AgencyA Guide For Recovering Your Failing App Project | Flutter Agency
A Guide For Recovering Your Failing App Project | Flutter AgencyFlutter Agency
 
Healthcare App-Development Company Fllutter Agency
Healthcare App-Development Company Fllutter AgencyHealthcare App-Development Company Fllutter Agency
Healthcare App-Development Company Fllutter AgencyFlutter Agency
 
Is Flutter Good for Web Development? | Flutter Agency
Is Flutter Good for Web Development? | Flutter AgencyIs Flutter Good for Web Development? | Flutter Agency
Is Flutter Good for Web Development? | Flutter AgencyFlutter Agency
 
Choosing App Development: Native, Hybrid, or Flutter Explained
Choosing App Development: Native, Hybrid, or Flutter ExplainedChoosing App Development: Native, Hybrid, or Flutter Explained
Choosing App Development: Native, Hybrid, or Flutter ExplainedFlutter Agency
 
The Role of Digital Transformation in Healthcare - Flutter Agency.pdf
The Role of Digital Transformation in Healthcare - Flutter Agency.pdfThe Role of Digital Transformation in Healthcare - Flutter Agency.pdf
The Role of Digital Transformation in Healthcare - Flutter Agency.pdfFlutter Agency
 
Why-Hire-Flutter-Developer-Flutter-Agency_.pdf
Why-Hire-Flutter-Developer-Flutter-Agency_.pdfWhy-Hire-Flutter-Developer-Flutter-Agency_.pdf
Why-Hire-Flutter-Developer-Flutter-Agency_.pdfFlutter Agency
 
Streamlining DNS Checks in Flutter Apps
Streamlining DNS Checks in Flutter AppsStreamlining DNS Checks in Flutter Apps
Streamlining DNS Checks in Flutter AppsFlutter Agency
 
Flutter UI/UX Design Tools: The Ultimate Guide for 2023
Flutter UI/UX Design Tools: The Ultimate Guide for 2023Flutter UI/UX Design Tools: The Ultimate Guide for 2023
Flutter UI/UX Design Tools: The Ultimate Guide for 2023Flutter Agency
 
Flutter Developer Skills to Master in 2024.pdf
Flutter Developer Skills to Master in 2024.pdfFlutter Developer Skills to Master in 2024.pdf
Flutter Developer Skills to Master in 2024.pdfFlutter Agency
 
Circular Timer in Flutter.pdf
Circular Timer in Flutter.pdfCircular Timer in Flutter.pdf
Circular Timer in Flutter.pdfFlutter Agency
 
flutteragency-com-handling-events-and-user-input-in-flutter-.pdf
flutteragency-com-handling-events-and-user-input-in-flutter-.pdfflutteragency-com-handling-events-and-user-input-in-flutter-.pdf
flutteragency-com-handling-events-and-user-input-in-flutter-.pdfFlutter Agency
 
Best Flutter Application Development Tools in 2022.pptx
Best Flutter Application Development Tools in 2022.pptxBest Flutter Application Development Tools in 2022.pptx
Best Flutter Application Development Tools in 2022.pptxFlutter Agency
 
What is Table Widget in Flutter.pptx
What is Table Widget in Flutter.pptxWhat is Table Widget in Flutter.pptx
What is Table Widget in Flutter.pptxFlutter Agency
 
HTML Parsing in FLUTTER for Android or iOS Development.pptx
HTML Parsing in FLUTTER for Android or iOS Development.pptxHTML Parsing in FLUTTER for Android or iOS Development.pptx
HTML Parsing in FLUTTER for Android or iOS Development.pptxFlutter Agency
 
What is SliverList Class in Flutter App Development.pptx
What is SliverList Class in Flutter App Development.pptxWhat is SliverList Class in Flutter App Development.pptx
What is SliverList Class in Flutter App Development.pptxFlutter Agency
 
How to use Listener Class in Flutter.pptx
How to use Listener Class in Flutter.pptxHow to use Listener Class in Flutter.pptx
How to use Listener Class in Flutter.pptxFlutter Agency
 
How to Use IndexedStack Widget In Flutter.pptx
How to Use IndexedStack Widget In Flutter.pptxHow to Use IndexedStack Widget In Flutter.pptx
How to Use IndexedStack Widget In Flutter.pptxFlutter Agency
 
How to Vertically Center a Column in Flutter.pptx
How to Vertically Center a Column in Flutter.pptxHow to Vertically Center a Column in Flutter.pptx
How to Vertically Center a Column in Flutter.pptxFlutter Agency
 
How to Animate a Widget Across Screens in Flutter.pptx
How to Animate a Widget Across Screens in Flutter.pptxHow to Animate a Widget Across Screens in Flutter.pptx
How to Animate a Widget Across Screens in Flutter.pptxFlutter Agency
 

More from Flutter Agency (20)

Hire Flutter Developers to Build Cross-Platform App Services - Stonesmentor
Hire Flutter Developers to Build Cross-Platform App Services - StonesmentorHire Flutter Developers to Build Cross-Platform App Services - Stonesmentor
Hire Flutter Developers to Build Cross-Platform App Services - Stonesmentor
 
A Guide For Recovering Your Failing App Project | Flutter Agency
A Guide For Recovering Your Failing App Project | Flutter AgencyA Guide For Recovering Your Failing App Project | Flutter Agency
A Guide For Recovering Your Failing App Project | Flutter Agency
 
Healthcare App-Development Company Fllutter Agency
Healthcare App-Development Company Fllutter AgencyHealthcare App-Development Company Fllutter Agency
Healthcare App-Development Company Fllutter Agency
 
Is Flutter Good for Web Development? | Flutter Agency
Is Flutter Good for Web Development? | Flutter AgencyIs Flutter Good for Web Development? | Flutter Agency
Is Flutter Good for Web Development? | Flutter Agency
 
Choosing App Development: Native, Hybrid, or Flutter Explained
Choosing App Development: Native, Hybrid, or Flutter ExplainedChoosing App Development: Native, Hybrid, or Flutter Explained
Choosing App Development: Native, Hybrid, or Flutter Explained
 
The Role of Digital Transformation in Healthcare - Flutter Agency.pdf
The Role of Digital Transformation in Healthcare - Flutter Agency.pdfThe Role of Digital Transformation in Healthcare - Flutter Agency.pdf
The Role of Digital Transformation in Healthcare - Flutter Agency.pdf
 
Why-Hire-Flutter-Developer-Flutter-Agency_.pdf
Why-Hire-Flutter-Developer-Flutter-Agency_.pdfWhy-Hire-Flutter-Developer-Flutter-Agency_.pdf
Why-Hire-Flutter-Developer-Flutter-Agency_.pdf
 
Streamlining DNS Checks in Flutter Apps
Streamlining DNS Checks in Flutter AppsStreamlining DNS Checks in Flutter Apps
Streamlining DNS Checks in Flutter Apps
 
Flutter UI/UX Design Tools: The Ultimate Guide for 2023
Flutter UI/UX Design Tools: The Ultimate Guide for 2023Flutter UI/UX Design Tools: The Ultimate Guide for 2023
Flutter UI/UX Design Tools: The Ultimate Guide for 2023
 
Flutter Developer Skills to Master in 2024.pdf
Flutter Developer Skills to Master in 2024.pdfFlutter Developer Skills to Master in 2024.pdf
Flutter Developer Skills to Master in 2024.pdf
 
Circular Timer in Flutter.pdf
Circular Timer in Flutter.pdfCircular Timer in Flutter.pdf
Circular Timer in Flutter.pdf
 
flutteragency-com-handling-events-and-user-input-in-flutter-.pdf
flutteragency-com-handling-events-and-user-input-in-flutter-.pdfflutteragency-com-handling-events-and-user-input-in-flutter-.pdf
flutteragency-com-handling-events-and-user-input-in-flutter-.pdf
 
Best Flutter Application Development Tools in 2022.pptx
Best Flutter Application Development Tools in 2022.pptxBest Flutter Application Development Tools in 2022.pptx
Best Flutter Application Development Tools in 2022.pptx
 
What is Table Widget in Flutter.pptx
What is Table Widget in Flutter.pptxWhat is Table Widget in Flutter.pptx
What is Table Widget in Flutter.pptx
 
HTML Parsing in FLUTTER for Android or iOS Development.pptx
HTML Parsing in FLUTTER for Android or iOS Development.pptxHTML Parsing in FLUTTER for Android or iOS Development.pptx
HTML Parsing in FLUTTER for Android or iOS Development.pptx
 
What is SliverList Class in Flutter App Development.pptx
What is SliverList Class in Flutter App Development.pptxWhat is SliverList Class in Flutter App Development.pptx
What is SliverList Class in Flutter App Development.pptx
 
How to use Listener Class in Flutter.pptx
How to use Listener Class in Flutter.pptxHow to use Listener Class in Flutter.pptx
How to use Listener Class in Flutter.pptx
 
How to Use IndexedStack Widget In Flutter.pptx
How to Use IndexedStack Widget In Flutter.pptxHow to Use IndexedStack Widget In Flutter.pptx
How to Use IndexedStack Widget In Flutter.pptx
 
How to Vertically Center a Column in Flutter.pptx
How to Vertically Center a Column in Flutter.pptxHow to Vertically Center a Column in Flutter.pptx
How to Vertically Center a Column in Flutter.pptx
 
How to Animate a Widget Across Screens in Flutter.pptx
How to Animate a Widget Across Screens in Flutter.pptxHow to Animate a Widget Across Screens in Flutter.pptx
How to Animate a Widget Across Screens in Flutter.pptx
 

How to Programmatically Scrolling to the End of a ListView in Flutter.pptx

  • 1.
  • 2. How to Programmatically Scrolling to the End of a ListView in Flutter? A ListView is a scrollable collection of widgets organized linearly in Flutter. Additionally, it is the scrolling widget that is used the most. So, we will examine what the ListView widget in Flutter is in this article. The ListView Widget in Flutter fulfils the necessary tasks by placing the elements inside it in the correct order according to the Flutter developer requirements.
  • 3. ListViews Widgets come in the following four types: Learn more about the listview widget and its type for more details. In our code, we sometimes need to scroll the list view to the Top or bottom (programmatically). So, in this article, We will learn how to scroll down to the bottom of a ListView in Flutter. ListView() ListView.builder() ListView.separated() ListView.custom()
  • 4. To manage our ListView, we will want a ScrollController. ScrollController _scrollController = ScrollController(); To jump listview from top to bottom, you can use the below snippet. onPressed: () async { SchedulerBinding.instance?.addPostFrameCallback((_) { _scrollController.animateTo( _scrollController.position.maxScrollExtent, duration: const Duration(milliseconds: 1), curve: Curves.fastOutSlowIn); }); },
  • 5. To jump listview from bottom to Top, you can use the below snippet. onPressed: () async { SchedulerBinding.instance?.addPostFrameCallback((_) { _scrollController.animateTo( _scrollController.position.minScrollExtent, duration: const Duration(milliseconds: 1), curve: Curves.fastOutSlowIn); }); }, Let’s see a complete example of a scrolling list view of both sides.
  • 6. class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { final ScrollController _scrollController = ScrollController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Coflutter'), ),
  • 7. body: Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ ElevatedButton( child: const Text('To Top'), onPressed: () async { SchedulerBinding.instance?.addPostFrameCallback((_) { _scrollController.animateTo( _scrollController.position.minScrollExtent, duration: const Duration(milliseconds: 1), curve: Curves.fastOutSlowIn); }); }, ),
  • 8. ElevatedButton( child: const Text('To Bottom'), onPressed: () async { SchedulerBinding.instance?.addPostFrameCallback((_) { _scrollController.animateTo( _scrollController.position.maxScrollExtent, duration: const Duration(milliseconds: 1), curve: Curves.fastOutSlowIn); }); }, ), ], ),
  • 9. Expanded( child: ListView.builder( controller: _scrollController, itemCount: 100, itemBuilder: (BuildContext context, int index) { return Card( child: ListTile( title: Text("Index : $index"), ), ); }, ), ), const Divider(), ], )); } }
  • 11. Conclusion: We have learned an exciting ListView feature in this article that you may have seen on multiple websites and blogs. We as a leading Flutter business app development company known for custom application solutions for small, medium and large enterprises. Consult our developers for productive and operational app solutions. So now you can add the same functionality to your app. Hope you like this article. Source: https://flutteragency.com/programmatically-scrolling-end- of-listview/