Thủ Thuật Hướng dẫn Scroll listview In listview flutter Chi Tiết
Quý khách đang tìm kiếm từ khóa Scroll listview In listview flutter được Update vào lúc : 2022-12-13 14:35:05 . Với phương châm chia sẻ Bí quyết về trong nội dung bài viết một cách Chi Tiết Mới Nhất. Nếu sau khi tìm hiểu thêm Post vẫn ko hiểu thì hoàn toàn có thể lại Comment ở cuối bài để Ad lý giải và hướng dẫn lại nha.
Flutter Scroll Down to Bottom or Top of List in ListView
In this tutorial, we will learn how to scroll down to the bottom of a ListView in Flutter. Scrolling down to the bottom of the list is very boring and so here is a way to scroll directly to the bottom or top of the list.
Nội dung chính
- Flutter Scroll Down to Bottom or Top of List in ListView
- Project Setup:
- Implementation:
- Complete Source Code:
- Conclusion:
Project Setup:
Below is a starter code so that you can follow along with this tutorial. This code generates an app with a list of 100 items.
Dart
import ‘package:flutter/material.dart’;
void main()
runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: ‘Geeks For Geeks’,
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(title: ‘Geeks For Geeks’),
);
class MyHomePage extends StatefulWidget
MyHomePage(Key? key, required this.title) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage>
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
// Floating action button. Functionality to be implemented
floatingActionButton: FloatingActionButton(
onPressed: () ,
isExtended: true,
tooltip: “Scroll to Bottom”,
child: Icon(Icons.arrow_downward),
),
// Simple List of 100 items
body toàn thân: ListView.builder(
itemCount: 100,
itemBuilder: (context, index)
return ListTile(
title: Text(“Item $index + 1”),
);
,
),
);
Run the code and the result will be as follows.
Starter code
Implementation:
As you can see our FloatingActionButton is not working as no function is assigned to it in the onPressed field. First of all, we will need a ScrollController to control our ListView. So create a ScrollController.
Dart
ScrollController listScrollController = ScrollController();
Now assign this ScrollController to the controller field of ListView.
Dart
controller: listScrollController,
Now come to the onPressed() field of FloatingActionButton.
Here we will use the following code:
Dart
// We will jump to the bottom of the list
onPressed: ()
if (listScrollController.hasClients)
final position = listScrollController.position.maxScrollExtent;
listScrollController.jumpTo(position);
,
We have first checked whether we can communicate with the members of ScrollController using
Dart
listScrollController.hasClients
If not checked, we will get a runtime error. The above code returns a boolean value. Now moving to the next part, we asked for the maximum scrolling extent of the ScrollController.
Dart
final position = listScrollController.position.maxScrollExtent;
This simply means we are asking for the last position in the ListView via ScrollController. And then, we asked the ScrollController to move the position we got above using the jumpTo function.
Dart
listScrollController.jumpTo(position);
Now run the code and you will see the following result.
Scroll down list
So we have successfully reached the bottom of our list.
Now you may think that it would be nice if not moving abruptly to the bottom of the list, we will go easily. So the same can be achieved using the animateTo function.
Replace the jumpTo code with the code below:
Dart
// We will reach the bottom of list within a duration of
// 3 seconds animating down the ListView
listScrollController.animateTo(
position,
duration: Duration(seconds: 3),
curve: Curves.easeOut,
);
Now run the app again. You will see the following result.
Animated Scrolling
We have learned how to scroll down the list, now we will learn how to scroll to the top of the ListView.
Instead of getting the maxScrollExtent, we will now use the minScrollExtent from ScrollController and that simply means the top position of ListView.
Here is the code and dont forget to change the Icon:
Dart
// Floating action button is implemented with the above functionality
// and onPressed triggers the function
floatingActionButton: FloatingActionButton(
onPressed: ()
if (listScrollController.hasClients)
final position = listScrollController.position.minScrollExtent;
listScrollController.animateTo(
position,
duration: Duration(seconds: 3),
curve: Curves.easeOut,
);
,
isExtended: true,
tooltip: “Scroll to Top”,
child: Icon(Icons.arrow_upward),
),
Now run the app again.
Scrolling top of ListView
Complete Source Code:
Dart
import ‘package:flutter/material.dart’;
void main()
runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: ‘Geeks For Geeks’,
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(title: ‘Geeks For Geeks’),
);
class MyHomePage extends StatefulWidget
MyHomePage(Key? key, required this.title) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage>
ScrollController listScrollController = ScrollController();
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
// Floating action button implemented with the
// auto scroll function to the bottom of list
floatingActionButton: FloatingActionButton(
onPressed: ()
if (listScrollController.hasClients)
final position = listScrollController.position.maxScrollExtent;
listScrollController.animateTo(
position,
duration: Duration(seconds: 3),
curve: Curves.easeOut,
);
,
isExtended: true,
tooltip: “Scroll to Bottom”,
child: Icon(Icons.arrow_downward),
),
// ListView with 100 list items
body toàn thân: ListView.builder(
// Scroll Controller for functionality
controller: listScrollController,
itemCount: 100,
itemBuilder: (context, index)
return ListTile(
title: Text(“Item $index + 1”),
);
,
),
);
Output:
Scroll to the bottom of the list
Scroll to the top of the list
Conclusion:
In this tutorial, we have learned a very interesting feature of ListView that you may have come across on many websites and blogs. So now you can also implement the same feature in your app.
Article Tags :
DartFlutter
FlutterFlutter-widgets
Read Full Article
Reply
0
0
Chia sẻ
Share Link Cập nhật Scroll listview In listview flutter miễn phí
Bạn vừa Read Post Với Một số hướng dẫn một cách rõ ràng hơn về Video Scroll listview In listview flutter tiên tiến và phát triển nhất và Chia Sẻ Link Cập nhật Scroll listview In listview flutter Free.
Hỏi đáp vướng mắc về Scroll listview In listview flutter
Nếu sau khi đọc nội dung bài viết Scroll listview In listview flutter vẫn chưa hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Admin lý giải và hướng dẫn lại nha
#Scroll #listview #listview #flutter