โ–ฒ

Flutter Gems is a curated list of 6000+ useful Dart & Flutter packages that are categorized based on functionality.

Discord Medium LinkedIn Twitter

Top Flutter Responsive UI packages

Last updated: November 15, 2024

Responsive UI or Adaptive UI refers to a user interface design that provides an optimal viewing experience โ€” easy reading and navigation with a minimum of resizing, panning, and scrollingโ€”across a wide range of devices, from desktop computer monitors to mobile phones. It is also known as Liquid UI as it is based on the principle of "liquid layouts", which means that the UI adapts to the size and shape of the device it is being viewed on. This makes it easy for users to interact with the UI regardless of the device they are using.

The complete list of Flutter packages that provide Responsive UI, Adaptive UI, Liquid UI or Responsive Layouts for your Flutter app is provided below.


flutter_screenutil Card Image
flutter_screenutil
Dart 3 compatible ๐Ÿ‘ 4.58K
Maintenance Status: Good

A flutter plugin for adapting screen and font size.Guaranteed to look good on different models

responsive_framework Card Image
responsive_framework
Dart 3 compatible ๐Ÿ‘ 3.05K
Maintenance Status: Good

Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes.

sizer Card Image
sizer
Dart 3 compatible ๐Ÿ‘ 1.65K
Maintenance Status: Good

A flutter plugin for Easily makeย Flutterย appsย responsive. Automatically adaptย UIย to different screen sizes.

responsive_builder Card Image
responsive_builder
Dart 3 compatible ๐Ÿ‘ 1.64K
Maintenance Status: Good

A set of widgets that can be used to define a readable responsive UI for widgets.

flutter_adaptive_scaffold Card Image
flutter_adaptive_scaffold
Dart 3 compatible ๐Ÿ‘ 878
Maintenance Status: Good

Widgets to easily build adaptive layouts, including navigation elements.

responsive_sizer Card Image
responsive_sizer
Dart 3 compatible ๐Ÿ‘ 565
Maintenance Status: Good

Responsive Sizer helps implement a reponsive layout by providing helper widgets and extensions.

easy_sidemenu Card Image
easy_sidemenu
Dart 3 compatible ๐Ÿ‘ 404
Maintenance Status: Good

An easy to use side menu (navigation rail) in flutter and can used for navigation

overflow_view Card Image
overflow_view
Dart 3 compatible ๐Ÿ‘ 204
Maintenance Status: Good

A widget displaying children in a line with an overflow indicator at the end if there is not enough space.

flutter_admin_scaffold Card Image
flutter_admin_scaffold
Dart 3 compatible ๐Ÿ‘ 192
Maintenance Status: Good

A scaffold class with a sideBar that works with a appBar.

keyboard_avoider Card Image
keyboard_avoider
Dart 3 compatible ๐Ÿ‘ 119
Maintenance Status: Good

A lightweight alternative to the Scaffold widget for avoiding the on-screen software keyboard. Automatically scrolls obscured TextField child widgets into view on focus.

ready Card Image
ready
Dart 3 compatible ๐Ÿ‘ 111
Maintenance Status: Good

Package that contains complete list solution and admin dashboard

flutter_gutter
Dart 3 compatible ๐Ÿ‘ 60
Maintenance Status: Good

Get your UI out of the gutter! Ensure all visual gaps between your widgets are consistent, adapted to the axis direction, and respond to screen size.

size_helper
Dart 3 compatible ๐Ÿ‘ 51
Maintenance Status: Good

SizeHelper is a Flutter package for developing a responsive UI, with more control on UI components based on the current screen-size.

screentasia
Dart 3 compatible ๐Ÿ‘ 48
Maintenance Status: Good

A Flutter package that helps you create beautifully adaptive designs for all screens with a wealth of features.

scaled_app Card Image
scaled_app
Dart 3 compatible ๐Ÿ‘ 48
Maintenance Status: Good

Scale the entire UI design proportionally, useful when your UI design is fixed-width.

pixel_snap Card Image
pixel_snap
Dart 3 compatible ๐Ÿ‘ 48
Maintenance Status: Good

Sharp looking Flutter applications at any pixel scaling factor.

the_responsive_builder
Dart 3 compatible ๐Ÿ‘ 14
Maintenance Status: Good

This flutter package provides a set of utilities to aid in building responsive Flutter applications.

flexiflow
Dart 3 compatible ๐Ÿ‘ 6
Maintenance Status: Good

A responsive and flexible solution designed to effortlessly adapt to your needs, providing a seamless and dev-friendly experience.

notebook_paper
Dart 3 compatible ๐Ÿ‘ 4
Maintenance Status: Good

Craft beautiful notebook-like interfaces in Flutter with ease using Notebook Paper, a customizable widget package.

bootjack
Dart 3 compatible ๐Ÿ‘ 0
Maintenance Status: Good

Bootjack is a porting of Twitter Bootstrap 3.0.x in Dart.

layout
Dart 3 compatible ๐Ÿ‘ 343
Maintenance Status: Average

Layout encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.

responsive_grid Card Image
responsive_grid
Dart 3 compatible ๐Ÿ‘ 248
Maintenance Status: Average

Responsive Grid Layout and List for Flutter

sized_context
Dart 3 compatible ๐Ÿ‘ 193
Maintenance Status: Average

Access MediaQuery sizing info directly on the context, also adds some helper methods for sizing and layout.

wolt_responsive_layout_grid Card Image
wolt_responsive_layout_grid
Dart 3 compatible ๐Ÿ‘ 110
Maintenance Status: Average

Wolt Responsive Layout Grid library helps you to create dynamic, adaptive grid layouts that seamlessly adjust to various screen sizes.

responsive_ui Card Image
responsive_ui
Dart 3 compatible ๐Ÿ‘ 101
Maintenance Status: Average

responsive ui Flutter package helps you to create a responsive and Nested responsive widget. Works on android, iOs, Web with both portrait and landscape mode.

fluid_kit Card Image
fluid_kit
Dart 3 compatible ๐Ÿ‘ 86
Maintenance Status: Average

Responsive helper for fluid layout. Allows you to control the layout of children based on minimum width and grid.

auto_orientation
Dart 3 compatible ๐Ÿ‘ 84
Maintenance Status: Average

Set the device orientation programmatically for iOS and Android

simple_grid Card Image
simple_grid
Dart 3 compatible ๐Ÿ‘ 67
Maintenance Status: Average

A dynamic grid inspired by boostrap, you can use it to describe your grid layout. This package purely using mediaquery, don't worry about the render.

bamboo
Dart 3 compatible ๐Ÿ‘ 61
Maintenance Status: Average

Utilities that make it easy and fast to build adaptive apps for mobile, web, and beyond with Flutter.

material3_layout Card Image
material3_layout
Dart 3 compatible ๐Ÿ‘ 38
Maintenance Status: Average

This package helps to create adaptive applications following the Material Design 3 guidelines.

responsive_spacing
Dart 3 compatible ๐Ÿ‘ 27
Maintenance Status: Average

Make your app responsive & adaptive with dynamic spacing, margins, paddings, gutters, body-size & columns.

dynamicutils
Dart 3 compatible ๐Ÿ‘ 16
Maintenance Status: Average

Flutter Package For Create A Responsive Design From Figma,XD Etc.....

m_sizer
Dart 3 compatible ๐Ÿ‘ 4
Maintenance Status: Average

A flutter plugin for Easily makeย Flutterย appsย responsive. Automatically adaptย UIย to different screen sizes.ย Responsivenessย made simple.

flutter_bootstrap
Dart 3 compatible ๐Ÿ‘ 179
Maintenance Status: Poor

A partial implementation of Bootstrap Grid system in Flutter for Responsive Layout.

flutter_adaptive_ui
Dart 3 compatible ๐Ÿ‘ 151
Maintenance Status: Poor

A library that helps implement adaptive UI (based on OS , Screen size , ...) .

breakpoint
Dart 3 compatible ๐Ÿ‘ 99
Maintenance Status: Poor

A Flutter plugin to calculate the material design breakpoints.

responsive
Dart 3 compatible ๐Ÿ‘ 65
Maintenance Status: Poor

Provide a easy way to make responsive UI for Flutter Applications in mobile, desktop and web, allow different widget size for each screen size and device orientation.

relative_scale
Dart 3 compatible ๐Ÿ‘ 64
Maintenance Status: Poor

RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices.

responsive_util
Dart 3 compatible ๐Ÿ‘ 51
Maintenance Status: Poor

A Flutter widget that allows drag resizing of its child's bounds to easily test responsive design.

easy_dashboard
Dart 3 compatible ๐Ÿ‘ 46
Maintenance Status: Poor

A package to help easily create dashboard layouts and other navigation features . Aims in making responsive dashboards an easy process .

resize
Dart 3 compatible ๐Ÿ‘ 40
Maintenance Status: Poor

A Simple Responsive Design Approach for your Flutter Apps. Includes all the necessary things to design a responsive User Interface for your Apps.

flutter_split_view
Dart 3 compatible ๐Ÿ‘ 30
Maintenance Status: Poor

Flutter widget that automatically splits the screen into two views based on available space. This is based on Navigator 2.0.

bootstrap_flutter
Dart 3 compatible ๐Ÿ‘ 30
Maintenance Status: Poor

Aplicaรงรฃo de responsividade do bootstrap para facilitar a criaรงรฃo de multiplos tamanhos de telas em seus projetos

flutter_screen_scaler
Dart 3 compatible ๐Ÿ‘ 27
Maintenance Status: Poor

A package to resize your widgets according to the screen size with the use of percentages.

flutter_responsive
Dart 3 compatible ๐Ÿ‘ 27
Maintenance Status: Poor

Responsive layout widgets for Flutter. This plugin was inspired on Bootstrap web project.

response
Dart 3 compatible ๐Ÿ‘ 26
Maintenance Status: Poor

Flutter plugin helps to maintain a clean looking widgets size in all available displays in which the app will be.

argo
Dart 3 compatible ๐Ÿ‘ 24
Maintenance Status: Poor

Widgets and tools for make it easy to create responsive apps. Widget to handle visibility, orientation, handle diferent layout depend of screen and can handle a responsive theme.

responsive_scaffold_nullsafe
Dart 3 compatible ๐Ÿ‘ 23
Maintenance Status: Poor

On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item.

responsive_layout_builder
Dart 3 compatible ๐Ÿ‘ 23
Maintenance Status: Poor

Flutter package for building responsive layout based on screen sizes and orientation. It could be wristwatch, small/medium/large mobile, small/large tablet or desktop.

adaptive_screen_flutter
Dart 3 compatible ๐Ÿ‘ 23
Maintenance Status: Poor

Make the layout become adaptive for mobile, tablet and web screen.

master_detail_scaffold
Dart 3 compatible ๐Ÿ‘ 21
Maintenance Status: Poor

A package for implementing a responsive master-detail scaffold widget

spaces
Dart 3 compatible ๐Ÿ‘ 18
Maintenance Status: Poor

Defining global spacing constants for building consistent and responsive apps.

responsive_widgets
๐Ÿ‘ 64
Maintenance Status: Poor

This plugin helps to create responsive widgets, that makes an auto-size with the proportion between reference ScreenSize and the screen that the app is running.

bs_flutter
๐Ÿ‘ 36
Maintenance Status: Poor

Simple flutter widget from Bootstrap v5 component, including responsive grid layout based on bootstrap grid system

mobile_sidebar
๐Ÿ‘ 31
Maintenance Status: Poor

A Responsive Sidebar for Flutter that follows Material Design

responsive_x
๐Ÿ‘ 14
Maintenance Status: Poor

A simple Flutter package to handle responsiveness using extensions

responsive_image
๐Ÿ‘ 14
Maintenance Status: Poor

A flutter library that add responsive capabilities to images

flutter_autosize_screen
๐Ÿ‘ 11
Maintenance Status: Poor

A low-cost Flutter screen adaptation solution