flutterdart

How to draw a horizontal line in flutter row widgets?


In my flutter project, I have initialized a Row. Inside that, I created some Texts in a column and after that, I want to add a line but it is not showing anything. I have used Expanded for that reason and followed the given solutions-

Horizontal divider with text in the middle in Flutter?

But none of them worked either.

Here's the image of my code output-

enter image description here

Here's my code-

Container(
      color:Colors.white,
      child: (
        Row(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Image(
                  height: 100,
                  width: 100,
                  image: NetworkImage("https://www.gstatic.com/webp/gallery/1.jpg"),
                ),
            ),
            Column(
              children: <Widget>[
                Text("Book Name"),
                Text("Author name"),

                Divider(
                  color: Colors.black,
                )
              ],
            )
          ],
        )
      ),
    ),

So, I need a line below the two texts and show it like the below picture-

enter image description here


Solution

  • Try wrapping you Column in an Expanded so the Divider knows how much space to occupy.

    Container(
      color: Colors.white,
      child: (Row(
        children: <Widget>[
          // ...
          Expanded(
            child: Column(
              children: <Widget>[
                Text("Book Name"),
                Text("Author name"),
                Divider(
                  color: Colors.black
                )
              ],
            ),
          )
        ],
      )),
    );