Want to display X amount of lines evenly separated on the screen - flutter

Question

I'm trying to display a number of horizontal lines on the screen.
What would be the best approach to achieve this?
I attempted the following though the screen height returned seems to be bigger than the actual screen height so the divisions end up off the screen. I end up with the image shown at https://imgur.com/a/Dx1wH1Y.jpg
final int _numLines = widget._verticalLines;
return ListView.builder(
itemCount: _numLines,
itemBuilder: (BuildContext ctxt, int index) {
return Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height / (_numLines + 1),
),
child: Container(
height: 1.0,
width: MediaQuery.of(context).size.width,
color: Colors.red,
),
);
});

Answer 1

One way you can do this is like this.
Widget build(BuildContext context) {
final int _numLines = widget._verticalLines;
return Column(
children: getChildren(_numLines),
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
);
}
List<Widget> getChildren(int number) {
List<Widget> list = [];
for (int i = 0; i < number; i++) {
list.add(
Container(
height: 1.0,
width: MediaQuery.of(context).size.width,
color: Colors.red,
),
);
}
return list;
}

Answer 2

if i understand your question correctly,try this if it is not let me know
ListView.builder(
itemCount: 5,
shrinkWrap:true,
itemBuilder: (context, index) {
return Container(
height:120,
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.red,width: 2,)),
),
);
},
)

Answer 3

Use MediaQuery and divide the height of the screen by the given number
Example: MediaQuery.of(context).size.height / 5. - This will be dividing the screen into five equal parts, this will work across all devices.
Code:
ListView.builder(
shrinkWrap:true,
itemCount: number,
itemBuilder: (BuildContext ctxt, int index) {
return Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height / number,
),
child: Container(
height: 2.0,
width: MediaQuery.of(context).size.width,
color: Colors.red,
),
);
})