CODEWITHSUNDEEP
flutterdart
Aquarius_Girl
Aquarius_Girl

Reputation: 22936

Put a divider after a text in -- nested ListView.builder of Flutter

My aim is to put a Divider line after the text of the inner ListView.builder.

What's the way to do that?

  List<String> list1 = ["pppp", "qqqq", "rrrr"];
  List<String> list2 = ["aaaa", "bbbb", "cccc"];

  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[

          new Expanded(
            child: new ListView.builder(
                itemCount: list1.length,
                itemBuilder: (BuildContext ctxt, int Index) {
                  
                  return new ListView.builder(
                      shrinkWrap: true,
                      physics: ClampingScrollPhysics(),
                      itemCount: list2.length,

                      itemBuilder: (BuildContext ctxt, int Index) {
                        return new Text(
                          list2[Index],
                          style: TextStyle(color: Colors.green, fontSize: 25),
                        );
                      }
                    );
                }),
          ),
        ],
      ),
    );
  }

Upvotes: 0

Views: 898

Answers (3)

xpetta
xpetta

Reputation: 718

You can add a divider by placing SizedBox as shown in the code below:

List<String> list1 = ["pppp", "qqqq", "rrrr"];
List<String> list2 = ["aaaa", "bbbb", "cccc"];

@override
Widget build(BuildContext ctxt) {
  return new Scaffold(
    body: new Column(
      children: <Widget>[
        new Expanded(
          child: Column(
            children: [
              new ListView.builder(
                  itemCount: list1.length,
                  itemBuilder: (BuildContext ctxt, int Index) {
                    return new ListView.builder(
                        shrinkWrap: true,
                        physics: ClampingScrollPhysics(),
                        itemCount: list2.length,
                        itemBuilder: (BuildContext ctxt, int Index) {
                          return Text(
                            list2[Index],
                            style: TextStyle(color: Colors.green, fontSize: 25),
                          );
                        });
                  }),
              Divider(
                height: 3,
                thickness: 1,
                indent: 10, // Space at the start.
                endIndent: 10, // Space at the end.
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

Please change the height of the SizedBox as required.

Upvotes: 2

Jahidul Islam
Jahidul Islam

Reputation: 12575

Let's try with ListView.separated

  List<String> list1 = ["pppp", "qqqq", "rrrr"];
  List<String> list2 = ["aaaa", "bbbb", "cccc"];

  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[

          new Expanded(
            child: new ListView.separated(
                itemCount: list1.length,
                itemBuilder: (BuildContext ctxt, int Index) {

                  return new ListView.builder(
                      shrinkWrap: true,
                      physics: ClampingScrollPhysics(),
                      itemCount: list2.length,

                      itemBuilder: (BuildContext ctxt, int Index) {
                        return new Text(
                          list2[Index],
                          style: TextStyle(color: Colors.green, fontSize: 25),
                        );

                      },
                  );
                },
              separatorBuilder: (context, build)=>Divider(
                thickness: 1,
                color: Color(0xff002540).withOpacity(.1),
              ),
            ),
          ),
        ],
      ),
    );
  }

Output:

enter image description here

Upvotes: 1

Artur Sikora
Artur Sikora

Reputation: 75

You can use ListView.separated More on that https://medium.com/flutter-community/flutter-adding-separator-in-listview-c501fe568c76#:~:text=separated.-,ListView.,indices%20%E2%89%A5%200%20and%3C%20itemCount%20.

Upvotes: 1

Related Questions