In this piece we are going to explore most common Widget’s in Flutter and mobile development in general. You will be covering a very small subset of Widget’s from the Flutter framework. Flutter has plethora of Widget’s and it is not practical to cover them all. Visit the official Flutter website to know more.
Text
Text is probably the most used element in any kind of UI development. Flutter provides a widget name Text.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Hello Flutter', home: Scaffold( appBar: AppBar(), body: Text('Hello Flutter'), ), ); } } |
As you can see all you have to do is provide a String in the Text widget.
To centre the widget just wrap it with Center Widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Hello Flutter', home: Scaffold( appBar: AppBar(), body: Center( child: Text('Hello Flutter'), ), ), ); } } |
You can customise the Text using TextStyle widget. You can pass a TextStyle widget to Text in its style property.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Hello Flutter', home: Scaffold( appBar: AppBar(), body: Center( child: Text( 'Hello Flutter', style: TextStyle( fontSize: 40.0, color: Colors.blue, fontWeight: FontWeight.bold, ), ), ), ), ); } } |
As you can see we only used three properties here in TextStyle, fontSize, color and fontWeight. TextStyle has many more properties that you can use to customise text.
RaisedButton
There are a couple of Widgets available in Flutter to create buttons. We are going to look at one of them called RaisedButton. As the name suggests, it is a button that is raised.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primaryColorBrightness: Brightness.light, ), title: 'Hello Flutter', home: Scaffold( body: Center( child: RaisedButton( child: Text('Click Me!'), onPressed: () { print('Button Clicked!'); }, ), ), ), debugShowCheckedModeBanner: false, ); } } |
RaisedButton widget takes a callback function in its onPressed property. This callback is fired when whenever you press the button. It also takes a property named child, this is whatever you want to be inside the button. Here we have just added a simple text, but you could put anything that is a Widget inside the child property….literally anything!
There are a lot of properties that you can set to customise the button. Below you can see I have increased the elevation of button to 6.0, made it circular. added 32.0 padding, and changed its colour to blue.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primaryColorBrightness: Brightness.light, ), title: 'Hello Flutter', home: Scaffold( appBar: AppBar(), body: Center( child: RaisedButton( elevation: 6.0, color: Colors.blue, padding: EdgeInsets.all(40.0), shape: CircleBorder(), child: Text( 'Click Me!', style: TextStyle( color: Colors.white, ), ), onPressed: () { print('Button Clicked!'); }, ), ), ), debugShowCheckedModeBanner: false, ); } } |
Here is a link to very nice and short medium article that explains all the properties of RaisedButton: Widgets: Raised Button – FlutterDoc.
Columns
Columns and Rows (in next section) are some of the primary Widgets that you will often use when building simple as well as complex layouts in Flutter.
Suppose you want to put a couple of Widgets one below the other vertically. In this case you will use a Column. Let’s see an example where we put three Text widgets inside a column.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primaryColorBrightness: Brightness.light, ), title: 'Hello Flutter', home: Scaffold( appBar: AppBar(), body: Column( children: <Widget>[ Text('Text 1'), Text('Text 2'), Text('Text 3'), ], ), ), debugShowCheckedModeBanner: false, ); } } |
Column takes a list of widgets in its children property and aligns then vertically one after the other. There are other properties in Column which you can use to align the children. With Column and Row there is this concept of Main Axis and Cross Axis.
Column aligns its child widgets vertically so its Main Axis is vertical. Cross Axis is the opposite of Main Axis, so it’s the horizontal axis on case of Column.
Column’s Main and Cross axis.
You can move content across Main Axis and Cross Axis. Lets move content to centre across Main Axis.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primaryColorBrightness: Brightness.light, ), title: 'Hello Flutter', home: Scaffold( appBar: AppBar(), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'Text 1', style: TextStyle( fontSize: 40.0, ), ), Text( 'Text 2', style: TextStyle( fontSize: 40.0, ), ), Text( 'Text 3', style: TextStyle( fontSize: 40.0, ), ), ], ), ), debugShowCheckedModeBanner: false, ); } } |
Similarly you can also bring the content to centre across Cross Axis.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primaryColorBrightness: Brightness.light, ), title: 'Hello Flutter', home: Scaffold( appBar: AppBar(), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Text( 'Text 1', style: TextStyle( fontSize: 40.0, ), ), Text( 'Text 2', style: TextStyle( fontSize: 40.0, ), ), Text( 'Text 3', style: TextStyle( fontSize: 40.0, ), ), ], ), ), ), debugShowCheckedModeBanner: false, ); } } |
There are various options to align content across main and cross axis:
Main Axis:
- MainAxisAlignment.center
- MainAxisAlignment.start
- MainAxisAlignment.end
- MainAxisAlignment.spaceBetween
- MainAxisAlignment.spaceAround
- MainAxisAlignment.spaceEvenly
Cross Axis:
- CrossAxisAlignment.center
- CrossAxisAlignment.start
- CrossAxisAlignment.end
- CrossAxisAlignment.baseline
- CrossAxisAlignment.stretch
Never miss a post from TheTechnoCafe
Rows
Rows are similar to Columns, except that content is aligned horizontally in Rows. So if we want our Text’s to be side by side then we will put them inside a Row.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primaryColorBrightness: Brightness.light, ), title: 'Hello Flutter', home: Scaffold( appBar: AppBar(), body: Row( children: <Widget>[ Text( 'Text 1', style: TextStyle( fontSize: 40.0, ), ), Text( 'Text 2', style: TextStyle( fontSize: 40.0, ), ), Text( 'Text 3', style: TextStyle( fontSize: 40.0, ), ), ], ), ), debugShowCheckedModeBanner: false, ); } } |
When it comes to Row the Main Axis runs horizontally and the Cross Axis runs vertically.
So if you want to bring all the text views in the centre horizontally just set the mainAxisAlignment to centre.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primaryColorBrightness: Brightness.light, ), title: 'Hello Flutter', home: Scaffold( appBar: AppBar(), body: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'Text 1', style: TextStyle( fontSize: 40.0, ), ), Text( 'Text 2', style: TextStyle( fontSize: 40.0, ), ), Text( 'Text 3', style: TextStyle( fontSize: 40.0, ), ), ], ), ), debugShowCheckedModeBanner: false, ); } } |
Column and Row are widgets that you are going to use a lot for building layouts in Flutter, so it’s better to get a grasp on them early on. Go ahead and experiment with Column and Row in a sample app.
Card
Creating a card is straight forward in Flutter, just wrap you content inside a Card widget.
Below is an example where a Text is wrapped in a Card.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primaryColorBrightness: Brightness.light, ), title: 'Hello Flutter', home: Scaffold( appBar: AppBar(), body: Center( child: Card( child: Padding( padding: const EdgeInsets.all(8.0), child: Text('Hello Card'), ), ), ), ), debugShowCheckedModeBanner: false, ); } } |
Note (Padding Widget): Padding widget is used when you want to add padding around a widget. It takes an instance of EdgeInsets in the padding parameter. EdgeInsets are explained in next part of this series. It’s noting but a fancy term of providing padding and margins. I have no idea why sometimes framework developers come up with complicated names unnecessarily.
You can customise Card widget with its various properties. We have changed the color of card to green and increased the elevation to 6.0.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primaryColorBrightness: Brightness.light, ), title: 'Hello Flutter', home: Scaffold( appBar: AppBar(), body: Center( child: Card( color: Colors.green, elevation: 6.0, child: Padding( padding: const EdgeInsets.all(16.0), child: Text( 'Hello Card', style: TextStyle( fontSize: 20.0, color: Colors.white, ), ), ), ), ), ), debugShowCheckedModeBanner: false, ); } } |
I don’t want to make this tutorial too long, so I have broken it into two parts. In next tutorial you will explore even more Flutter Widgets.
<< Previous Tutorial – Flutter Crash Course – 2 – Application and UI Basics
2 Comments
ninja · March 27, 2019 at 7:33 am
thanks for the detail about the flutter but also check out my post How to use flutter software for a beginner and review
Flutter Crash Course - 2 - Application and UI Basics - TheTechnoCafe · February 2, 2019 at 11:51 pm
[…] Flutter Crash Course – 3 – Dive into Flutter Widget – Next Tutorial >> […]