LayoutBuilder Widget In Flutter
Flutter has made it quite easy to develop complex UIs for developers. Pulsation automated testing empowers you to meet high responsiveness in your application as it helps in discovering bugs and various issues in your application. Pulsation is a tool for developing mobile, desktop, web applications with a code & is a free and open-source tool.
In this blog, we will explore the Layout Builder In Flutter. We will also implement a demo of the Layout Builder. and how to use them in your flutter applications. So let’s get started.
Table of Contents :
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ,Flutter offers great developer tools, with amazing hot reload”
Layout Builder :
LayoutBuilder helps to create a widget tree in the widget flutter which can depend on the size of the original widget. flutter can take the layout builder as a parameter. It has two parameters. build context and Boxconstrant. BuildContext refers to a widget. But box constraint is more important, it gives the width to the parent widget which is used to manage the child according to the size of the parent.
Note: The main difference between Media Query and LayoutBuilder is that Media Query uses the full context of the screen instead of the size of your particular widget. While the layout builder can determine the maximum width and height of any widget.
Demo Module :
Code Implementation :
You need to implement it in your code respectively:
Create a new dart file called layout_builder_demo.dart inside the libfolder.
Now, we will describe the LayoutBuilder() class.
Before using the LayoutBuilder class, we have taken a container widget in which the LayoutBuilder is used. The layout builder has three containers, all of which have different colors and text and has a condition. If the width of the device size given by the user is greater than 480 then two container boxes will appear which will be visible when the tablet or screen is rotated horizontally. otherwise, the normal container will be visible. Let us understand this in detail with the help of a reference.
LayoutBuilder(
builder: (BuildContext ctx, BoxConstraints constraints) {
// if the screen width >= 480 i.e Wide Screen
if (constraints.maxWidth >= 480) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
padding:EdgeInsets.symmetric(horizontal: 8),
alignment: Alignment.center,
height: constraints.maxHeight * 0.3,
margin: EdgeInsets.fromLTRB(10.0, 0.0,10.0,0.0),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Text(
'Left Wide Screen',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
Container(
padding:EdgeInsets.symmetric(horizontal: 8),
alignment: Alignment.center,
height: constraints.maxHeight * 0.3,
margin: EdgeInsets.fromLTRB(10.0, 0.0,10.0,0.0),
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Text(
'Right Wide Screen',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
);
// If screen size is < 480
} else {
return Container(
alignment: Alignment.center,
height: constraints.maxHeight * 0.3,
margin: EdgeInsets.fromLTRB(10.0, 0.0,10.0,0.0),
decoration: BoxDecoration(
color: Colors.cyan,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Text(
'Normal Screen',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
);
}
},
)
When we run the application, we ought to get the screen’s output like the underneath screen capture.
When the screen size larger than 480 then the result will the image is given on rotating the device.
Code File :
import 'package:flutter/material.dart';
import 'package:flutter_layout_builder_demo/themes/device_size.dart';
class LayoutBuilderDemo extends StatefulWidget {
@override
_LayoutBuilderDemoState createState() => _LayoutBuilderDemoState();
}
class _LayoutBuilderDemoState extends State<LayoutBuilderDemo> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('LayoutBuilder Demo'),
centerTitle: true,
),
body: Container(
/// Giving dimensions to parent Container
/// using MediaQuery
height: DeviceSize.height(context),
width: DeviceSize.width(context),
alignment: Alignment.center,
child: LayoutBuilder(
builder: (BuildContext ctx, BoxConstraints constraints) {
// if the screen width >= 480 i.e Wide Screen
if (constraints.maxWidth >= 480) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
padding:EdgeInsets.symmetric(horizontal: 8),
alignment: Alignment.center,
height: constraints.maxHeight * 0.3,
margin: EdgeInsets.fromLTRB(10.0, 0.0,10.0,0.0),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Text(
'Left Wide Screen',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
Container(
padding:EdgeInsets.symmetric(horizontal: 8),
alignment: Alignment.center,
height: constraints.maxHeight * 0.3,
margin: EdgeInsets.fromLTRB(10.0, 0.0,10.0,0.0),
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Text(
'Right Wide Screen',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
);
// If screen size is < 480
} else {
return Container(
alignment: Alignment.center,
height: constraints.maxHeight * 0.3,
margin: EdgeInsets.fromLTRB(10.0, 0.0,10.0,0.0),
decoration: BoxDecoration(
color: Colors.cyan,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Text(
'Normal Screen',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
);
}
},
),
),
),
);
}
}
Conclusion :
In this article, I have explained a LayoutBuilder in a flutter, which you can modify and experiment with according to your own, this little introduction was from the LayoutBuilder demo from our side.
I hope this blog will provide you with sufficient information in Trying up the LayoutBuilder in your flutter project. We showed you what the LayoutBuilder is and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
