146 lines
3.1 KiB
Markdown
146 lines
3.1 KiB
Markdown
---
|
|
name: features-responsive
|
|
description: Flutter responsive design - MediaQuery, LayoutBuilder, responsive layouts, and screen adaptation
|
|
---
|
|
|
|
# Responsive Design
|
|
|
|
Create layouts that adapt to different screen sizes and orientations.
|
|
|
|
## MediaQuery
|
|
|
|
Access device information and screen size.
|
|
|
|
```dart
|
|
class ResponsiveWidget extends StatelessWidget {
|
|
const ResponsiveWidget({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final mediaQuery = MediaQuery.of(context);
|
|
final screenWidth = mediaQuery.size.width;
|
|
final screenHeight = mediaQuery.size.height;
|
|
final orientation = mediaQuery.orientation;
|
|
final padding = mediaQuery.padding;
|
|
final devicePixelRatio = mediaQuery.devicePixelRatio;
|
|
|
|
return Container(
|
|
width: screenWidth * 0.8,
|
|
height: screenHeight * 0.5,
|
|
padding: EdgeInsets.only(top: padding.top),
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
## LayoutBuilder
|
|
|
|
Build widgets based on available constraints.
|
|
|
|
```dart
|
|
LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
if (constraints.maxWidth > 600) {
|
|
return WideLayout();
|
|
} else {
|
|
return NarrowLayout();
|
|
}
|
|
},
|
|
)
|
|
```
|
|
|
|
## Responsive Breakpoints
|
|
|
|
```dart
|
|
class ResponsiveLayout extends StatelessWidget {
|
|
const ResponsiveLayout({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final width = MediaQuery.of(context).size.width;
|
|
|
|
if (width > 1200) {
|
|
return DesktopLayout();
|
|
} else if (width > 600) {
|
|
return TabletLayout();
|
|
} else {
|
|
return MobileLayout();
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Orientation Builder
|
|
|
|
Build widgets based on orientation.
|
|
|
|
```dart
|
|
OrientationBuilder(
|
|
builder: (context, orientation) {
|
|
if (orientation == Orientation.portrait) {
|
|
return PortraitLayout();
|
|
} else {
|
|
return LandscapeLayout();
|
|
}
|
|
},
|
|
)
|
|
```
|
|
|
|
## Responsive Grid
|
|
|
|
```dart
|
|
class ResponsiveGrid extends StatelessWidget {
|
|
const ResponsiveGrid({super.key});
|
|
|
|
int _getCrossAxisCount(BuildContext context) {
|
|
final width = MediaQuery.of(context).size.width;
|
|
if (width > 1200) return 4;
|
|
if (width > 600) return 3;
|
|
return 2;
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GridView.builder(
|
|
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: _getCrossAxisCount(context),
|
|
crossAxisSpacing: 10,
|
|
mainAxisSpacing: 10,
|
|
),
|
|
itemBuilder: (context, index) => Container(color: Colors.blue),
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
## Safe Area
|
|
|
|
Respect device safe areas.
|
|
|
|
```dart
|
|
SafeArea(
|
|
child: Column(
|
|
children: [
|
|
Text('Content'),
|
|
],
|
|
),
|
|
)
|
|
```
|
|
|
|
## Key Points
|
|
|
|
- Use `MediaQuery` to access screen information
|
|
- Use `LayoutBuilder` for constraint-based layouts
|
|
- Define breakpoints for responsive design
|
|
- Use `OrientationBuilder` for orientation changes
|
|
- Use `SafeArea` to respect device safe areas
|
|
- Test on different screen sizes
|
|
- Consider tablet and desktop layouts
|
|
- Use flexible layouts that adapt to constraints
|
|
|
|
<!--
|
|
Source references:
|
|
- https://github.com/flutter/flutter/tree/main/packages/flutter/lib/src/widgets/media_query.dart
|
|
- https://docs.flutter.dev/development/ui/layout/responsive
|
|
-->
|