Software Engineering Roadmap for Data Scientists In 2023

Building a basic user interface using widgets - Expanded Widget Tutorial

In Flutter, the user interface of an app is built using widgets. These widgets are highly customizable and can be easily composed to create a wide range of layouts and visual elements.

In this tutorial we are going to talk about how to code a simple app using Column and Expanded widget - if you are not familiar with using Column widget you can see our previous tutorial for full explanation from here.

The Expanded widget in Flutter is a layout widget that is used to take up remaining space in a layout. It is typically used in combination with other widgets that have a fixed size, such as the Container widget. The Expanded widget is designed to expand its child to fill the remaining space.

A common use case for the Expanded widget is when you have a fixed-size element, such as an image, and you want to fill the remaining space with a flexible element, such as a text field. In this case, you can wrap the text field in an Expanded widget, which will cause it to fill the remaining space.

Here's an example step by step of how to use the Expanded widget: 

Step 1: create StatelessWidget and name it as "ExpandedWidgetTutorial "

Step 2: inside your Scaffold create app bar with title "My App"

Step 3: now lets add body property inside the Scaffold to start build our layout

Step 4: create Column widget to align all the app elements vertically 

Step 5: now let's add all of our Widget of the app and start with fetching a network image from an url and give it all of our screen width and to do so we use Image.network Widget passing the URL of the photo - here we are using a demo image as a place holder

Step 6: create a Text Widget and write a text to be displayed for example write "Welcome to my app!" and let's play around with the style of the text change the font size to be 24px and change the font weight to be Bold

Step 7 : now the time for our Expanded Widget, create a Container Widget and wrap it with Expanded Widget add the property of decoration and use BoxDecoration change the color to blue and add a circular border radius of 5px to have a rounded corners.

Step 8: add a Padding widget as a child of our Container and adjust the padding property to be 8px from all dimensions(left-top, right-bottom) to do this simply call the EdgeInsets.all and pass 8px as a parameter.

Step 9: add Text widget as a child of Padding widget and write a demo text for example "This is the main content of the app" and play around with the text style as you like. 

Step 10: create a Container widget and make it take all the width of the screen using width property and use the double.infinity that allow the any widget to take all the width of the screen add some decoration and a circular border radius as we have done at step 7 add a Center widget as a child for this Container and the child of the Center widget will be Text widget that display a demo text "Press me!" and change the style as you like; imagine this container as a button or you could create a real button using MaterialButton widget

Here is our final Result you should get something like that

Now we will recap on the the structure of our tutorial steps:

we are using the Scaffold widget as the root of the user interface. The Scaffold widget provides a basic layout structure and includes an AppBar and a body area.

In the body area, we are using a Column widget to stack the other widgets vertically. The Column widget takes a list of child widgets, in this case, an Image, a Text, an Expanded widget, and a Container. The Image widget is used to display an image from the network, the Text widget is used to display text, the Expanded widget is used to take up remaining space and the Container is used to create a container with a specific size and color.

As you can see, it is easy to create a basic user interface using Flutter's widgets. Each widget has its own properties and can be customized to achieve the desired look and feel. With the help of the rich collection of widgets provided by Flutter, you can build highly expressive and visually attractive user interfaces for your app with ease.

so the most important thing that you should learn from this tutorial is using Expanded widget  appropriately and smartly this will make your app element responsive with every screen size that the app will run on so be smart, and try to code a real and more complex design using what you have learnt in this tutorial 

if you haven't used the Expanded widget the right way then you may got a bothering overflow error like this one and believe me it's annoying for every beginner mobile developer

you can use the full source code for the tutorial from here:

Edit This Article