Flutter MediaQuery, LayoutBuilder & OrientationBuilder - Responsive Design Guide

Flutter-এ Responsive UI তৈরির জন্য সবচেয়ে বেশি ব্যবহৃত Widget হলো MediaQuery, LayoutBuilder এবং OrientationBuilder।

🔹 MediaQuery - All Common Properties

MediaQuery.of(context).size.width
// Screen Width

MediaQuery.of(context).size.height
// Screen Height

MediaQuery.of(context).padding.top
// Status Bar Height

MediaQuery.of(context).padding.bottom
// Navigation Bar Height

MediaQuery.of(context).viewInsets.bottom
// Keyboard Height

MediaQuery.of(context).orientation
// Portrait / Landscape

MediaQuery.of(context).devicePixelRatio
// Device Pixel Ratio

MediaQuery.of(context).textScaler
// Text Scale

MediaQuery.of(context).platformBrightness
// Dark / Light Mode

MediaQuery.of(context).alwaysUse24HourFormat
// 24 Hour Time Format

MediaQuery.of(context).accessibleNavigation
// Accessibility Navigation

MediaQuery.of(context).disableAnimations
// Animation Disable কিনা

MediaQuery.of(context).boldText
// Bold Text Enabled কিনা

MediaQuery.of(context).highContrast
// High Contrast Enabled কিনা

Example

double screenWidth =
    MediaQuery.of(context).size.width;

double screenHeight =
    MediaQuery.of(context).size.height;

Container(
  width: screenWidth * .8,
  height: 100,
  color: Colors.blue,
)

🔹 LayoutBuilder - All Common Properties

LayoutBuilder Parent Widget-এর Available Space অনুযায়ী UI তৈরি করে।

LayoutBuilder(

  builder: (
    BuildContext context,
    BoxConstraints constraints,
  ) {

    return Container(

      width: constraints.maxWidth,

      height: 100,

      color: Colors.blue,
    );
  },
)

BoxConstraints Properties

constraints.minWidth
// Minimum Width

constraints.maxWidth
// Maximum Width

constraints.minHeight
// Minimum Height

constraints.maxHeight
// Maximum Height

constraints.biggest
// Largest Size

constraints.smallest
// Smallest Size

Responsive Example

LayoutBuilder(

  builder: (context, constraints) {

    if (constraints.maxWidth > 600) {

      return Text(
        "Tablet Layout",
      );

    } else {

      return Text(
        "Mobile Layout",
      );
    }
  },
)

🔹 OrientationBuilder - All Common Properties

Screen Portrait না Landscape তা Detect করতে ব্যবহার করা হয়।

OrientationBuilder(

  builder: (
    BuildContext context,
    Orientation orientation,
  ) {

    if (
      orientation ==
      Orientation.portrait
    ) {

      return Text(
        "Portrait Mode",
      );

    } else {

      return Text(
        "Landscape Mode",
      );
    }
  },
)

Orientation Values

Orientation.portrait
// Vertical Screen

Orientation.landscape
// Horizontal Screen

🔹 FittedBox

Available Space অনুযায়ী Child Widget Scale করে।

FittedBox(

  fit: BoxFit.contain,

  alignment: Alignment.center,

  clipBehavior: Clip.none,

  child: Text(
    "Flutter",
  ),
)

FittedBox Properties

fit: BoxFit.cover
alignment: Alignment.center
clipBehavior: Clip.none
child: Widget()

🔹 FractionallySizedBox

Parent-এর Percentage অনুযায়ী Size নেয়।

FractionallySizedBox(

  widthFactor: .8,

  heightFactor: .5,

  alignment: Alignment.center,

  child: Container(
    color: Colors.blue,
  ),
)

🔹 AspectRatio

নির্দিষ্ট Ratio বজায় রাখে।

AspectRatio(

  aspectRatio: 16 / 9,

  child: Container(
    color: Colors.blue,
  ),
)

Common Ratios

🔹 ConstrainedBox

Size Limit করার জন্য।

ConstrainedBox(

  constraints: BoxConstraints(

    minWidth: 100,

    maxWidth: 300,

    minHeight: 50,

    maxHeight: 200,
  ),

  child: Container(
    color: Colors.red,
  ),
)

🔹 SizedOverflowBox

Child-এর Original Size বজায় রাখে।

SizedOverflowBox(

  size: Size(100, 100),

  alignment: Alignment.center,

  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

📌 Responsive Widgets Summary

Widget	ব্যবহার
MediaQuery	Screen Information
LayoutBuilder	Available Space Detect
OrientationBuilder	Portrait/Landscape Detect
FittedBox	Auto Scale
FractionallySizedBox	Percentage Size
AspectRatio	Fixed Ratio
ConstrainedBox	Size Limit
SizedOverflowBox	Overflow Size

📌 Most Used Responsive Code

double width =
    MediaQuery.of(context).size.width;

if (width > 1200) {

  // Desktop

} else if (width > 600) {

  // Tablet

} else {

  // Mobile
}

📌 Device Breakpoints

0 - 600     => Mobile

600 - 1024  => Tablet

1024+       => Desktop

Flutter Responsive Design-এর ৯০% কাজ MediaQuery, LayoutBuilder এবং OrientationBuilder দিয়েই করা যায়।

CitomoLtd