In this blog, we are going to discuss how to achieve complex UI in a flutter.

We have seen many beautiful UI created in Android studio and X codes but implementing those in flutter is bit difficult and complex, to be frank, we can make more beautiful and complex UI easily in a flutter. Let’s see how it is possible.

Complex Triangle

To achieve this complexity we have to learn about this triangle

As mentioned in that figure, a complex triangle consists of 3 different components.

1. Stack
2. Transform
3. Animation Controller

Stack

The Stack the widget allows us to put up multiple layers of widgets onto the screen.

The widget takes multiple children and orders them from bottom to top. So the first item is the bottom-most and the last is the topmost.

Stack(
  children: <Widget>[
    BottomWidget(),
    MiddleWidget(),
    TopWidget(),
  ],
),

The size of the Stack is the size of the largest member in the layer. So if the bottom layer covers the complete screen then the size of the Stack is the complete screen.

Each member in the stack needs to be positioned or aligned, or else it ends up in the top left corner by default.

As an example, let’s take three containers of shrinking size:

Stack(
  children: <Widget>[
    // Max Size
    Container(
      color: Colors.*green*,
    ),
    Container(
      color: Colors.*blue*,
      height: 300.0,
      width: 300.0,
    ),
    Container(
      color: Colors.*pink*,
      height: 150.0,
      width: 150.0,
    )
  ],
),

If you notice, the containers which are smaller have a lot more area to go to and hence default to top left. To change this, you can align or position your widget using the Align or Positioned widget.

An Align widget usually takes widget to extreme positions. So for example, if we enter top-right, we need to add extra padding to keep it neat and tidy. A Positioned widget combines these two things and lets us keep one Positioned widget instead of an Align and a Padding. We will see how in a while.

We’ll alter our example to use Align and Positioned. Let’s simply wrap our containers in an Align and then a Positioned widget.

Note: Positioned has to be a child of a Stack. There cannot be another widget in between the stack and the widget.

#flutter #mobile-apps #developer