Flutter layout -3 column - flutter

Question

I am trying to create a resume document similar to the attached image. Need some help on top-level layout
Would it be:
container
children
column widget
children
container (header)
container (body)
children
column
children
row (education)
row (experience)
also, how would I get the dotted lines?
Thanks for your help

Answer 1

It would be:
container
children
column widget
children
container (header)
container (body)
child
row
children
column (education)
column (experience)
For Dash Lines, you can use the following Plugin Flutter Dash
Another alternative would be:
column widget
children
Row (header)
Row (body)
children
column (education)
column (experience)
To achieve the exact layout in the body section, you might want to use to Expanded Widget to achieve what you want.
column widget
children
Row (header)
Row (body)
children
Expanded [Flex 1]
child
Container (education)
Expanded [Flex 2]
child
Container (experience)
For Dash to work:
You need to add flutter_dash: ^0.0.1 under dependencies in pubspec.yaml
import 'package:flutter/material.dart';
import 'package:flutter_dash/flutter_dash.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
'/': (BuildContext context) => MyApp2(),
},
);
}
}
class MyApp2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 3,
)
],
),
Dash(
direction: Axis.horizontal,
length: MediaQuery.of(context).size.width,
dashLength: 12,
dashColor: Colors.red),
Row(
children: <Widget>[
Expanded(
child: Text('Education'),
flex: 1,
),
Dash(
direction: Axis.vertical,
length: (2 *MediaQuery.of(context).size.height) / 3 - MediaQuery.of(context).padding.top,
dashLength: 12,
dashColor: Colors.red),
Expanded(
child: Text('Experience'),
flex: 2,
),
],
),
],
);
}
}

Answer 2

You can try this too:
...your document...
Container(
child: Column(
children: <Widget>[
Container(
child: ....header....,
),
Container(
...body...
child: Row(
children: <Widget>[
Container(
child: ...education...
),
Container(
child: ...experience...,
),
],
),
),
],
),
);