Expanded and Flexible In Flutter
The flutter widget is built using a modern framework. It is like a reaction. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes what his outlook should be given his present configuration and condition. Widget shows were similar to its idea and current setup and state. Flutter is a free and open-source tool to develop mobile, desktop, web applications with a single code base.
In this blog, we will explore the Expanded and Flexible Widget In FLutter. We will also implement a demo of the Expanded and Flexible Widget, and describes his properties. 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 It means that you can use one programming language and one codebase to create two different apps (for iOS and Android).”.
Expanded Widget:
The Expanded Widget is a single child widget. This means that it can have only one child assigned to it. To make this widget work properly, it must be used inside a row or column. And if we equate our child to the widget if we do not want to give the space. We can distribute to that location. We will use flex to distribute this space.
Properties of Expanded Widget:
- child: Child widget is used to place inside the expanded widget.Which we can take in rows and columns.
- Flex: The flex property, which uses flex to distributes the available space unevenly between child widgets.
To understand it better, see the code below.
Expanded(
flex: 1,// default
child: Container(),// required field
),
Flexible Widget:
Flexible widgets are basically similar to extends widgets. But there is a slight difference in properties. It is mainly used to adjust different child widgets’ location while having a relationship with their parent widgets.
Properties of Flexible Widget:
- fit: The fit property controls that. How does the child widget fill the available space?
It has Three options.
1.FlexFit. Tight: Sets it to fill the remaining available space.
2.FlexFit.loose: Sets it to fill the remaining available space. This is as much as the space available to the child widget; let’s grow up.
3.Flex: The flex property, which uses flex to distributes the available space unevenly between child widgets.
To understand it better, see the code below.
Flexible(
flex: 1, // default value
fit: FlexFit.loose, //default value
child: Container(), // required field
),
Demo Module:
In this demo module video.Used Expanded and Flexible Widget, which files the available space according to their own. It has a property called flex that has been used, which can reduce the container’s size.
Code Implement:
Expanded Widget:
As you can see on this screen. There are two rows in this screen that used the Expanded widget in the first row but did not use the flex property inside the Expanded widget.
Let us understand this with the help of a reference.
Row(
children: [
Expanded(
child: Container(
// padding:EdgeInsets.all(10),
alignment: Alignment.center,
color: Colors.pink[300],
height: 100,
child: Image.asset('assets/images/pluginIcon.png'),
),
),
Expanded(
child: Container(
alignment: Alignment.center,
height: 100,
color: Colors.green,
child: Image.asset('assets/images/pluginIcon.png'),
),
),
Expanded(
child: Container(
alignment: Alignment.center,
height: 100,
color: Colors.amber,
child: Image.asset('assets/images/pluginIcon.png'),
),
),
],
),
The Expanded widget results can be seen in the below image.
Flexible Widget:
As you can see on this screen, two containers have been used in this first row, which is wrapped with the flexible widget. And has used properties flex and fit.
Row(
children: <Widget>[
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.green,
),
),
),
SizedBox(
width: 20,
),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.green,
)
),
),
],
),
The Flexible widget results can be seen in the below image.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class ExpandedWidget extends StatefulWidget {
@override
_ExpandedWidgetState createState() => _ExpandedWidgetState();
}
class _ExpandedWidgetState extends State<ExpandedWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Expanded Widget'),
),
body: Container(
padding: EdgeInsets.all(15),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Expanded widget without flex',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.italic,
letterSpacing: 0.5),
),
SizedBox(
height: 40,
),
Row(
children: [
Expanded(
child: Container(
// padding:EdgeInsets.all(10),
alignment: Alignment.center,
color: Colors.pink[300],
height: 100,
child:Image.asset('assets/images/pluginIcon.png'
),
),
),
Expanded(
child: Container(
alignment: Alignment.center,
height: 100,
color: Colors.green,
child:Image.asset('assets/images/pluginIcon.png'
),
),
),
Expanded(
child: Container(
alignment: Alignment.center,
height: 100,
color: Colors.amber,
child:Image.asset('assets/images/pluginIcon.png'
),
),
),
],
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Expanded widget with flex',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.italic,
letterSpacing: 0.5),
),
SizedBox(
height: 40,
),
Row(
children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
height: 100,
color: Colors.pink[300],
child:Image.asset('assets/images/pluginIcon.png'
),
),
),
Expanded(
flex: 2,
child: Container(
alignment: Alignment.center,
height: 100,
color: Colors.green,
child:Image.asset('assets/images/pluginIcon.png'),
),
),
Expanded(
flex: 3,
child: Container(
alignment: Alignment.center,
height: 100,
color: Colors.amber,
child:Image.asset('assets/images/pluginIcon.png'),
),
),
],
),
],
),
],
),
),
);
}
}
Conclusion:
In this article, I have explained an Expanded and Flexible widget demo, which you can modify and experiment with according to your own. This little introduction was from the Expanded and Flexible widget from our side.
I hope this blog will provide you with sufficient information in Trying up the Expanded and Flexible widget in your flutter project. We will show you the Expanded and Flexible widget is?, and working on it in your flutter applications, So please try it.
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
If we got something wrong? Let me know in the comments. we would love to improve.
❤ ❤ Thanks for reading this article ❤❤
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.
