Flutter allows developers to build applications from a single codebase that can run across mobile, tablet, desktop, and web environments. However, the same UI should not always be displayed in exactly the same way on every screen. A good Flutter application adapts its layout, navigation, spacing, content density, and interaction patterns according to the space available to it.
Flutter's official adaptive-design guidance explains that responsive design focuses on fitting UI into available space, while adaptive design focuses on making the UI usable in that space. In practice, mobile, tablet, and desktop applications commonly use both approaches together. Flutter Adaptive and Responsive Design Documentation
A Flutter application may run in very different environments:
The goal is not simply to create three completely separate applications. Instead, share common data, business logic, and reusable widgets while changing the presentation where necessary.
A mobile screen has limited width, so content is generally arranged vertically. A tablet can display more content side-by-side. A desktop window may provide enough space for a sidebar, navigation rail, content area, tables, filters, and additional actions.
Mobile:
+----------------------+
| App Bar |
+----------------------+
| |
| Content |
| |
| |
+----------------------+
| Home | Search | Me |
+----------------------+
Tablet:
+--------------------------------+
| App Bar |
+--------------------------------+
| Navigation | Main Content |
| | |
| | |
+--------------------------------+
Desktop:
+------------------------------------------------+
| Sidebar | Main Content | Details |
| | | |
| | | |
| | | |
+------------------------------------------------+
Mobile interfaces generally have limited horizontal space and are primarily touch-driven. Therefore, mobile UI should prioritize simple navigation, readable content, large touch targets, and vertical scrolling.
AppBarNavigationBarDrawerListViewGridViewBottomSheetFloatingActionButtonSafeAreaSingleChildScrollViewScaffold(
appBar: AppBar(
title: const Text('My App'),
),
body: ListView(
padding: const EdgeInsets.all(16),
children: const [
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
),
ListTile(
leading: Icon(Icons.person),
title: Text('Profile'),
),
],
),
bottomNavigationBar: NavigationBar(
selectedIndex: 0,
destinations: [
NavigationDestination(
icon: Icon(Icons.home),
label: 'Home',
),
NavigationDestination(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
)NavigationBar is a Material 3 component designed for persistent navigation between primary destinations. Flutter NavigationBar API
Tablets provide significantly more horizontal space than phones. Instead of simply enlarging the mobile layout, developers can use the additional space to show more information simultaneously.
Row(
children: [
SizedBox(
width: 250,
child: ListView(
children: const [
ListTile(title: Text('Dashboard')),
ListTile(title: Text('Products')),
ListTile(title: Text('Orders')),
],
),
),
const VerticalDivider(width: 1),
const Expanded(
child: Center(
child: Text('Main Content'),
),
),
],
)Desktop applications have large horizontal and vertical space and commonly support mouse, keyboard, trackpad, hover interactions, keyboard shortcuts, context menus, and resizable windows.
Row(
children: [
SizedBox(
width: 240,
child: Sidebar(),
),
const VerticalDivider(width: 1),
Expanded(
child: MainContent(),
),
],
)Flutter's adaptive guidance recommends designing for the strengths of each form factor rather than simply making every platform look identical. Flutter Adaptive Design Best Practices
| Feature | Mobile | Tablet | Desktop |
|---|---|---|---|
| Screen Space | Limited | Medium/Large | Large |
| Primary Input | Touch | Touch + Keyboard | Mouse + Keyboard + Trackpad |
| Navigation | NavigationBar/Drawer | NavigationRail/NavigationBar | Sidebar/Rail |
| Content | Mostly single-column | Multi-column | Multi-column |
| Forms | Stacked | Partially horizontal | Multi-column where appropriate |
| Tables | Often replaced by cards/lists | Condensed tables | Full tables |
| Dialogs | Compact | Medium | Constrained desktop dialog |
| Interaction | Touch-first | Touch + pointer | Pointer + keyboard |
Responsive design changes the placement and sizing of UI elements so they fit the available space. Adaptive design can change the actual structure of the interface.
Row(
children: [
Expanded(child: Card()),
Expanded(child: Card()),
],
)if (isSmallScreen) {
return const MobileLayout();
}
return const DesktopLayout();
Flutter recommends measuring the current available window or widget constraints instead of assuming that a physical device type always corresponds to a particular amount of application space. Flutter General Approach to Adaptive Apps
Breakpoints determine when your UI changes its structure. A commonly used example is:
const mobileBreakpoint = 600.0;
const tabletBreakpoint = 900.0;Example:
These numbers are examples rather than universal device classifications. Flutter's adaptive documentation uses 600 logical pixels as a common example for switching between small and larger layouts, but breakpoints should ultimately be chosen according to the needs of the UI. Flutter Adaptive Layout Tutorial
MediaQuery.sizeOf(context) is useful when you need to know the size of the application's current window.
final size = MediaQuery.sizeOf(context);
if (size.width < 600) {
return const MobileLayout();
}
return const LargeLayout();
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
final width = MediaQuery.sizeOf(context).width;
if (width < 600) {
return const MobileLayout();
}
if (width < 900) {
return const TabletLayout();
}
return const DesktopLayout();
}
}
LayoutBuilder is useful when the decision should be based on the space available to a particular widget rather than the entire application window.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const MobileLayout();
}
if (constraints.maxWidth < 900) {
return const TabletLayout();
}
return const DesktopLayout();
},
)
The builder receives a BoxConstraints object containing the minimum and maximum width and height available from the parent. MediaQuery and LayoutBuilder Guidance
| MediaQuery | LayoutBuilder |
|---|---|
| Measures the application window. | Measures the constraints provided by the parent. |
| Useful for full-screen adaptive decisions. | Useful for local widget adaptation. |
| Returns window size information. | Provides BoxConstraints. |
| Good for application navigation. | Good for adaptive cards/components. |
Navigation is one of the most visible differences between mobile, tablet, and desktop UI.
NavigationBar(
selectedIndex: 0,
destinations: const [
NavigationDestination(
icon: Icon(Icons.home),
label: 'Home',
),
NavigationDestination(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
)NavigationRail(
selectedIndex: 0,
destinations: const [
NavigationRailDestination(
icon: Icon(Icons.home),
label: Text('Home'),
),
NavigationRailDestination(
icon: Icon(Icons.settings),
label: Text('Settings'),
),
],
)NavigationRail is intended for wider layouts such as desktop or tablet landscape layouts, while a bottom navigation pattern is generally better suited to smaller layouts. Flutter NavigationRail API
class AdaptiveNavigation extends StatelessWidget {
const AdaptiveNavigation({super.key});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
final isLarge = constraints.maxWidth >= 600;
if (isLarge) {
return Scaffold(
body: Row(
children: [
NavigationRail(
selectedIndex: 0,
destinations: const [
NavigationRailDestination(
icon: Icon(Icons.home),
label: Text('Home'),
),
NavigationRailDestination(
icon: Icon(Icons.person),
label: Text('Profile'),
),
],
),
const Expanded(
child: MainContent(),
),
],
),
);
}
return Scaffold(
body: const MainContent(),
bottomNavigationBar: NavigationBar(
selectedIndex: 0,
destinations: const [
NavigationDestination(
icon: Icon(Icons.home),
label: 'Home',
),
NavigationDestination(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
);
},
);
}
}
Mobile applications commonly display information as vertically scrolling lists.
ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: products.length,
itemBuilder: (context, index) {
final product = products[index];
return Card(
margin: const EdgeInsets.only(bottom: 12),
child: ListTile(
leading: const Icon(Icons.shopping_bag),
title: Text(product.name),
subtitle: Text(product.price),
trailing: const Icon(Icons.chevron_right),
),
);
},
)
On larger screens, a list can often become a grid so that the additional horizontal space is used effectively.
GridView.builder(
padding: const EdgeInsets.all(24),
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 280,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
childAspectRatio: 0.8,
),
itemCount: products.length,
itemBuilder: (context, index) {
return ProductCard(
product: products[index],
);
},
)Flutter's large-screen guidance recommends grid-based approaches for avoiding overly wide content and suggests basing grid sizing on available window space rather than hard-coding a device-specific number of columns. Flutter Large Screen Guidance
LayoutBuilder(
builder: (context, constraints) {
return GridView.builder(
padding: const EdgeInsets.all(20),
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: constraints.maxWidth < 600
? 500
: 280,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
childAspectRatio: 0.8,
),
itemCount: products.length,
itemBuilder: (context, index) {
return ProductCard(
product: products[index],
);
},
);
},
)Forms on mobile are generally arranged vertically because horizontal space is limited.
Column(
children: [
TextField(
decoration: const InputDecoration(
labelText: 'First Name',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 16),
TextField(
decoration: const InputDecoration(
labelText: 'Last Name',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 16),
TextField(
decoration: const InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
),
),
],
)On wider screens, related fields can be placed side-by-side.
Row(
children: [
Expanded(
child: TextField(
decoration: const InputDecoration(
labelText: 'First Name',
border: OutlineInputBorder(),
),
),
),
const SizedBox(width: 16),
Expanded(
child: TextField(
decoration: const InputDecoration(
labelText: 'Last Name',
border: OutlineInputBorder(),
),
),
),
],
)LayoutBuilder(
builder: (context, constraints) {
final isWide = constraints.maxWidth >= 700;
if (isWide) {
return Row(
children: [
Expanded(child: FirstNameField()),
const SizedBox(width: 16),
Expanded(child: LastNameField()),
],
);
}
return Column(
children: [
FirstNameField(),
const SizedBox(height: 16),
LastNameField(),
],
);
},
)
class AdaptiveLogin extends StatelessWidget {
const AdaptiveLogin({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 450,
),
child: Column(
children: [
const FlutterLogo(size: 90),
const SizedBox(height: 24),
const Text(
'Welcome Back',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 24),
TextField(
decoration: const InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 16),
TextField(
obscureText: true,
decoration: const InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text('Login'),
),
),
],
),
),
),
),
),
);
}
}
A list-detail layout is especially useful on tablets and desktops.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth >= 700) {
return Row(
children: [
SizedBox(
width: 300,
child: ContactList(),
),
const VerticalDivider(width: 1),
const Expanded(
child: ContactDetails(),
),
],
);
}
return ContactList();
},
)
Flutter's adaptive tutorial uses this type of layout: large screens can show groups and details side-by-side, while smaller screens can navigate between them. Flutter List-Detail Adaptive Layout Tutorial
Row(
children: [
SizedBox(
width: 250,
child: Container(
padding: const EdgeInsets.all(16),
child: Column(
children: [
const Text(
'My App',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
ListTile(
leading: const Icon(Icons.dashboard),
title: const Text('Dashboard'),
onTap: () {},
),
ListTile(
leading: const Icon(Icons.people),
title: const Text('Users'),
onTap: () {},
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text('Settings'),
onTap: () {},
),
],
),
),
),
const VerticalDivider(width: 1),
const Expanded(
child: MainContent(),
),
],
)Large monitors provide a lot of horizontal space, but that does not mean every widget should stretch across the entire window.
Use a maximum width for forms, articles, dialogs, and other content where excessive width would reduce readability.
Center(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 1000,
),
child: Padding(
padding: const EdgeInsets.all(32),
child: MainContent(),
),
),
)Row(
children: [
SizedBox(
width: 250,
child: Sidebar(),
),
Expanded(
child: MainContent(),
),
],
)Row(
children: [
Flexible(
child: Text(
'A long piece of text that can shrink when space is limited.',
),
),
const Icon(Icons.info),
],
)These widgets help prevent unnecessary fixed dimensions and allow layouts to use available space more effectively.
SafeArea helps keep important content away from areas affected by system UI and display cutouts.
Scaffold(
body: SafeArea(
child: YourResponsiveContent(),
),
)This is especially useful on mobile devices where status bars, navigation areas, display cutouts, and rounded corners can affect usable space.
Applications should be prepared for changes in available width and height. A mobile application may change from portrait to landscape, and desktop or tablet applications may be resized continuously.
LayoutBuilder(
builder: (context, constraints) {
final isWide = constraints.maxWidth > constraints.maxHeight;
return isWide
? const WideLayout()
: const NarrowLayout();
},
)
Width-based layout decisions are often preferable to relying only on orientation. Flutter's best-practice guidance also recommends avoiding unnecessary orientation locks. Flutter Adaptive Best Practices
Desktop applications should not depend exclusively on touch interaction. Users may expect mouse hover, keyboard navigation, shortcuts, scrolling, and pointer interactions.
Tooltip(
message: 'Open settings',
child: IconButton(
onPressed: () {},
icon: const Icon(Icons.settings),
),
)Shortcuts(
shortcuts: const {
SingleActivator(
LogicalKeyboardKey.control,
key: LogicalKeyboardKey.keyS,
): SaveIntent(),
},
child: Actions(
actions: {
SaveIntent: CallbackAction<SaveIntent>(
onInvoke: (intent) {
// Save data.
return null;
},
),
},
child: const Focus(
autofocus: true,
child: Text('Press Ctrl+S to save'),
),
),
)Flutter's adaptive guidance recommends supporting different input devices, including mouse, trackpad, and keyboard interaction, particularly on larger devices. Input and Adaptive UI Best Practices
Although Flutter allows code sharing across platforms, platform conventions can still matter.
Flutter's platform-idiom guidance recommends considering the conventions users expect on each platform while still maintaining a consistent application identity. Flutter Platform Idioms
class DashboardPage extends StatelessWidget {
const DashboardPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Dashboard'),
),
body: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return const MobileDashboard();
}
if (constraints.maxWidth < 1000) {
return const TabletDashboard();
}
return const DesktopDashboard();
},
),
);
}
}
class MobileDashboard extends StatelessWidget {
const MobileDashboard({super.key});
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(16),
children: const [
DashboardCard(title: 'Users', value: '12,450'),
DashboardCard(title: 'Orders', value: '3,240'),
DashboardCard(title: 'Revenue', value: '₹8,45,000'),
],
);
}
}
class TabletDashboard extends StatelessWidget {
const TabletDashboard({super.key});
@override
Widget build(BuildContext context) {
return GridView.count(
padding: const EdgeInsets.all(24),
crossAxisCount: 2,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
children: const [
DashboardCard(title: 'Users', value: '12,450'),
DashboardCard(title: 'Orders', value: '3,240'),
DashboardCard(title: 'Revenue', value: '₹8,45,000'),
DashboardCard(title: 'Pending', value: '128'),
],
);
}
}
class DesktopDashboard extends StatelessWidget {
const DesktopDashboard({super.key});
@override
Widget build(BuildContext context) {
return Row(
children: [
const SizedBox(
width: 240,
child: Center(
child: Text('Sidebar'),
),
),
Expanded(
child: GridView.count(
padding: const EdgeInsets.all(32),
crossAxisCount: 4,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
children: const [
DashboardCard(title: 'Users', value: '12,450'),
DashboardCard(title: 'Orders', value: '3,240'),
DashboardCard(title: 'Revenue', value: '₹8,45,000'),
DashboardCard(title: 'Pending', value: '128'),
],
),
),
],
);
}
}
class DashboardCard extends StatelessWidget {
final String title;
final String value;
const DashboardCard({
super.key,
required this.title,
required this.value,
});
@override
Widget build(BuildContext context) {
return Card(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(title),
const SizedBox(height: 8),
Text(
value,
style: const TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
}
}
When many screens require the same mobile, tablet, and desktop breakpoints, a reusable widget can make the code cleaner.
class ResponsiveLayout extends StatelessWidget {
final Widget mobile;
final Widget tablet;
final Widget desktop;
const ResponsiveLayout({
super.key,
required this.mobile,
required this.tablet,
required this.desktop,
});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return mobile;
}
if (constraints.maxWidth < 1000) {
return tablet;
}
return desktop;
},
);
}
}
ResponsiveLayout(
mobile: const MobileHomePage(),
tablet: const TabletHomePage(),
desktop: const DesktopHomePage(),
)Adaptive applications should generally share the same data and business logic while changing the presentation.
class Product {
final String name;
final double price;
final String category;
const Product({
required this.name,
required this.price,
required this.category,
});
}
const products = [
Product(
name: 'Laptop',
price: 75000,
category: 'Electronics',
),
Product(
name: 'Phone',
price: 45000,
category: 'Electronics',
),
];
The same products data can be displayed using a mobile ListView, tablet GridView, or desktop multi-column layout.
lib/
├── main.dart
├── models/
│ └── product.dart
├── services/
│ └── product_service.dart
├── widgets/
│ ├── product_card.dart
│ ├── responsive_layout.dart
│ └── app_navigation.dart
├── screens/
│ ├── mobile/
│ │ └── mobile_home.dart
│ ├── tablet/
│ │ └── tablet_home.dart
│ └── desktop/
│ └── desktop_home.dart
└── theme/
└── app_theme.dartThis type of structure is optional. For many applications, it is preferable to keep shared widgets and data together and only separate the parts whose presentation truly differs.
A common beginner mistake is creating three completely independent applications:
MobileApp()
TabletApp()
DesktopApp()This can create unnecessary duplication.
A better approach is:
Shared Data
|
+---- Shared Business Logic
|
+---- Shared Components
|
+---- Mobile Presentation
+---- Tablet Presentation
+---- Desktop PresentationFlutter's adaptive guidance recommends abstracting shared data and breaking complex widgets into smaller reusable components. Flutter Adaptive Architecture Guidance
if (isTablet) {
return TabletLayout();
}Physical device type does not always tell you how much space your application currently has. A tablet can run an app in a narrow multi-window configuration, and a desktop browser can be resized to a small window.
Container(
width: 1200,
child: Content(),
)This can cause overflow on smaller windows.
Large screens do not mean every text field, paragraph, or card should stretch across the entire window.
Too many layout branches can make an application difficult to maintain. Use breakpoints where the structure actually needs to change.
A desktop interface should not depend exclusively on touch gestures.
Applications should be tested when the available window changes.
MediaQuery.sizeOf for application-window decisions.LayoutBuilder for local widget constraints.Expanded and Flexible.GridView for appropriate large-screen content.ConstrainedBox to limit excessive desktop widths.SafeArea for content that needs protection from system UI.Flutter Web is particularly useful for testing adaptive layouts because the browser window can be resized continuously.
flutter run -d chromeAfter launching the application, resize the browser from a narrow width to a large desktop width and observe how the UI changes.
Flutter's adaptive tutorial specifically demonstrates resizing a browser window to observe adaptive layout changes. Flutter Adaptive Layout Tutorial
Build a dashboard containing:
AppBar
|
Stats Cards
|
Search
|
Product List
|
Recent Orders
|
NavigationBarNavigationRail | Dashboard
|
+-- Stats Cards
+-- Product Grid
+-- OrdersSidebar | Dashboard Header
|
+-- Statistics
|
+-- Charts | Recent Orders
|
+-- Product Grid
|
+-- Detailed Tableclass MyAdaptiveApp extends StatelessWidget {
const MyAdaptiveApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Adaptive Flutter App',
home: const AdaptiveHome(),
);
}
}
class AdaptiveHome extends StatelessWidget {
const AdaptiveHome({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: LayoutBuilder(
builder: (context, constraints) {
final width = constraints.maxWidth;
if (width < 600) {
return const MobileHome();
}
if (width < 1000) {
return const TabletHome();
}
return const DesktopHome();
},
),
),
);
}
}
class MobileHome extends StatelessWidget {
const MobileHome({super.key});
@override
Widget build(BuildContext context) {
return const Center(
child: Text('Mobile UI'),
);
}
}
class TabletHome extends StatelessWidget {
const TabletHome({super.key});
@override
Widget build(BuildContext context) {
return const Center(
child: Text('Tablet UI'),
);
}
}
class DesktopHome extends StatelessWidget {
const DesktopHome({super.key});
@override
Widget build(BuildContext context) {
return const Center(
child: Text('Desktop UI'),
);
}
}
| Concept | Purpose |
|---|---|
| Mobile UI | Optimized for limited space and touch interaction. |
| Tablet UI | Uses additional space for multi-column and split layouts. |
| Desktop UI | Uses larger windows and pointer/keyboard interactions. |
| Responsive Design | Fits UI into available space. |
| Adaptive Design | Changes UI structure to remain usable in available space. |
| MediaQuery | Measures application-window information. |
| LayoutBuilder | Provides parent constraints for local layout decisions. |
| NavigationBar | Useful for navigation in smaller layouts. |
| NavigationRail | Useful for wider layouts. |
| GridView | Displays content in multiple columns. |
| Expanded | Uses available remaining space. |
| Flexible | Allows a child to flex within available space. |
| ConstrainedBox | Limits maximum or minimum dimensions. |
| SafeArea | Protects content from system UI and display cutouts. |
NavigationBar on mobile and NavigationRail on larger layouts.MediaQuery.sizeOf is useful for application-window-level decisions.LayoutBuilder is useful for widget-level layout decisions.For structured Flutter training and practical application development, visit the JustAcademy Flutter Training Course.
You can also register for a Flutter course demo through the JustAcademy Course Demo Registration page.
Building Mobile, Tablet and Desktop UI in Flutter requires more than simply increasing or decreasing widget sizes. A professional Flutter application should adapt its navigation, content arrangement, grids, forms, dashboards, spacing, and interaction patterns according to the available space and platform context. Use MediaQuery and LayoutBuilder to measure space, establish meaningful breakpoints, and combine flexible widgets such as Expanded, Flexible, GridView, Wrap, ConstrainedBox, and SafeArea. By sharing data and business logic while adapting presentation where appropriate, you can build one maintainable Flutter application that provides a usable experience across mobile, tablet, and desktop environments.
