How To Add Scroll View With Example Using Flutter App

Posted By Bajarangi soft , Posted On 22-09-2020

If the list reached the minimum or maximum scroll.We start by building a simple app, which has a Text widget at the top that indicates when the minimum or maximum scroll was reached.

Now we are listening to the Scroll events, but how we can know if the scroll reach the top or bottom.

children: <Widget>[
  Expanded(
    child: ListView.builder(
      itemCount: 30,
      itemBuilder: (context, index) {
        return ListTile(title: Text("Index : $index"));
      },
    ),
  ),
],

Complete Code for listview scroll
Main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'App Design',
      theme: ThemeData(
        backgroundColor: Colors.black,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    String message = "";

    return Scaffold(
      appBar: AppBar(
        title: Text("List of Items"),
        backgroundColor: Colors.black,
        centerTitle: true,
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              itemCount: 30,
              itemBuilder: (context, index) {
                return ListTile(title: Text("Index : $index"));
              },
            ),
          ),
        ],
      ),
    );
  }
}

Related Post