首页 > 解决方案 > 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

标签: flutterdart

解决方案


试着把你包裹起来ColumnExpanded这样就Divider知道要占用多少空间。

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

推荐阅读