ListView and SingleChildScrollView Widgets in Flutter

While passing through certain scenarios in Flutter, you might have come across either using a [Column + SingleChildScrollView] or ListView.

In this article, we are going to deep dive into all of these.

ListView()

When using ListView, only renders the Objects that are visible to the screen. ListViews are the best when using the same Widgets.

Let’s look into this code snippet.

var card = Container(
  height: 150,
  child: Card(
    elevation: 9,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(30)),
    ),
    child: ListTile(
      dense: false,
      leading: FlutterLogo(),
      title: Text(
        "Flutter Easy Learning\nTutorial #31",
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
      ),
      subtitle: Text(
        "Instructor: Mustafa Tahir",
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
      ),
      trailing: Icon(Icons.arrow_forward_ios),
    ),
  ),
);
ListView(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    card,
    card,
    card,
    card,
    card,
  ],
),

In this example, I have defined a Widget above and used ListView to render the Widget “Five” times. Since this is not a complex one, so ListView would handle it easily, but what if I need this 50–100 times, here comes ListView.builder, it renders Widgets that are only visible on the screen, upon scrolling it renders other ones.

Padding(
  padding: const EdgeInsets.all(8.0),
  child: ListView.builder(
    itemCount: 50,
    itemBuilder: (context,index) {
      return Container(
        height: 150,
        child: Card(
          elevation: 9,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(30)),
          ),
          child: ListTile(
            dense: false,
            leading: FlutterLogo(),
            title: Text(
              "Flutter Easy Learning\nTutorial #31",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
            ),
            subtitle: Text(
              "Instructor: Mustafa Tahir",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
            ),
            trailing: Icon(Icons.arrow_forward_ios),
          ),
        ),
      );
    },
  ),
),

Both methods would give us the same output, but ListView.builder is the best option since ListView is not appropriate for Complex User Interfaces.

Usage of Column() + SingleChildScrollView()

SingleChildScrollView behaves the same as ListView, but it is best when using different Widgets with different Sizes, just in need of scrolling behavior.

var card = Container(
  height: 150,
  child: Card(
    elevation: 9,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(30)),
    ),
    child: ListTile(
      dense: false,
      leading: FlutterLogo(),
      title: Text(
        "Flutter Easy Learning\nTutorial #31",
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
      ),
      subtitle: Text(
        "Instructor: Mustafa Tahir",
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
      ),
      trailing: Icon(Icons.arrow_forward_ios),
    ),
  ),
);
Padding(
  padding: const EdgeInsets.all(8.0),
  child: SingleChildScrollView(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        card,
        Container(
          height: 80,
          width: double.infinity,
          color: Colors.orange,
        ),
        card,
        card,
        Container(
          height: 80,
          width: double.infinity,
          color: Colors.orange,
        ),
        card,
        card,
        Container(
          height: 80,
          width: double.infinity,
          color: Colors.orange,
        ),
        Container(
          height: 80,
          width: double.infinity,
          color: Colors.orange,
        ),
        Center(
          child: TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder()
            ),
          ),
        ),
      ],
    ),
  ),
),

That’s all, Hope you like this article, if you did Hit that Clap!

Youtube Tutorial

https://youtu.be/UjQ6B7pPPSA

GitHub https://github.com/mustafatahirhussein/listview_singleChildScrollView