Stack And Positioned Widget In Flutter
Flutter is a portable UI toolkit. In other words, it’s a comprehensive app Software Development toolkit (SDK) that comes complete with widgets and tools. Flutter is a free and open-source tool to develop mobile, desktop, web applications. Flutter is a cross-platform development tool. This means that with the same code, we can create both ios and android apps. This is the best way to save time and resources in our entire process. In this, hot reload is gaining traction among mobile developers. Allows us to quickly see the changes implemented in the code with hot reload
In this blog, we will explore the Stack and Positioned Widget In Flutter. We will also implement a demo of the stack and positioned widget, describes its properties, and how to use them in your flutter applications. So let’s get started.
Table of Contents :
Stack Widget:
The stack is a widget in Flutter. It contains a list of widgets and places them on top of each other. And it places their children on top of each other like a stack of books. In other words, stack developers would overlap multiple widgets on one screen. As you can add different images or colors using containers in it.
Properties of the Stack Widget:
The following are the basic properties of the stack widget.
- alignment: The alignment determines that.How to align children’s widgets in the stack. It can be top,bottom,center,etc.
- text direction: The text direction determines the text direction. It can draw the text either ltr (left to right) or rtl (right to the left).
- Fit: The fit Property is of type BoxFit.Its use describes how a box is marked in another box. It completes semantics sizing.
These are the some parameters of a Stack widget.
Stack(
alignment: Alignment.center,
textDirection: TextDirection.rtl,
fit: StackFit.loose,
overflow: Overflow.visible,
clipBehavior: Clip.hardEdge,
children: <Widget>[]
),
Positioned Widget:
The Positioned widgets, as we know by name. This is related to the position of some widgets. The right positioned widgets allow us to control this. A child of that stack is positioned on the inside of the stack.
The following are the parameters of the positioned:
Positioned(
height: 0,
width: 0,
left: 0,
right: 0,
top: 0,
bottom: 0,
child:(),
)
Demo Module:
In this demo module video. Stack and Positioned Widget is used, Which overlaps several containers on the screen. And use the positioned widget. And set its positions from left and top.
Code Implementation:
You need to implement it in your code respectively:
Create a new dart file called stack_and_positioned_demo.dart inside the lib folder.
In this stack and positioned widget. We used 3 Containers that we wrap with the stack. All the containers have different colors and names. And the stack has set all its containers vertically.
Check the code below to better understand it.
Stack(
children: <Widget>[
Container(
width: 150,
height: 150,
color: Colors.green[300],
child: Text(
'Green',
style: TextStyle(
color: Colors.white,
fontSize: 20
),
),
),
],
),
Now we have wrapped her child inside the stack widget with the positioned widget as we have already understood about the positioned widget. In the positioned widget, we have given its position from the top and left.
Check the code below to better understand it.
Stack(
children: <Widget>[
Positioned(
top: 30,
left: 30,
height:250,
width: 250,
child: Container(
width: 150,
height: 150,
color: Colors.green[300],
child: Text(
'Green',
style: TextStyle(
color: Colors.white,
fontSize: 20
),
),
),
),
],
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
class StackAndPositionedDemo extends StatefulWidget {
@override
_StackAndPositionedDemoState createState() => _StackAndPositionedDemoState();
}
class _StackAndPositionedDemoState extends State<StackAndPositionedDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stack & Positioned Widget'),
centerTitle:true,
),
body:Container(
padding:EdgeInsets.all(10),
child:Stack(
children: <Widget>[
Positioned(
top: 30,
left: 30,
height:250,
width: 250,
child: Container(
width: 150,
height: 150,
color: Colors.green[300],
child: Text(
'Green',
style: TextStyle(
color: Colors.white,
fontSize: 20
),
),
),
),
Positioned(
top: 70,
left:60,
width: 250,
height: 250,
child: Container(
width:150,
height:150,
color: Colors.red[400],
child: Text(
'Red',
style: TextStyle(color: Colors.white,
fontSize: 20),
),
),
),
Positioned(
top: 130,
left: 90,
width: 250,
height: 250,
child: Container(
width: 80,
height: 80,
color: Colors.purple[300],
child: Text(
'Purple',
style: TextStyle(color: Colors.white,
fontSize: 20),
),
),
),
],
),
),
);
}
}
Conclusion:
In this article, I have explained a Stack & Positioned demo, which you can modify and experiment with according to your own. This little introduction was from the Stack & Positioned widget from our side.
I hope this blog will provide you with sufficient information in Trying up the Stack & Positioned widget in your flutter project. We will show you the stack & positioned widget is?, show a working demo program of the stack & positioned widget 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.
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.
