Project Setup

Implementation:

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: 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

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.

Tags:

#Flutter #Flutter-Widgets #Dart #Flutter

Implementation:

Project Setup

Dart

Flutter – Scroll Down to Bottom or Top of List in ListView

Similar Reads

Contact Us