How to create a scroll view in flutter ?

Flutter provides multiple way to scroll the view and one of the most efficient way is ListView.builder. Using the ListView class we can configure multiple options. Using these widgets we can create horizontal as well vertical scroll.

ListView
GridView
CustomScrollView
DraggableScrollableSheet
NestedScrollView
PageView
SingleChildScrollView

Here are the few scroll widgets list which are most used in flutter.

In this article we will learn to show the scroll using Listview and a brief example of other Scroll widgets.

ListView – Listview shows items in linear way and it can handle large list data because it renders only the Kist which is on screen.
GridView – GridView is also same as list which but it works as row. We can accommodate multiple widget in single row and can configure how many widget will be in a row.
CustomScrollView – Custom Scroll view is useful when we want some animation in scroll.
DraggableScrollableSheet – Draggable Scroll view is euseful when we want to drag the scroll as well
NestedScrollView – Sometime it requires in our application multiple scroll view inside another scroll view thus NestedScrollView Come into the action.
PageView – Pageview is useful to create slider and tiktok like scroll view.
SingleChildScrollView – SingleChildScrollView when we do not want multiple children it only accepts a single child.

So in this article i will cover ListView scrollview step by step

Step 1 : Create flutter project

Very first step is to create the fluter application using command line tool or in Android studio.

flutter create example_app

This will create a new project with name my_app then go in to the folder.

Step 2 : Create a widgets for long list

Now, Create a widget to scroll the content.

File : lib/LongListContentWidget.dart

import 'package:flutter/material.dart';

class LongListContentWidget extends StatelessWidget {

  final List<String> list = <String>['1', '2', '3','4','5'];
  LongListContentWidget({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: Scaffold(

          appBar: AppBar(title: const Text("Readerstack")),
          body:   ListView.builder(
                padding: const EdgeInsets.all(8),
                itemCount: list.length,
                itemBuilder:  (BuildContext context, int index) {
                    return Container(
                      height: 200,
                      margin: EdgeInsets.all(5),
                      decoration: BoxDecoration(
                          border: Border.all(color: Colors.red)
                      ),
                      child: Center(child: Text(list[index])),
                    );
                },

              ),
            ),
    );
  }
}

Here as you can see we have used ListView.builder to build the scroll view for best performance of the app.

Step 3 : Add Page to main file

Add you new pages to main.dart and start navigating.

import 'package:flutter/material.dart';
import 'package:example_app/LongListContentWidget.dart';

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

Step 4: Run the project

Simply run the project using command line or in android studio to check the implementation.

flutter run lib/main.dart

Live Preview

Related Posts