Expanded widget in flutter can expand in all available space on screen if developer dose not specify width and height of children. Expanded widget is can expend in Row and Column widgets. In today’s tutorial i am putting expanded widget inside a Column widget. I am creating 2 Container widgets with fix width and height. Between the both Container widgets i am creating Expanded width with fix width only. I am not specifying height of Expanded widget. So it will automatically occupy all the free space on screen in height manner. Using this example you can easily understand the functionality of Expanded widget. So in this tutorial we would learn about Flutter Expanded Widget Explained Android iOS Example Tutorial. You can read more about Expanded widget on flutter’s official page here.
Contents in this project Flutter Expanded Widget Explained Android iOS Example Tutorial:
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Widget Build area in MyApp class and define Scaffold widget -> SafeArea Widget -> Center Widget -> Column widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea(child: Center( child: Center(child: Column( children: <Widget>[ ],) )) )) ); } |
5. Creating 2 Container widget with fixed width and height and 1 Expanded widget with only fixed width inside Column widget.
|
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 |
Container( color: Colors.lightBlue, width: 120, height: 120, child: Center(child: Text('ONE', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 28, fontWeight: FontWeight.bold))) ), Expanded( child: Container( color: Colors.green, width: 120, child: Center(child: Text('TWO', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 28, fontWeight: FontWeight.bold))) )), Container( color: Colors.pink, width: 120, height: 120, child: Center(child: Text('THREE', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 28, fontWeight: FontWeight.bold))) ) |
6. Complete source code for main.dart file:
|
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 42 43 44 45 46 47 48 49 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea(child: Center( child: Center(child: Column( children: <Widget>[ Container( color: Colors.lightBlue, width: 120, height: 120, child: Center(child: Text('ONE', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 28, fontWeight: FontWeight.bold))) ), Expanded( child: Container( color: Colors.green, width: 120, child: Center(child: Text('TWO', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 28, fontWeight: FontWeight.bold))) )), Container( color: Colors.pink, width: 120, height: 120, child: Center(child: Text('THREE', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 28, fontWeight: FontWeight.bold))) ) ],) )) )) ); } } |
Screenshot:
