How to ListView With Separator In Flutter ?

How to ListView With Separator In Flutter ?

ListView Widget has been introduced to reduce the overload of having various layouts performing the same task. So in this article, we are going to discuss something How to ListView with separator In Flutter?

How to Group ListView With Separator In Flutter?

User can simply wrap a ListItem in a Container Widget like the below:

@override
Widget build(BuildContext context) {
  return new Container(
      child: new ListTile(
        title: new Text('I have border')
      ),
      decoration:
          new BoxDecoration(
              border: new Border(
                  bottom: new BorderSide()
              )
          )
      );
}

Users can also make it happen by using ListView with a separator.

ListView.separated(
  separatorBuilder: (context, index) => Divider(
        color: Colors.black,
      ),
  itemCount: 20,
  itemBuilder: (context, index) => Padding(
        padding: EdgeInsets.all(8.0),
        child: Center(child: Text("Index $index")),
      ),
)

A simple way to do this is by using Add Divider to ListView. The code snippet will look like the below.

// Adapted from https://flutter.io/flutter-for-android/#listviews--adapters

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new ListExamplePage(),
    );
  }
}

class ListExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // https://docs.flutter.io/flutter/material/ListTile/divideTiles.html
    var dividedWidgetList = ListTile.divideTiles(
        context: context,
        tiles: _getListData(),
        color: Colors.black).toList();

    return new Scaffold(
      appBar: new AppBar(
        title: new Text('List Example'),
      ),
      body: new ListView(children: dividedWidgetList)
    );
  }

  _getListData() {
    List<Widget> widgets = [];
    for (int i=0; i<100; i++) {
      widgets.add(
        new Padding(
            padding: new EdgeInsets.all(10.0),
            child: new Text('Row $i'))
      );
    }
    return widgets;
  }
}

Just use Column Widget and add Divider.

ListView.builder(
      itemCount: count,
      itemBuilder: (context, int index) {
      return tile(index);
     },
    ),

Create a widget for itemBuilder

Widget tile(int index) {
return Column(
  children: <Widget>[
    // your widgets in listView
    Divider(),    //at last simply add divider
  ],
);
}

Conclusion:

In this article, we have walked through How to ListView With Separator In Flutter?

Do share your valuable feedback/suggestions to serve you better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.