How to draw a horizontal line in flutter row widgets?
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
)
],
),
)
],
)),
);
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),
),
),
),
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!