Flutter apps कई screen sizes (phones, tablets, web, desktop) पर चलते हैं, इसलिए responsive (size के अनुकूल) और adaptive (platform के अनुकूल) UIs बनाना महत्वपूर्ण है। Flutter इसके लिए MediaQuery, LayoutBuilder, और flexible widgets जैसे tools प्रदान करता है।
Responsive: screen size के अनुकूल
dart
// MediaQuery — get screen dimensions and adapt
final width = MediaQuery.of(context).size.width;
if (width > 600) {
// tablet/desktop layout (e.g. side-by-side)
} else {
// phone layout (e.g. stacked)
}
// LayoutBuilder — adapt based on the available space (parent constraints)
LayoutBuilder(builder: (context, constraints) {
if (constraints.maxWidth > 600) return WideLayout();
return NarrowLayout();
})