SlideShare uma empresa Scribd logo
1 de 12
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 fulfills the necessary tasks by placing the
elements inside it in the correct order according to the developer’s
requirements. Also check out the the availability of experts to hire
Flutter app developers for your next project.
ListViews Widgets come in the following four
types:
1. ListView()
2. ListView.builder()
3. ListView.separated()
4. ListView.custom()
You can learn more about the listview widget and its type with more
details from here.
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.
Also check out the as important topic How to Use Hexadecimal Color
Strings in Flutter?
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 {
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. So now you can add the
same functionality to your app. Hope you like this article.
Source: https://bosctechlabs.com/programmatically-scrolling-to-end-
of-listview/

Mais conteúdo relacionado

Mais de BOSC Tech Labs

Guide to 2024’s Elite Software Developers by MobileAppDaily.pdf
Guide to 2024’s Elite Software Developers by MobileAppDaily.pdfGuide to 2024’s Elite Software Developers by MobileAppDaily.pdf
Guide to 2024’s Elite Software Developers by MobileAppDaily.pdfBOSC Tech Labs
 
How to build a live chat widget in React_.pdf
How to build a live chat widget in React_.pdfHow to build a live chat widget in React_.pdf
How to build a live chat widget in React_.pdfBOSC Tech Labs
 
React Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdfReact Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdfBOSC Tech Labs
 
How to hire ios app development experts for your next project_.pdf
How to hire ios app development experts for your next project_.pdfHow to hire ios app development experts for your next project_.pdf
How to hire ios app development experts for your next project_.pdfBOSC Tech Labs
 
Swiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdf
Swiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdfSwiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdf
Swiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdfBOSC Tech Labs
 
3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdf3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdfBOSC Tech Labs
 
The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...
The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...
The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...BOSC Tech Labs
 
The Role iOS App Development_ Hiring for the Future.pdf
The Role iOS App Development_ Hiring for the Future.pdfThe Role iOS App Development_ Hiring for the Future.pdf
The Role iOS App Development_ Hiring for the Future.pdfBOSC Tech Labs
 
React 19: Revolutionizing Web Development
React 19: Revolutionizing Web DevelopmentReact 19: Revolutionizing Web Development
React 19: Revolutionizing Web DevelopmentBOSC Tech Labs
 
2024 Custom Software Development Guide: Trends, Steps & Benefits
2024 Custom Software Development Guide: Trends, Steps & Benefits2024 Custom Software Development Guide: Trends, Steps & Benefits
2024 Custom Software Development Guide: Trends, Steps & BenefitsBOSC Tech Labs
 
What is the Easiest Way to Hire a React Developer?
What is the Easiest Way to Hire a React Developer?What is the Easiest Way to Hire a React Developer?
What is the Easiest Way to Hire a React Developer?BOSC Tech Labs
 
Top 10 React Carousel Component Libraries and their Usage Trends
Top 10 React Carousel Component Libraries and their Usage TrendsTop 10 React Carousel Component Libraries and their Usage Trends
Top 10 React Carousel Component Libraries and their Usage TrendsBOSC Tech Labs
 
The Comprehensive Tech Guide to iOS Mobile App Development: From Concept to L...
The Comprehensive Tech Guide to iOS Mobile App Development: From Concept to L...The Comprehensive Tech Guide to iOS Mobile App Development: From Concept to L...
The Comprehensive Tech Guide to iOS Mobile App Development: From Concept to L...BOSC Tech Labs
 
STEP BY STEP GUIDE TO HIRING EXPERIENCED FLUTTER DEVELOPERS
STEP BY STEP GUIDE TO HIRING EXPERIENCED FLUTTER DEVELOPERSSTEP BY STEP GUIDE TO HIRING EXPERIENCED FLUTTER DEVELOPERS
STEP BY STEP GUIDE TO HIRING EXPERIENCED FLUTTER DEVELOPERSBOSC Tech Labs
 
Top 10 Essential Traits to Look For Hire Remote React Developer
Top 10 Essential Traits to Look For Hire Remote React DeveloperTop 10 Essential Traits to Look For Hire Remote React Developer
Top 10 Essential Traits to Look For Hire Remote React DeveloperBOSC Tech Labs
 
Transform Your Mobile App Development with ChatGPT
Transform Your Mobile App Development with ChatGPTTransform Your Mobile App Development with ChatGPT
Transform Your Mobile App Development with ChatGPTBOSC Tech Labs
 
Which Is The Best AI Tool For Mobile App Development_.pdf
Which Is The Best AI Tool For Mobile App Development_.pdfWhich Is The Best AI Tool For Mobile App Development_.pdf
Which Is The Best AI Tool For Mobile App Development_.pdfBOSC Tech Labs
 
Revealing Development Efficiency: How AI Powers Innovation in Software Creati...
Revealing Development Efficiency: How AI Powers Innovation in Software Creati...Revealing Development Efficiency: How AI Powers Innovation in Software Creati...
Revealing Development Efficiency: How AI Powers Innovation in Software Creati...BOSC Tech Labs
 
Boost Your Website with Top React Carousel Libraries | BOSC
Boost Your Website with Top React Carousel Libraries | BOSCBoost Your Website with Top React Carousel Libraries | BOSC
Boost Your Website with Top React Carousel Libraries | BOSCBOSC Tech Labs
 
Maximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdfMaximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdfBOSC Tech Labs
 

Mais de BOSC Tech Labs (20)

Guide to 2024’s Elite Software Developers by MobileAppDaily.pdf
Guide to 2024’s Elite Software Developers by MobileAppDaily.pdfGuide to 2024’s Elite Software Developers by MobileAppDaily.pdf
Guide to 2024’s Elite Software Developers by MobileAppDaily.pdf
 
How to build a live chat widget in React_.pdf
How to build a live chat widget in React_.pdfHow to build a live chat widget in React_.pdf
How to build a live chat widget in React_.pdf
 
React Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdfReact Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdf
 
How to hire ios app development experts for your next project_.pdf
How to hire ios app development experts for your next project_.pdfHow to hire ios app development experts for your next project_.pdf
How to hire ios app development experts for your next project_.pdf
 
Swiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdf
Swiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdfSwiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdf
Swiftui Vs Uikit_ Choosing the Right Ui Framework for ios Apps.pdf
 
3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdf3 Ways to Get Started with a React App in 2024.pdf
3 Ways to Get Started with a React App in 2024.pdf
 
The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...
The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...
The iOS Advantage_ How Apple’s Ecosystem Is Setting the Stage for Next-Gen Bu...
 
The Role iOS App Development_ Hiring for the Future.pdf
The Role iOS App Development_ Hiring for the Future.pdfThe Role iOS App Development_ Hiring for the Future.pdf
The Role iOS App Development_ Hiring for the Future.pdf
 
React 19: Revolutionizing Web Development
React 19: Revolutionizing Web DevelopmentReact 19: Revolutionizing Web Development
React 19: Revolutionizing Web Development
 
2024 Custom Software Development Guide: Trends, Steps & Benefits
2024 Custom Software Development Guide: Trends, Steps & Benefits2024 Custom Software Development Guide: Trends, Steps & Benefits
2024 Custom Software Development Guide: Trends, Steps & Benefits
 
What is the Easiest Way to Hire a React Developer?
What is the Easiest Way to Hire a React Developer?What is the Easiest Way to Hire a React Developer?
What is the Easiest Way to Hire a React Developer?
 
Top 10 React Carousel Component Libraries and their Usage Trends
Top 10 React Carousel Component Libraries and their Usage TrendsTop 10 React Carousel Component Libraries and their Usage Trends
Top 10 React Carousel Component Libraries and their Usage Trends
 
The Comprehensive Tech Guide to iOS Mobile App Development: From Concept to L...
The Comprehensive Tech Guide to iOS Mobile App Development: From Concept to L...The Comprehensive Tech Guide to iOS Mobile App Development: From Concept to L...
The Comprehensive Tech Guide to iOS Mobile App Development: From Concept to L...
 
STEP BY STEP GUIDE TO HIRING EXPERIENCED FLUTTER DEVELOPERS
STEP BY STEP GUIDE TO HIRING EXPERIENCED FLUTTER DEVELOPERSSTEP BY STEP GUIDE TO HIRING EXPERIENCED FLUTTER DEVELOPERS
STEP BY STEP GUIDE TO HIRING EXPERIENCED FLUTTER DEVELOPERS
 
Top 10 Essential Traits to Look For Hire Remote React Developer
Top 10 Essential Traits to Look For Hire Remote React DeveloperTop 10 Essential Traits to Look For Hire Remote React Developer
Top 10 Essential Traits to Look For Hire Remote React Developer
 
Transform Your Mobile App Development with ChatGPT
Transform Your Mobile App Development with ChatGPTTransform Your Mobile App Development with ChatGPT
Transform Your Mobile App Development with ChatGPT
 
Which Is The Best AI Tool For Mobile App Development_.pdf
Which Is The Best AI Tool For Mobile App Development_.pdfWhich Is The Best AI Tool For Mobile App Development_.pdf
Which Is The Best AI Tool For Mobile App Development_.pdf
 
Revealing Development Efficiency: How AI Powers Innovation in Software Creati...
Revealing Development Efficiency: How AI Powers Innovation in Software Creati...Revealing Development Efficiency: How AI Powers Innovation in Software Creati...
Revealing Development Efficiency: How AI Powers Innovation in Software Creati...
 
Boost Your Website with Top React Carousel Libraries | BOSC
Boost Your Website with Top React Carousel Libraries | BOSCBoost Your Website with Top React Carousel Libraries | BOSC
Boost Your Website with Top React Carousel Libraries | BOSC
 
Maximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdfMaximize Development Efficiency with ReactJS.pdf
Maximize Development Efficiency with ReactJS.pdf
 

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 fulfills the necessary tasks by placing the elements inside it in the correct order according to the developer’s requirements. Also check out the the availability of experts to hire Flutter app developers for your next project.
  • 3. ListViews Widgets come in the following four types: 1. ListView() 2. ListView.builder() 3. ListView.separated() 4. ListView.custom()
  • 4. You can learn more about the listview widget and its type with more details from here. 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. Also check out the as important topic How to Use Hexadecimal Color Strings in Flutter? To manage our ListView, we will want a ScrollController.
  • 5. 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); }); },
  • 6. 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); }); },
  • 7. 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 { final ScrollController _scrollController = ScrollController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Coflutter'), ), body: Column( children: [ Row(
  • 8. 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); }); }, ),
  • 9. ElevatedButton( child: const Text('To Bottom'), onPressed: () async { SchedulerBinding.instance?.addPostFrameCallback((_) { _scrollController.animateTo( _scrollController.position.maxScrollExtent, duration: const Duration(milliseconds: 1), curve: Curves.fastOutSlowIn); }); }, ), ], ),
  • 10. Expanded( child: ListView.builder( controller: _scrollController, itemCount: 100, itemBuilder: (BuildContext context, int index) { return Card( child: ListTile( title: Text("Index : $index"), ), ); }, ), ), const Divider(), ], )); } }
  • 12. Conclusion We have learned an exciting ListView feature in this article that you may have seen on multiple websites and blogs. So now you can add the same functionality to your app. Hope you like this article. Source: https://bosctechlabs.com/programmatically-scrolling-to-end- of-listview/