ResponsiveWrap

A Flutter widget for building responsive layouts with configurable breakpoints and column ratios.

ResponsiveWrap automatically adapts your content layout across desktop, tablet, and mobile screens without requiring multiple widget trees, nested Rows, or complex LayoutBuilders.

Perfect for:

  • Admin dashboards
  • Analytics applications
  • CRM systems
  • ERP systems
  • Project management apps
  • Responsive Flutter Web applications

Why ResponsiveWrap?

Building responsive layouts in Flutter often requires:

  • Multiple LayoutBuilder widgets
  • Separate mobile/tablet/desktop layouts
  • Complex breakpoint calculations
  • Nested Row and Column structures

ResponsiveWrap simplifies this into a single widget.

ResponsiveWrap(
  breakpoints: const {
    576: 1, // Use a single-column layout when width is below 576px
    768: 2, // Use a two-column layout when width is below 768px
  },
  columnRatios: const [
    0.7, // First child takes 70% of the available width
    0.3, // Second child takes 30% of the available width
  ],
  spacing: 16, // Horizontal spacing between columns
  runSpacing: 16, // Vertical spacing between wrapped rows
  children: [
    WidgetA(),
    WidgetB(),
  ],
)

Features

✅ Responsive content layout

✅ Custom screen breakpoints

✅ Flexible column width ratios

✅ Mobile, tablet, and desktop support

✅ Dashboard-friendly design

✅ Adjustable spacing and run spacing

✅ Lightweight and dependency-free

Installation

Add the package to your pubspec.yaml.

dependencies:
  responsive_wrap: ^1.0.0

Install packages:

flutter pub get

Import:

import 'package:responsive_wrap/responsive_wrap.dart';

Quick Example

ResponsiveWrap(
  breakpoints: const {
    576: 1,
    768: 2,
  },
  columnRatios: const [
    0.7,
    0.3,
  ],
  spacing: 16,
  runSpacing: 16,
  children: [
    ContentWidget(),
    SidebarWidget(),
  ],
)

Desktop:

+----------------------+----------+
|                      |          |
|      Content         | Sidebar  |
|                      |          |
+----------------------+----------+

Mobile:

+----------------------+
|      Content         |
+----------------------+

+----------------------+
|      Sidebar         |
+----------------------+

Breakpoints

Breakpoints define when the layout changes.

breakpoints: const {
  576: 1,
  768: 2,
}
Screen Width Layout
< 576px 1 Column
576px - 767px 2 Columns & uses column ratios
>= 768px 2 Columns & uses column ratios

Column Ratios

Column ratios determine how available width is distributed.

columnRatios: const [
  0.7,
  0.3,
]

Result:

Column Width
First 70%
Second 30%

Useful for:

  • Content + Sidebar
  • Chart + Statistics
  • Master + Detail
  • Dashboard layouts

Real World Example

Project Dashboard:

ResponsiveWrap(
  breakpoints: const {
    576: 1,
    768: 2,
  },
  columnRatios: const [
    0.75,
    0.25,
  ],
  spacing: 24,
  runSpacing: 24,
  children: [
    ProjectOverviewCard(),
    TeamMembersCard(),
  ],
)

Analytics Dashboard:

ResponsiveWrap(
  breakpoints: const {
    576: 1,
    992: 2,
  },
  columnRatios: const [
    0.65,
    0.35,
  ],
  spacing: 20,
  runSpacing: 20,
  children: [
    RevenueChart(),
    RevenueSummary(),
  ],
)

Example Application

A complete runnable example is available in the /example folder.

Run:

cd example
flutter run

Live Demo

Try it here:

👉 https://ademin.flutkit.com/#/ui-layout

Documentation

Full documentation:

https://flutkit.com/docs/flutter-dashboard-ui-kits/layout-ui-widgets-components/responsive-content-layout-with-responsivewrap/

Built with FlutKit

ResponsiveWrap is extracted from the FlutKit ecosystem and maintained as an open-source package for the Flutter community. It powers responsive content layouts used throughout FlutKit dashboard templates.

Explore more:

https://flutkit.com

Issues & Contributions

Bug reports, feature requests, and pull requests are welcome.

When reporting issues, please include:

  • Flutter version
  • Package version
  • Platform
  • Reproduction steps

License

MIT License

Libraries

responsive_wrap