This post is for flutter developers who are new to the Flutter.
Today we are covering the basic widgets for flutter developer which are heavily used in all kind of applications and also a baby step for new flutter developers.
In Flutter please go through the constructor of every widget to see any widgets argument and their attributes. This will help you to in developing good Flutter apps.
Widgets are as follows:
- Text
- Row and Column
- Container
- Stack
- Expanded
Similar to Android textview but it’s more powerful with loads of features to display the text on the screen.So what makes text more handsome is the style property. This attribute is optional but to apply the customisation we can use style and apply different attributes to make it look good on the screen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Text( | |
| 'Hello, guys! Flutter is beautiful', | |
| textAlign: TextAlign.center, | |
| overflow: TextOverflow.ellipsis, | |
| style: TextStyle(fontWeight: FontWeight.bold), | |
| ) |
Row widget display the children in horizontal direction.One important thing is to take care that we have limited space in case of row an column so we have to use Expanded widget.Expanded widget will tell that allow only the available space on the screen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Row( | |
| children: <Widget>[ | |
| Expanded( | |
| child: Text('Flutter Child One', textAlign: TextAlign.center), | |
| ), | |
| Expanded( | |
| child: Text('Flutter Child Two', textAlign: TextAlign.center), | |
| ), | |
| Expanded( | |
| child: FittedBox( | |
| fit: BoxFit.contain, // this is simple image | |
| child: const FlutterSampleLogo(), | |
| ), | |
| ), | |
| ], | |
| ) |
One very important attribute which applies both to Row and Column is the mainAxisAlignment and crossAxisAlignment.
Lets see how it behaves wrt Row and Column children widgets
For Row:
For Column:
Lets see an example of column widgets:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Column( | |
| children: <Widget>[ | |
| Text('Flutter Child One'), | |
| Text('Flutter Child Two'), | |
| Expanded( | |
| child: FittedBox( | |
| fit: BoxFit.contain, // this is simple image | |
| child: const FlutterLogo(), | |
| ), | |
| ), | |
| ], | |
| ) |
Container as the name suggest is used mainly for adding padding, margin or applying the decoration to group of child widgets.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Container( | |
| constraints: BoxConstraints.expand( | |
| height: Theme.of(context).textTheme.headline4.fontSize * 1.1 + 200.0, | |
| ), | |
| padding: const EdgeInsets.all(8.0), | |
| color: Colors.blue[600], | |
| alignment: Alignment.center, | |
| child: Text('Hello World', | |
| style: Theme.of(context) | |
| .textTheme | |
| .headline4 | |
| .copyWith(color: Colors.white)), | |
| transform: Matrix4.rotationZ(0.1), | |
| ) |
We have seen the direction of overlaying widgets in horizontal(Row) and vertical(Column) but to make beautiful UIs we have requirement to place one widget over the another so for that we use Stack widget.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Stack( | |
| children: <Widget>[ | |
| Container( | |
| width: 100, | |
| height: 100, | |
| color: Colors.red, | |
| ), | |
| Container( | |
| width: 90, | |
| height: 90, | |
| color: Colors.green, | |
| ), | |
| Container( | |
| width: 80, | |
| height: 80, | |
| color: Colors.blue, | |
| ), | |
| ], | |
| ) |
This widget simply expands the child of Row,Column or Flex to fill the available space vertically or horizontally depending upon the parent.
In below snippet we used Column so it will expand the second child vertically in yellow colour.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Column( | |
| children: <Widget>[ | |
| Container( | |
| color: Colors.blue, | |
| height: 100, | |
| width: 100, | |
| ), | |
| Expanded( | |
| child: Container( | |
| color: Colors.amber, | |
| width: 100, | |
| ), | |
| ), | |
| Container( | |
| color: Colors.blue, | |
| height: 100, | |
| width: 100, | |
| ), | |
| ], | |
| ), |
Credit: Code snippets taken from Flutter documentation
Please let us know what you think of Flutter for cross platform app development and about this post in comments.
Check our content on stress management and AI jobs
https://askfortricks.com/artificial-intelligence-engineer-jobs/
https://askfortricks.com/mastering-the-stress-management/
Ravi Yadav is an Android developer whose passion is to develop Android applications and sharing his work. He loves to post the tutorials which he created while learning any new latest technology topic.He loves to share about the latest technology happenings and other tricks that will be helpful for readers of Askfortricks.
Feeling glad to receive your comment