UI-Based Orientation in Flutter

As the title indicates UI-Based Orientation means the dynamic UI which will change as the orientation changes in the device.

There are two types of Orientations in any device.

Portrait
Landscape

So we can make a dynamic user interface that can change itself when the device’s orientation changes.

Let’s start with the code of UI-Based Orientation

Main Code for UI-Based Orientation

     body: OrientationBuilder(
       builder: (context, orientation) {
       return GridView.count(
   // Create a grid with 2 columns in portrait mode, or 3 columns in
    // landscape mode.
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
     // Generate 100 widgets that display their index in the List.
            children: List.generate(50, (index) {
              return Center(
                 child: Container(
                   height: 100,
                   width: 100,
                   color: Colors.pink,
                 ),
              );
            }),
          );
        },
      )

body: OrientationBuilder(

builder: (context, orientation) {

return GridView.count(

// Create a grid with 2 columns in portrait mode, or 3 columns in

// landscape mode.

crossAxisCount: orientation == Orientation.portrait ? 2 : 3,

// Generate 100 widgets that display their index in the List.

children: List.generate(50, (index) {

return Center(

child: Container(

height: 100,

width: 100,

color: Colors.pink,

);

}),

);

)

In the above block of code, we have checked the orientation of the device then we set the cross-axis count for the UI presentation.

Let’s go through the Complete Code

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: OrientationBuilder(
        builder: (context, orientation) {
          return GridView.count(
            // Create a grid with 2 columns in portrait mode, or 3 columns in
            // landscape mode.
            crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
            // Generate 100 widgets that display their index in the List.
            children: List.generate(50, (index) {
              return Center(
                 child: Container(
                   height: 100,
                   width: 100,
                   color: Colors.pink,
                 ),
              );
            }),
          );
        },
      ),

    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

home: const MyHomePage(title: 'Flutter Demo Home Page'),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({super.key, required this.title});

final String title;

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: OrientationBuilder(

builder: (context, orientation) {

return GridView.count(

// Create a grid with 2 columns in portrait mode, or 3 columns in

// landscape mode.

crossAxisCount: orientation == Orientation.portrait ? 2 : 3,

// Generate 100 widgets that display their index in the List.

children: List.generate(50, (index) {

return Center(

child: Container(

height: 100,

width: 100,

color: Colors.pink,

);

}),

);

}

Basically, the main concept is to understand how we can create a dynamic UI according to the orientation.

Conclusion

I hope this blog helps you to understand UI Based Orientation

Thanks for reading !!

For more blogs click here.

Reference link -> https://docs.flutter.dev/cookbook/design/orientation

Deepak Kumar 27 April 2023

. . .

UI-Based Orientation in Flutter

Let’s start with the code of UI-Based Orientation

Main Code for UI-Based Orientation

Let’s go through the Complete Code

Conclusion

Leave a Comment Cancel Reply

Message Sent!