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.
Read more about Flutter app development services from mobikul.
Let’s start with the code of UI-Based Orientation
Main Code for UI-Based Orientation
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
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
Be the first to comment.