Build Responsive UI with Flutter
Last Updated :
21 Sep, 2021
In this article, we'll go over the different widgets using which we can build responsive applications with Flutter.
1. The LayoutBuilder:
Builds a widget tree that can depend on the parent widget's size. This is useful if we want to change or hide something depending on the parent size.
Dart
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// constraints provide us with maxWidth,maxHeight etc, using
// which we can show different widgets accordingly
if (constraints.maxWidth > 600) {
// as the width is greater than 600px,
// we'll show wide screen container
return _buildWideScreenContainers();
} else {
return _buildPortraitContainer();
}
},
),
Let's see that in an actual User Interface.
Dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:
AppBar(title: Text("Geeks for Geeks"), backgroundColor: Colors.green),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// constraints provide us with maxWidth,maxHeight etc, using
// which we can show different widgets accordingly
if (constraints.maxWidth > 600) {
// as the width is greater than 600px, we'll show wide screen container
// with two containers in a row
return _buildWideScreenContainers();
} else {
return _buildPortraitContainer();
}
},
),
);
}
Widget _buildPortraitContainer() {
// here we're returning a single container since the phone
// doesn't has the required width (600px)
return Center(
child: Container(
height: 100.0,
width: 100.0,
color: Colors.red,
),
);
}
Widget _buildWideScreenContainers() {
// here we're returning double containers since the phone
// has the required width (600px)
return Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 100.0,
width: 100.0,
color: Colors.red,
),
Container(
height: 100.0,
width: 100.0,
color: Colors.yellow,
),
],
),
);
}
}
When we run the code written above, this is what we get.
Â
Notice how we see a single box when in portrait mode and double boxes when we rotate the phone.
2. MediaQuery
MediaQuery also lets us have the constraints. MediaQuery will not take constraints from the parent widget though, but instead, take it from the whole layout. Let's see an example using MediaQuery(), where we hide the AppBar() depending on the screen width.
Dart
class MediaQueryExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
final screenW = MediaQuery.of(context).size.width;
print(screenW);
return Scaffold(
// when screen's width is less than 600px,
// it shows a appbar, when it's over 600px,
// it hides it.
appBar: screenW <= 600
? AppBar(
title: Text("Geeks for Geeks"), backgroundColor: Colors.green)
: null,
body: Center(
child: Text("Mediaquery example"),
),
);
}
}
Using MediaQuery(), we can have the screen size, aspect ratio, and other useful data.
final query = MediaQuery.of(context); // provide us with the query
print(query.size.aspectRatio); //aspect ratio
print(query.size.height);//screen height
print(query.size.width);//screen width3. BreakPoints
The BreakPoint can also be used for developing responsive UIs in flutter apps.
const kTabletBreakpoint = 768.0; //breakpoint for a tablet (a tablet's width is 768 px)
const kDesktopBreakPoint = 1440.0; //breakpoint for desktop (a desktop screen's width is 1440 px)
const kSideMenuWidth = 300.0; // for sidemenu
const kNavigationRailWidth = 72.0; // for navigation rail
const kMaxWidth = 1180.0; // maximum width
We can use the breakpoints written above to display different UI for different devices. For Example,
Dart
class ResponsiveWidget extends StatelessWidget {
const ResponsiveWidget({
Key? key,
required this.mobileBody,
this.tabletBody,
this.desktopBody,
}) : super(key: key);
final Widget mobileBody;
final Widget? tabletBody;
final Widget? desktopBody;
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, dimens) {
// check if the device is a phone
if (dimens.maxWidth < kTabletBreakpoint) {
return mobileBody;
} else if (dimens.maxWidth >= kTabletBreakpoint && dimens.maxWidth < kDesktopBreakPoint)
{
// returns mobileBody if tabletBody is null
return tabletBody ?? mobileBody;
} else {
// returns mobileBody if desktopBody is null
return desktopBody ?? mobileBody;
}
},
);
}
}
Output:Â
 Shows and hides the AppBar depending on the screen's width using MedaQuery().
Shows and hides the AppBar depending on the parent's width using LayoutBuilder().
For more information on handling different UI for different devices, kindly read this article. That's it. This is all we need in order to get started on building responsive apps with flutter.
Similar Reads
How to Build a Simple Login App with Flutter?
To prevent unauthorized access to personal information, it is a good practice to authenticate users before granting access to websites, mobile applications, and computer applications after they can register and then log in. In this article, we are going to explain how to build a Design Login page us
8 min read
Listview.builder in Flutter
ListView is a very important widget in a flutter. It is used to create the list of children But when we want to create a list recursively without writing code again and again then ListView.builder is used instead of ListView. Â ListView.builder creates a scrollable, linear array of widgets. ListView.
3 min read
Flutter - Slider with Gradient
In this article, we will create a slide to confirm the button using the widget in Flutter. A sample video is given below to get an idea about what we are going to do in this article. Step By Step Implementation Step 1: Create a New Project in Android Studio To set up Flutter Development on Android S
3 min read
Top 15 Apps Built with Flutter Framework
Flutter, Google’s open-source UI toolkit has gained tremendous popularity in the mobile application development world. Flutter allows developers to develop mobile apps - Android and iOS, desktop applications, and Web applications using a single codebase. Flutter is very well known for its features l
9 min read
Building a Simple Tic Tac Toe Game in Flutter
Tic Tac Toe is a two-player game that anybody of any age can play and understand are rules in a matter of minutes. In this tutorial, we are going to show you how to create a simple Tic Tac Toe game in Flutter step by step. I tried my best to make this guide easy to understand and preferably for new
11 min read
Flutter - Project Setup with GetX CLI Tool
In this article, we will learn how to set up or file structure our Flutter project using get_cli. You might be aware of the GetX state management. If not, let us explain to you all the things so that you are familiar with these terms. State Management is to manage the things between 2 or more screen
3 min read
How to Build Advance Quiz App in Flutter?
This is a quiz app using Flutter and API. The working of this application is very simple, Â here we have two screens: screen one and screen two. Screen one is the stateless screen which means that it will not respond to any change on the screen. The second screen, is a stateful widget which means tha
9 min read
Flutter - Build a Form
The Form widget in Flutter is a fundamental widget for building forms. It provides a way to group multiple form fields, perform validation on those fields, and manage their state. In this article, we are going to implement the Form widget and explore some properties and Methods of it. A sample video
7 min read
Flutter - Send Data to Screen
Interaction with the UI is an integral part of any application. But more often than not, the information needs to be sent from one screen to another. For instance, say you need to pass data regarding a selected or tapped component of the UI to another route(i.e., page). In this article, we will expl
4 min read
Flutter - Build Hotel Search App
The world of mobile applications has seen a tremendous surge in the travel and tourism sector. In this tutorial, we will explore how to develop a hotel search app using Flutter, a powerful cross-platform framework. Flutter provides a rich set of tools and widgets for crafting engaging and performant
8 min read