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.

Text Widget class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Hello Flutter', home: Scaffold( appBar: AppBar(), body: Text('Hello Flutter'), ), ); } } 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.

Center Widget class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Hello Flutter', home: Scaffold( appBar: AppBar(), body: Center( child: Text('Hello Flutter'), ), ), ); } } 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.

TextStyle Widget 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, ), ), ), ), ); } } 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.

RaisedButton 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, ); } } 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.

RaisedButton Customisation 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, ); } } 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.

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, ); } } 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.

You can move content across Main Axis and Cross Axis. Lets move content to centre across Main Axis.

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, ); } } 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.

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, ); } } 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.

Row 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, ); } } 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.

Row alignment 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, ); } } 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.

Flutter Card 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, ); } } 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.

Flutter Card Custom 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, ); } } 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