Flutter and Orientation

Your library is your portrait.

When I started my Mobile programming journey, there used to be some use cases around the device orientations,

Is the device in portrait, 

Is the device in landscape,

This is a common use-case which every developers out there will encounter one day or another..I feel you all !!!!

Well how about in Flutter??? Hmmmmm…..

---

Begin…

Introducing Orientation Builder,

As per the documentation,

Builds a widget tree that can depend on the parent widget’s orientation (distinct from the device orientation).

---

How do we implement,??

1. Orientation Builder has a builder function to build the layouts. 
2. This builder is called when device orientation changes.
3. Values of Orientation — Orientation.portrait or Orientation.landscape.

---

From the code snippet point of view, it looks like this,

return OrientationBuilder(
      builder: (context, orientation) {
        return orientation == Orientation.landscape
            ? LandscapeMode()
            : PortraitMode();
      },
);

---

Landscape Mode and Portrait Mode, here being the widgets….

Animations…

We are using the Animated Containers here.

Flutter provides some very handy widgets which are animated out of the box when a property is changed which is called “implicit animation”.

One such widget is Animated Container.

Some case would require you to define a controller etc.But if using AnimatedContainer you can just specify:

duration: Duration(seconds: //AS PER YOUR NEED),

and the value which you are changing, in our case alignment,

---

AnimatedContainer(
          alignment:
              Alignment(1.0 - _controller.value, 1.0 - _controller.value),
          duration: Duration(milliseconds: 100),
          curve: Curves.easeOutQuint,
          Child: //YOUR CHILD
        ),

For the users, curious about the Flutter Logo, there is a widget for that called

FlutterLogo. As per the documentation

The Flutter logo, in widget form. This widget respects the IconTheme. For guidelines on using the Flutter logo, visit https://flutter.io/brand.

---

child: FlutterLogo(
     style: FlutterLogoStyle.horizontal,
     size: 100.0,
),

Using the style of Flutter Logo, you can alter as :

1. horizontal — Show Flutter’s logo on the left, and the “Flutter” label to its right.
2. markOnly — Show only Flutter’s logo, not the “Flutter” label. This is the default behavior for FlutterLogoDecoration objects
3. stacked — Show Flutter’s logo above the “Flutter” label.