When you’re building apps that need to work across different screen sizes (phones, tablets, etc.), LayoutBuilder is a powerful tool to help create adaptive UIs. It lets you access the parent widget’s constraints and make dynamic decisions based on the available space.
Example: Responsive Grid Layout
In this example, we create a grid layout that adjusts the number of columns based on the screen width:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Responsive Grid")),
body: ResponsiveGrid(),
),
);
}
}
class ResponsiveGrid extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
// Check the screen width to decide number of columns
int columns = constraints.maxWidth > 600 ? 4 : 2;
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columns,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemCount: 20,
itemBuilder: (context, index) {
return Container(
color: Colors.blueAccent,
child: Center(
child: Text(
"Item $index",
style: TextStyle(color: Colors.white),
),
),
);
},
);
},
);
}
}
How it works:
- LayoutBuilder: It gives access to the parent constraints (maxWidth in this case), and based on that, we dynamically change the number of columns.
- Responsive Columns: If the screen width is larger than 600 pixels, we display 4 columns, otherwise, we show 2.
This approach can be extended for other responsive designs as well.
Top comments (0)