In this article, we are going to create a Flutter Layout from existing source code which gets generated by fluter create command. If you have not created your Flutter project read this Create your first Flutter project
Our final goal is to create a layout which looks like this. Showing person name, picture, and bio. Download the sketch file.
We are going to cut MyHomePage and _MyHomePageState classes from ‘main.dart’ file and paste the clipboard content into a new file ‘bio_detail_widget.dart‘ in widgets folder under lib folder.
See my screenshot.
Name your libraries and source files must follow dart coding guidelines using lowercase_with_underscores. You can read coding guidelines here Effective Dart: Style
Don’t forget to import ‘bio_detail_widget.dart’ file in ‘main.dart’ file.
import 'package:ff_tutorial_2/widgets/bio_detail_widget.dart';Finally, _MyHomePageState class looks like the code on the bottom of the page.
Our body has a child which is new Column, it is a Multi-child layout widget. Column widget places its children vertically.
We have two Expanded widgets one holding our bio picture, name and age other is holding our bio description. Expanded makes its child expand to fill available space in the main axis.
Our first Expanded widget has one child which is a Row, it displays its children in a horizontal array.
For Image, we have created a new folder called images in the same level as pubspec.yaml file. Our pubspec.yaml file has image reference then all the project files automatically can use this reference.
assets:
- images/bio_pic_1.png
new Expanded(
child: new Image.asset('images/bio_pic_1.png'),
),
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return new Scaffold(
appBar: new AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: new Text(widget.title),
),
body: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
new Expanded(
flex:0,
child: new Container(
padding: new EdgeInsets.all(10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
new Expanded(
child: new Image.asset('images/bio_pic_1.png'),
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
new Text('Name: John Doe', style: new TextStyle(color: Color.fromRGBO(138, 87, 42, 100.00))),
new Text('Age: 34', style: new TextStyle(color: Color.fromRGBO(138, 87, 42, 100.00))),
],
)
),
],
),
)
),
new Expanded(
child: new Container(
padding: new EdgeInsets.all(10.0),
child: new Text('Bio: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ille, ut dixi, vitiose. Eadem nunc mea adversum te oratio est. Nihil minus, contraque illa hereditate dives ob eamque rem laetus. Duo Reges: constructio interrete.',
style: new TextStyle(color: Color.fromRGBO(138, 87, 42, 100.00))),
)
),
],
)
);
}
}