CODEWITHSUNDEEP
androidlistviewflutter
rohit901
rohit901

Reputation: 110

Vertical Divider not Extending to full Height in Flutter List Tile

I wanted to recreate my List UI like the one in the following Pic:

enter image description here

As you can see the Leading Icon in the List tile has a vertical divider to its right side and it is intersected with the bottom divider, but I'm not able to achieve that look and I'm only able to recreate this UI.

enter image description here

Here is the Code I'm Using:

contentBuilder: (BuildContext context) {
      return Container(
        child: FutureBuilder(
          future: _getFoodDetails(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            print(snapshot.data);
            if (snapshot.data == null) {
              return Container(child: Center(child: Text("Loading...")));
            } else {
              return Expanded(
                child: ListView.separated(
                  itemCount: snapshot.data.length,
                  separatorBuilder: (context, index) {
                    return Divider();
                  },
                  itemBuilder: (BuildContext context, int index) {
                    return ListTile(
                      dense: false,
                      leading: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Icon(Icons.phone, color: Colors.blue),
                          VerticalDivider(),
                        ],
                      ),
                      title: Text(snapshot.data[index].foodTitle),
                      subtitle: Text(snapshot.data[index].foodQuantity),
                      onTap: () {},
                      trailing: Icon(Icons.keyboard_arrow_right,
                          color: Colors.yellow, size: 30.0),
                    );
                  },
                ),
              );
            }
          },
        ),
      );
    }

Please suggest how can i Achieve the Desired UI Look with the Dividers proeprly intersecting with each other and remove the padding which im obtaining.

Upvotes: 3

Views: 2069

Answers (2)

Osama Kashif
Osama Kashif

Reputation: 416

contentBuilder: (BuildContext context) {
      return Container(
        child: FutureBuilder(
          future: _getFoodDetails(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            print(snapshot.data);
            if (snapshot.data == null) {
              return Container(child: Center(child: Text("Loading...")));
            } else {
              return Expanded(
                child: ListView.separated(
                  itemCount: snapshot.data.length,
                  separatorBuilder: (context, index) {
                    return Divider();
                  },
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                width: MediaQuery.of(context).size.width,
                height: 80,
                color: Colors.blue,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    const Icon(Icons.phone, color: Colors.blue),
                    Container(
                      width: 1,
                      color: Colors.white,
                    ),
                    const SizedBox(
                      width: 10,
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: const [
                        Text(snapshot.data[index].foodTitle),
                        Text(snapshot.data[index].foodQuantity),
                      ],
                    ),
                    const Spacer(),
                    const Icon(Icons.keyboard_arrow_right,
                        color: Colors.yellow, size: 30.0),
                    const SizedBox(
                      width: 10,
                    ),
                  ],
                ),
              ),))}}}));

hope this will help

Upvotes: 0

MαπμQμαπkγVπ.0
MαπμQμαπkγVπ.0

Reputation: 6737

One of the solution that I can think of here is to wrap your row in IntrinsicHeight() if you are using VerticalDivider as separator in Row widget like the sample below:

IntrinsicHeight(
  child: Row(
    children: [
      Text('Hello'),
      VerticalDivider(
        color: Colors.black,
        thickness: 2,
      ),
      Text('World'),
    ],
  ),
)

Upvotes: 1

Related Questions