How to structure table data within Flutter - flutter

Question

I am currently trying to create a table like structure within my code and am sure there is an easier way of completing this rather than what I have already attempting which is bulky and achieves an incorrect outcome.
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Stack(
children: <Widget>[
Container(
width: double.infinity,
height: 750,
child: Stack(
children: <Widget>[
Positioned(
right: 0,
top: 0,
left: 0,
child: Padding(
padding: const EdgeInsets.only(
left: 20.0,
top: 20.0,
),
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Text(
'How much should I charge?',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20.0,
fontFamily: 'OpenSans',
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
),
Positioned(
top: 60,
right: 90,
left: 0,
child: Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Currency used for this campaign: USD\$',
style: TextStyle(
fontFamily: 'OpenSans',
fontSize: 14.0,
),
),
],
),
),
),
Positioned(
top: 90.0,
left: 3.0,
right: 3.0,
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Divider(
height: 10.0,
color: Colors.black45,
),
),
),
Positioned(
top: 95.0,
left: 3.0,
right: 3.0,
child: Row(
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 30.0, right: 30.0),
child: Text(
'IN-FEED POSTS',
style: TextStyle(
fontSize: 18,
color: Colors.deepPurpleAccent,
fontFamily: 'OpenSans',
fontWeight: FontWeight.bold),
),
),
],
),
Container(
height: 60,
child: VerticalDivider(color: Colors.black45)),
],
),
),
Positioned(
top: 125.0,
left: 3.0,
right: 3.0,
child: Row(
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 30.0, right: 30.0),
child: Text(
'Followers per account',
style: TextStyle(
fontSize: 14,
fontFamily: 'OpenSans',
),
),
)
],
),
Container(
height: 60,
child: VerticalDivider(color: Colors.black45)),
],
),
),
],
),
),
This is the final outcome I have so far achieved using this code strategy.
Can anyone suggest another strategy?

Answer 1

I think the simplest way is to use row and column.
I'm not in front of PC, you can try with something like that!
Column
Text,
Text,
Row
Container -> border.only
Column
Text
Text
Container -> border.only
Column
Text
Text
Hope this help.

Answer 2

I've made a solution working with TableRow, the structure is quite similar to that Simone's made.
Check it out below...
Container(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
'How much should I charge?',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20.0,
fontFamily: 'OpenSans',
),
),
),
Padding(
child: Text(
'Currency used for this campaign: USD\$',
style: TextStyle(
fontFamily: 'OpenSans', fontSize: 14.0, color: Colors.grey),
),
padding: EdgeInsets.only(bottom: 10),
),
Container(
child: Table(
border: TableBorder(
top: BorderSide(width: 2, color: Colors.grey.shade300),
verticalInside:
BorderSide(width: 1, color: Colors.grey.shade300),
),
children: [
TableRow(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
child: Text(
'IN-FEED POSTS',
style: TextStyle(
fontSize: 18,
color: Colors.pinkAccent,
fontFamily: 'OpenSans',
),
),
padding: EdgeInsets.only(top: 10),
),
Padding(
child: Text(
'Followers per account',
style: TextStyle(
fontSize: 14,
fontFamily: 'OpenSans',
),
),
padding: EdgeInsets.only(bottom: 10),
),
],
),
Container(
child: Column(children: <Widget>[
Padding(
child: Text(
'Another text...',
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontFamily: 'OpenSans',
),
),
padding: EdgeInsets.only(top: 10),
),
]),
),
],
),
],
),
),
],
),
),