Introduction
There are numerous devices having different screens and shapes that make the modern days’ world on smartphones and tablets a very diverse mobile landscape.
Flutter offers a number of solutions that aid in developer productivity so as to deliver an interactive experience to the end user who can view it on any device and still enjoy it.
In this lesson, we will show you how to create a responsive Flutter app with working code.
Your app should have a responsive design which means its layout and elements are dynamic according to the available screen size and orientation of the given device. In return, this gives users a better time to operate with devices of our choice without being restricted.
Techniques for making Flutter apps Responsive.
MediaQuery: It provides the information about the current screen size and its orientation.
Using this information you can adapt your layout based on specific breakpoints or dynamically adjust widget sizes accordingly.
LayoutBuilder: It rebuilds its child based on the available space. It’s useful for creating layouts that adapt to varying screen sizes without any conditions.
Let’s understand MediaQuery with an example
import 'package:flutter/material.dart';
class MediaQueryExample extends StatelessWidget {
const MediaQueryExample({super.key});
@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
final deviceWidth = mediaQuery.size.width;
final deviceHeight = mediaQuery.size.height;
return Scaffold(
appBar: AppBar(
title: const Text('MediaQuery Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Device Width: $deviceWidth',
style:
TextStyle(fontSize: deviceWidth * 0.05), // 5% of device width
),
const SizedBox(height: 20),
Text(
'Device Height: $deviceHeight',
style:
TextStyle(fontSize: deviceHeight * 0.05), // 5% of device height
),
const SizedBox(height: 20),
Text(
'Device Orientation: ${mediaQuery.orientation}',
style:
TextStyle(fontSize: deviceWidth * 0.05), // 5% of device width
),
],
),
),
);
}
}
In the above example, Font size of the text is set to be 5% of the device width. Which means the font size will increase for larger screens and decrease for smaller screens, making the UI more responsive.
MediaQuery.of(context): It gets the MediaQueryData for the current context and includes data like screen size and device orientation.
final deviceWidth = mediaQuery.size.width;: Here we are getting the width of the device screen.
final deviceHeight = mediaQuery.size.height;: Here we are getting the height of the device screen.
Let’s understand LayoutBuilder with an example
import 'package:flutter/material.dart';
class ResponsiveLayoutExample extends StatelessWidget {
const ResponsiveLayoutExample({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Responsive Layout Example'),
),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 600) {
// Wide layout
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
buildCard('Card 1', Colors.red),
const SizedBox(width: 20),
buildCard('Card 2', Colors.blue),
],
);
} else {
// Narrow layout
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
buildCard('Card 1', Colors.red),
const SizedBox(height: 20),
buildCard('Card 2', Colors.blue),
],
);
}
},
),
);
}
Card buildCard(String title, Color color) {
return Card(
color: color,
child: Container(
width: 200,
height: 200,
padding: const EdgeInsets.all(16),
child: Center(
child: Text(
title,
style: const TextStyle(fontSize: 24, color: Colors.white),
),
),
),
);
}
}
LayoutBuilder widget is used to obtain the parent widget’s constraints, which include the maximum width and height that the parent widget can provide to its children.
This example adapts the layout based on the screen width. If the screen width is greater than 600, it displays two cards side by side(card 1 and card 2).
If not, it displays the cards vertically and makes the layout scrollable.
Otherwise:
When to use MediaQuery and LayoutBuilder?
LayoutBuilder and MediaQuery are both useful for creating responsive layouts in Flutter
LayoutBuilder: It’s useful when we need to make decisions based on the size of the parent widget.
For example, when we want to display a different layout if a widget is within a small container versus a large container.
MediaQuery:It’s useful when you want to make decisions based on the overall device screen size or user settings.
For example, When we want to display a different layout for a mobile device versus a tablet.
Conclusion
Today you learned how easy it is in flutter SDK to build responsive layouts based on device screens.
You first started out with a default flutter project, then you learned how to build a User Interface that is simple and clear.
Now, practice and implement what you learned from this basic tutorial and let us know what great things you have done.
If this article has helped in any way and you have learned something new today, Kindly consider sharing the article so others can also benefit and learn how to build simple AI applications.
Subscribe to our website for more interesting articles on AI and other interesting fields of IT.
You can find the code for this here:
Repository Link:
- Repo link: github
Written By
Muhammad Sheraz
Introduction
There are numerous devices having different screens and shapes that make the modern days’ world on smartphones and tablets a very diverse mobile landscape.
Flutter offers a number of solutions that aid in developer productivity so as to deliver an interactive experience to the end user who can view it on any device and still enjoy it.
In this lesson, we will show you how to create a responsive Flutter app with working code.
Your app should have a responsive design which means its layout and elements are dynamic according to the available screen size and orientation of the given device. In return, this gives users a better time to operate with devices of our choice without being restricted.
Techniques for making Flutter apps Responsive.
MediaQuery: It provides the information about the current screen size and its orientation.
Using this information you can adapt your layout based on specific breakpoints or dynamically adjust widget sizes accordingly.
LayoutBuilder: It rebuilds its child based on the available space. It’s useful for creating layouts that adapt to varying screen sizes without any conditions.
Let’s understand MediaQuery with an example
import 'package:flutter/material.dart';
class MediaQueryExample extends StatelessWidget {
const MediaQueryExample({super.key});
@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
final deviceWidth = mediaQuery.size.width;
final deviceHeight = mediaQuery.size.height;
return Scaffold(
appBar: AppBar(
title: const Text('MediaQuery Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Device Width: $deviceWidth',
style:
TextStyle(fontSize: deviceWidth * 0.05), // 5% of device width
),
const SizedBox(height: 20),
Text(
'Device Height: $deviceHeight',
style:
TextStyle(fontSize: deviceHeight * 0.05), // 5% of device height
),
const SizedBox(height: 20),
Text(
'Device Orientation: ${mediaQuery.orientation}',
style:
TextStyle(fontSize: deviceWidth * 0.05), // 5% of device width
),
],
),
),
);
}
}
In the above example, Font size of the text is set to be 5% of the device width. Which means the font size will increase for larger screens and decrease for smaller screens, making the UI more responsive.
MediaQuery.of(context): It gets the MediaQueryData for the current context and includes data like screen size and device orientation.
final deviceWidth = mediaQuery.size.width;: Here we are getting the width of the device screen.
final deviceHeight = mediaQuery.size.height;: Here we are getting the height of the device screen.
Let’s understand LayoutBuilder with an example
import 'package:flutter/material.dart';
class ResponsiveLayoutExample extends StatelessWidget {
const ResponsiveLayoutExample({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Responsive Layout Example'),
),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 600) {
// Wide layout
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
buildCard('Card 1', Colors.red),
const SizedBox(width: 20),
buildCard('Card 2', Colors.blue),
],
);
} else {
// Narrow layout
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
buildCard('Card 1', Colors.red),
const SizedBox(height: 20),
buildCard('Card 2', Colors.blue),
],
);
}
},
),
);
}
Card buildCard(String title, Color color) {
return Card(
color: color,
child: Container(
width: 200,
height: 200,
padding: const EdgeInsets.all(16),
child: Center(
child: Text(
title,
style: const TextStyle(fontSize: 24, color: Colors.white),
),
),
),
);
}
}
LayoutBuilder widget is used to obtain the parent widget’s constraints, which include the maximum width and height that the parent widget can provide to its children.
This example adapts the layout based on the screen width. If the screen width is greater than 600, it displays two cards side by side(card 1 and card 2).
If not, it displays the cards vertically and makes the layout scrollable.
Otherwise:
When to use MediaQuery and LayoutBuilder?
LayoutBuilder and MediaQuery are both useful for creating responsive layouts in Flutter
LayoutBuilder: It’s useful when we need to make decisions based on the size of the parent widget.
For example, when we want to display a different layout if a widget is within a small container versus a large container.
MediaQuery:It’s useful when you want to make decisions based on the overall device screen size or user settings.
For example, When we want to display a different layout for a mobile device versus a tablet.
Conclusion
Today you learned how easy it is in flutter SDK to build responsive layouts based on device screens.
You first started out with a default flutter project, then you learned how to build a User Interface that is simple and clear.
Now, practice and implement what you learned from this basic tutorial and let us know what great things you have done.
If this article has helped in any way and you have learned something new today, Kindly consider sharing the article so others can also benefit and learn how to build simple AI applications.
Subscribe to our website for more interesting articles on AI and other interesting fields of IT.
You can find the code for this here:
Repository Link:
- Repo link: github
