Example of Expanded Widget in Flutter iOS Android

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.

2. Create void main runApp() method and calling our main MyApp class.

3. Creating MyApp extends StatelessWidget class. This is our Root class.

4. Creating Widget Build area -> Material App -> Scaffold Widget -> SafeArea widget -> Center Widget.

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.

6. Complete source code for main.dart file:

Screenshot:

Example of Expanded Widget in Flutter

Leave a Reply

Your email address will not be published.