LayoutBuilder Widget In Flutter

Naveen Srivastava
Mar 11 · 5 min read

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 :

Layout Builder

Code Implementation

Code File

Conclusion

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.

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store