As we all know every designing layout in flutter usages Rows and Columns. We can set their space properties using MainAxisAlignment. But what if developer want so stretch single child to complete free space on screen. Here comes the Expanded widget. Expanded widget can stretch itself and fill the extra space available on device screen. What we’ve to do is just wrap the Child widget in Expanded widget and here comes the magic. Expanded widget can work on a algorithm which would allow the inflexible widget first then put the Expanded widget in layout, so it won’t affect the fixed size children. So in today’s tutorial we would learn about Example of Expanded Widget in Flutter in both iOS Android.
Contents in this project Example of Expanded Widget in Flutter:
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 calling our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating MyApp extends StatelessWidget class. This is our Root class.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating Widget Build area -> Material App -> Scaffold Widget -> SafeArea widget -> Center Widget.
|
1 2 3 4 5 6 7 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: ))));} |
5. Creating Column widget, Here we would make 3 child widgets, 2 Container widget with fixed width and height and 1 Expanded widget with non defining width height. The expanded widget will cover all the remaining space on screen.
Expanded Propertie:
- flex : Usages integer value. Just to set the prioritize expanded widget if two or more expanded widgets given. To know more about visit flutter’s official page here.
|
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 |
Column( children: <Widget>[ Container( color: Colors.green, width: 150, height: 140, child: Center( child: Text('Container Widget', textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontSize: 27, fontWeight: FontWeight.bold)))), Container( color: Colors.blue, width: 150, height: 140, child: Center( child: Text('Container Widget', textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontSize: 27, fontWeight: FontWeight.bold)))), Expanded( child: Container( color: Colors.pink, //width: 150, child: Center( child: Text('Expanded Widget', textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontSize: 27, 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 50 |
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: Column( children: <Widget>[ Container( color: Colors.green, width: 150, height: 140, child: Center( child: Text('Container Widget', textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontSize: 27, fontWeight: FontWeight.bold)))), Container( color: Colors.blue, width: 150, height: 140, child: Center( child: Text('Container Widget', textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontSize: 27, fontWeight: FontWeight.bold)))), Expanded( child: Container( color: Colors.pink, //width: 150, child: Center( child: Text('Expanded Widget', textAlign: TextAlign.center, style: TextStyle( color: Colors.white, fontSize: 27, fontWeight: FontWeight.bold))))), ], ))))); } } |
Screenshot:
