A powerful and intuitive Flutter package for creating responsive layouts with ease. Build beautiful, adaptive UIs that work seamlessly across all screen sizes.
Portrait Mode |
Square Mode |
Landscape Mode |
|
The example app demonstrates responsive layouts across different screen orientations using the responsive_breakpoint library.
- Simple Breakpoint System: 6 predefined breakpoints (xs, sm, md, lg, xl, xxl)
- Responsive Values: Easily define different values for different screen sizes
- Adaptive Widgets: Built-in responsive widgets for common use cases
| Breakpoint | Width Range | Device Type |
|---|---|---|
xs |
< 600px | Mobile |
sm |
600px - 959px | Large Mobile / Small Tablet |
md |
960px - 1279px | Tablet |
lg |
1280px - 1919px | Desktop |
xl |
1920px - 2559px | Large Desktop |
xxl |
≥ 2560px | Ultra-wide Desktop |
ResponsiveValue<T>- Define responsive values for different breakpointsBreakpoint- Enum for screen size breakpointsBreakpoint.getBreakpoint(BuildContext)- Get current breakpoint
ResponsiveFlex- Responsive grid layoutResponsiveVisibility- Show/hide widgets based on screen sizeResponsiveBuilder<T>- Build widgets conditionallyResponsivePadding- Adaptive paddingResponsiveAxis- Switch between Row and ColumnResponsivePreferredSizeBuilder<T>- Responsive app barsResponsiveChild- Conditional child widgets
BuildContext.responsive<T>(ResponsiveValue<T?> value)- Extension method for responsive values
Add this to your package's pubspec.yaml file:
dependencies:
responsive_breakpoint: ^1.0.0Then run:
flutter pub getimport 'package:responsive_breakpoint/responsive_breakpoint.dart';
// Define responsive values
final columns = ResponsiveValue<int>(
xs: 1,
sm: 2,
md: 3,
lg: 4,
xl: 5,
xxl: 6,
);
// Use in your widget
Widget build(BuildContext context) {
final currentColumns = context.responsive(columns) ?? 1;
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: currentColumns,
),
// ... rest of your grid
);
}Widget build(BuildContext context) {
final text = context.responsive(
ResponsiveValue<String>(
xs: 'Mobile text',
sm: 'Tablet text',
md: 'Desktop text',
lg: 'Large desktop text',
),
);
return Text(text ?? 'Default text');
}Create responsive grid layouts:
ResponsiveFlex(
columns: ResponsiveValue<int>(
xs: 1,
sm: 2,
md: 3,
lg: 4,
),
spacing: 16,
runSpacing: 16,
children: [
Card(child: Text('Item 1')),
Card(child: Text('Item 2')),
Card(child: Text('Item 3')),
// ... more items
],
);Show/hide widgets based on screen size:
ResponsiveVisibility(
visible: ResponsiveValue<bool>(
xs: false, // Hidden on mobile
sm: false, // Hidden on small tablets
md: true, // Visible on tablets and larger
),
child: Sidebar(),
);Build widgets conditionally:
ResponsiveBuilder<String>(
value: ResponsiveValue<String>(
xs: 'mobile',
sm: 'tablet',
md: 'desktop',
),
builder: (context, value) {
switch (value) {
case 'mobile':
return MobileLayout();
case 'tablet':
return TabletLayout();
case 'desktop':
return DesktopLayout();
default:
return DefaultLayout();
}
},
);Adaptive padding:
ResponsivePadding(
padding: ResponsiveValue<EdgeInsets>(
xs: EdgeInsets.all(8),
sm: EdgeInsets.all(16),
md: EdgeInsets.all(24),
lg: EdgeInsets.all(32),
),
child: YourWidget(),
);Switch between Row and Column:
ResponsiveAxis(
axis: ResponsiveValue<Axis>(
xs: Axis.vertical, // Stack vertically on mobile
md: Axis.horizontal, // Side by side on larger screens
),
children: [
Widget1(),
Widget2(),
],
);Responsive app bars:
ResponsivePreferredSizeBuilder<bool>(
value: ResponsiveValue<bool>(
xs: true, // Show leading on mobile
md: false, // Hide on larger screens
),
builder: (context, showLeading) {
return AppBar(
automaticallyImplyLeading: showLeading,
title: Text('My App'),
);
},
);Conditional child widgets:
ResponsiveChild(
child: ResponsiveValue<Widget>(
xs: MobileWidget(),
md: DesktopWidget(),
),
);import 'package:flutter/material.dart';
import 'package:responsive_breakpoint/responsive_breakpoint.dart';
class ResponsiveHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: ResponsivePreferredSizeBuilder<bool>(
value: ResponsiveValue<bool>(
xs: true,
md: false,
),
builder: (context, showLeading) {
return AppBar(
automaticallyImplyLeading: showLeading,
title: Text('Responsive App'),
);
},
),
drawer: ResponsiveVisibility(
visible: ResponsiveValue<bool>(
xs: true,
md: false,
),
child: Drawer(child: DrawerContent()),
),
body: Row(
children: [
// Sidebar - hidden on mobile
ResponsiveVisibility(
visible: ResponsiveValue<bool>(
xs: false,
md: true,
),
child: Sidebar(),
),
// Main content
Expanded(
child: Padding(
padding: context.responsive(ResponsiveValue<EdgeInsets>(
xs: EdgeInsets.all(16),
sm: EdgeInsets.all(24),
md: EdgeInsets.all(32),
)) ?? EdgeInsets.all(16),
child: ResponsiveFlex(
columns: ResponsiveValue<int>(
xs: 1,
sm: 2,
md: 3,
lg: 4,
),
spacing: 16,
runSpacing: 16,
children: List.generate(8, (index) => Card(
child: ListTile(
title: Text('Item $index'),
),
)),
),
),
),
],
),
);
}
}// Get current breakpoint
Breakpoint current = Breakpoint.getBreakpoint(context);
// Check specific breakpoint
if (current == Breakpoint.xs) {
// Mobile specific logic
}final value = ResponsiveValue<int>(
xs: 1,
lg: 4,
// sm, md, xl, xxl will fallback to the nearest defined value
);
// On sm screens, this will return 1 (fallback to xs)
// On md screens, this will return 1 (fallback to xs)
// On lg screens, this will return 4
// On xl screens, this will return 4 (fallback to lg)
// On xxl screens, this will return 4 (fallback to lg)Check out the complete example app in the example/ directory to see all features in action:
cd example
flutter runContributions are welcome! If you want to contribute to this project, please follow these steps:
- Fork this repository.
- Create a new branch for your modification.
- Make your changes and submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.