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

Form Validation in Flutter with Laravel Form Validation Syntax
Form Validation in Flutter with Laravel Form Validation SyntaxForm Validation in Flutter with Laravel Form Validation Syntax
Form Validation in Flutter with Laravel Form Validation SyntaxFlutter Agency
 
How to Create Custom Shaders in Flutter?
How to Create Custom Shaders in Flutter?How to Create Custom Shaders in Flutter?
How to Create Custom Shaders in Flutter?Flutter Agency
 
Benefits Of Hiring Flutter App Developers For Success
Benefits Of Hiring Flutter App Developers For SuccessBenefits Of Hiring Flutter App Developers For Success
Benefits Of Hiring Flutter App Developers For SuccessFlutter Agency
 
Guide to Fix Dropdown Button Not Switching Selected Item | Flutter
Guide to Fix Dropdown Button Not Switching Selected Item | FlutterGuide to Fix Dropdown Button Not Switching Selected Item | Flutter
Guide to Fix Dropdown Button Not Switching Selected Item | FlutterFlutter Agency
 
12 Straightforward Steps to Build Your Video On-Demand App in 2024
12 Straightforward Steps to Build Your Video On-Demand App in 202412 Straightforward Steps to Build Your Video On-Demand App in 2024
12 Straightforward Steps to Build Your Video On-Demand App in 2024Flutter Agency
 
Flutter's Advantages For Custom Application Development Services
Flutter's Advantages For Custom Application Development ServicesFlutter's Advantages For Custom Application Development Services
Flutter's Advantages For Custom Application Development ServicesFlutter 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
 

More from Flutter Agency (20)

Form Validation in Flutter with Laravel Form Validation Syntax
Form Validation in Flutter with Laravel Form Validation SyntaxForm Validation in Flutter with Laravel Form Validation Syntax
Form Validation in Flutter with Laravel Form Validation Syntax
 
How to Create Custom Shaders in Flutter?
How to Create Custom Shaders in Flutter?How to Create Custom Shaders in Flutter?
How to Create Custom Shaders in Flutter?
 
Benefits Of Hiring Flutter App Developers For Success
Benefits Of Hiring Flutter App Developers For SuccessBenefits Of Hiring Flutter App Developers For Success
Benefits Of Hiring Flutter App Developers For Success
 
Guide to Fix Dropdown Button Not Switching Selected Item | Flutter
Guide to Fix Dropdown Button Not Switching Selected Item | FlutterGuide to Fix Dropdown Button Not Switching Selected Item | Flutter
Guide to Fix Dropdown Button Not Switching Selected Item | Flutter
 
12 Straightforward Steps to Build Your Video On-Demand App in 2024
12 Straightforward Steps to Build Your Video On-Demand App in 202412 Straightforward Steps to Build Your Video On-Demand App in 2024
12 Straightforward Steps to Build Your Video On-Demand App in 2024
 
Flutter's Advantages For Custom Application Development Services
Flutter's Advantages For Custom Application Development ServicesFlutter's Advantages For Custom Application Development Services
Flutter's Advantages For Custom Application Development Services
 
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
 

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/