Flutter Beautiful Expanded

Yalçın Golayoğlu
2 min readSep 12, 2021

--

Hello everyone. I would like to write something about Expanded widget.

Expanded widget is too important for styling in Flutter. We can use height and width properties for style some widgets. But Expanded widget more useful for style these widgets. Because our apps can be use mobile devices, tablets, PC’s, smart watchs and T.V’s. We can style them easily for any smart device thanks to Expanded widget.

First of all you should watch this video.

I want to show you how can i use Expanded widget.

Expanded Widget, Flutter

I created a Stateful Widget which name is “ExpandedEx” and return Scaffold widget with Column widget.

Column widget have two Container and one Row widgets. Container widgets color are blue and red. We have also green and yellow Containers in Row widget.

If i want to use Expanded widget, i should wrap Container with Expanded widget for this example. Expanded widget has “flex” property. I assign these flex properties like one or two. But you can assign whatever you want. Device’ s screen equal to sum of flex properties.

  • Flex property for Red Container is 2
  • Flex property for Blue Container is 1
  • Flex property for Row Widget is 1

In this example, our screen have four sections. Two sections belong to Red Container, one section belong to Blue Container and one section belong to Row Widget.

  • Flex property for Green Container is 1
  • Flex property for Yellow Container is 2

These Containers are in Row widget. Flex of Row widget is 1. Row widget have three sections. One section of Row widget is Green Container and two section of Row widget is Yellow Container.

For more information about Flutter, you can subscribe my YouTube channel and follow my Instagram page.

Everything is widget..

--

--

Yalçın Golayoğlu
Yalçın Golayoğlu

Responses (1)