How To Device Spacified Layout In Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 10-09-2020

Flutter gives us a widget named as OrientationBuilder which is used to detect orientation in flutter apps. The OrientationBuilder widget will automatically compares Width and Height of device and in return us a True false Boolean value based on orientation. If device width is grater than height then device orientation is Landscape. If device height is grater than width then device orientation is Portrait.

How To Device Spacified Layout In Flutter Android App

YOu Can Add  Device Spacified Layout Code:

Widget _portraitView(){
  return Container(
      width: 300.00,
      color: Colors.blueAccent,
      padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
      child: Text(' Portrait View. ',
          textAlign: TextAlign.center,style: TextStyle( color: Colors.white)));
}

Widget _landscapeView(){
  return Container(
      width: 300.00,
      color: Colors.pink,
      padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
      child: Text(' Landscape View.',
          textAlign: TextAlign.center, style: TextStyle( color: Colors.white)));
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            centerTitle: true,
              backgroundColor: Colors.lightBlueAccent,
              title: Text('Detect Device Screen Orientation')),
          body: OrientationBuilder(
              builder: (context, orientation) {
                return Center(

                    child: orientation == Orientation.portrait
                        ? _portraitView()
                        : _landscapeView()

                );
              }
          )
      )
  );
}


Complete Code FOr Device Spacified Layout In FLutter 
main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  Widget _portraitView(){
    return Container(
        width: 300.00,
        color: Colors.blueAccent,
        padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
        child: Text(' Portrait View. ',
            textAlign: TextAlign.center,style: TextStyle( color: Colors.white)));
  }

  Widget _landscapeView(){
    return Container(
        width: 300.00,
        color: Colors.pink,
        padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
        child: Text(' Landscape View.',
            textAlign: TextAlign.center, style: TextStyle( color: Colors.white)));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              centerTitle: true,
                backgroundColor: Colors.lightBlueAccent,
                title: Text('Detect Device Screen Orientation')),
            body: OrientationBuilder(
                builder: (context, orientation) {
                  return Center(

                      child: orientation == Orientation.portrait
                          ? _portraitView()
                          : _landscapeView()

                  );
                }
            )
        )
    );
  }
}

Related Post