如何在 flutter 行小部件中绘制水平线？

Question

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-

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-

Answer 1

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
            )
          ],
        ),
      )
    ],
  )),
);

Answer 2

The idea is that you placed your divider inside a column whereas the divider by default is horizontal so it doesn't have enough space to occupy. If you change your height property for the divider you can see it clearly.

If you want you can wrap your divider in a row or perhaps make the divider part of the outer row though you might have to fix its alignment and wrap it in an expanded . You can also wrap the column in an expanded so it occupies all enough space for the divider to appear.

I'd do the code for you but I only have part of the code of what's displayed + it shouldn't be too difficult. If you needed more help let me know!

Answer 3

If you know exactly how long you want the line to be. You can wrap the Divider with a SizedBox specifying the width of the line with the SizedBox properties.

Answer 4

添加垂直分隔线使用Divider(),添加水平分隔线使用Spacer() 。

Answer 5

Easy Pezy Lemon Squeezy

Its simple, see take a container, do not mention its width, because it will take the space dynamically and then only give the color to the lower border of the radius.

 Container( child: Text( 'Your Text Here', ), decoration: BoxDecoration( border: Border( bottom: BorderSide(color: Colors.black), ), ), ),

Answer 6

To add Horizantal divider in row

add a container widget to child: and fix container width:0.1, and color:Colors.black,

sample:Container(width: 0.1,
                  color:Colors.black),

//example to add divider in Row(),

 Container(
                    width: double.infinity,
                    height: 80.0,
                    color: Colors.grey[200],
                    child:Row(
                      children:[
                        Expanded(
                        child:ListTile(
                        //leading: Icon(Icons.speed_sharp),
                        title: Text('Speed'),
                        subtitle: Text('0 mbps'),
                        trailing: Icon(Icons.speed_sharp),
                        horizontalTitleGap: 2.0,
                        )
                      ),
//Sample Code from here:
                       Container(width: 0.1,
                      color:Colors.black),


                      Expanded(child: ListTile(
                        
                       // leading: Icon(Icons.account_balance_wallet_sharp),
                        title: Text('Renewal Date'),
                        subtitle: Text('N/A'),
                        trailing: Icon(Icons.account_balance_wallet_sharp),
                        horizontalTitleGap: 4.0,
                        hoverColor: Colors.red,
                      ),flex: 1,
                      ),
                      Expanded(child: ListTile(
                       // leading: Icon(Ionicons.bag_add),
                        title: Text('Wallet'),
                        subtitle: Text(' 15.33'),
                        trailing: Icon(Ionicons.bag_add),
                        horizontalTitleGap: 2.0,
                        
                      )),
                      ],
                    ) ,
                  ),