A stack widget is a built-in widget in flutter SDK which lets us make a layer of widgets by way of inserting them on the pinnacle of every other. Many of instances an easy row and column plan is now not enough, we need a way to overlay one widget on the pinnacle of the other, for example, we may favor exhibiting some textual content over an image, so to handle such a scenario we have Stack widget. The Stack widget has two sorts of toddler one is placed which are wrapped in the Positioned widget and the different one is non–positioned which is no longer wrapped in the Positioned widget. For all the non-positioned widgets the alignment property is set to the top-left corner. The located toddler widgets are located thru the top, right, left, and backside properties. The infant widgets of Stack are printed in order the top-most widget will become the bottom-most on the display and vice-versa. We can use the key property of the Stack widget to alternate that order or assign a distinct order.
Constructor of Stack Class:
Stack(
{Key key,
AlignmentGeometry alignment: AlignmentDirectional.topStart,
TextDirection textDirection,
StackFit fit: StackFit.loose,
Overflow overflow: Overflow.clip,
Clip clipBehavior: Clip.hardEdge,
List<Widget> children: const <Widget>[]}
)
Properties of Stack Widget:
- alignment: This property takes a parameter of Alignment Geometry, and controls how a baby widget which is non-positioned or partially-positioned will be aligned in the Stack.
- clipBehaviour: This property determined whether or not the content material will be clipped or not.
- fit: This property determined how the non-positioned youngsters in the Stack will fill the area handy to it.
- overflow: This property controls whether or not the overflow phase of the content material will be seen or not,
- textDirection: With this property, we can select the textual content course from proper to left. or left to right.
Example 1:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
), //AppBar
body: Center(
child: SizedBox(
width: 300,
height: 300,
child: Center(
child: Stack(
children: <Widget>[
Container(
width: 300,
height: 300,
color: Colors.red,
), //Container
Container(
width: 250,
height: 250,
color: Colors.black,
), //Container
Container(
height: 200,
width: 200,
color: Colors.purple,
), //Container
], //<Widget>[]
), //Stack
), //Center
), //SizedBox
) //Center
) //Scaffold
) //MaterialApp
);
}
Explanation: Taking a seem at the code of this flutter app, we can see that the mother or father widget for this app is Scaffold. On the pinnacle of the widget tree, we have AppBar widget with title Text widget studying ‘GeeksforGeeks‘ and the history shade of the app bar is greenAccent[400]. In the physique of the app, the guardian widget is Center observed through the SizedBox of peak 300 and width 300. SizedBox is additionally having a infant Center which in turn is preserving the Stack widget. In the Stack widget, we have a listing of youth widgets conserving three Container widgets. The first Container widget is having a top and width of 300, the identical as the SizedBox, with a pink color. The Second Container is having a width and top of 250 with black color. The 0.33 Container is having a width and top of 200 with a pink color. Now, searching at the app we can see that all three containers that are adolescents to Stack are stacked on pinnacle of every different with the pink containers at the backside of the crimson at the top, and the black in the middle. All these three containers are non-positioned widget in Stack so the alignment property for them is set to Alignment.topRight, consequently we can see all of them aligned to the pinnacle proper corner.
Example 2:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
), //AppBar
body: Center(
child: SizedBox(
width: 300,
height: 300,
child: Center(
child: Stack(
children: <Widget>[
Container(
width: 300,
height: 300,
color: Colors.red,
padding: EdgeInsets.all(15.0),
alignment: Alignment.topRight,
child: Text(
'One',
style: TextStyle(color: Colors.white),
), //Text
), //Container
Container(
width: 250,
height: 250,
color: Colors.black,
padding: EdgeInsets.all(15.0),
alignment: Alignment.bottomLeft,
child: Text(
'Two',
style: TextStyle(color: Colors.white),
), //Text
), //Container
Container(
height: 200,
width: 200,
padding: EdgeInsets.all(15.0),
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg") //NetworkImage
), //DecorationImage
), //BoxDecoration
child: Text(
"GeeksforGeeks",
style:
TextStyle(color: Colors.white, fontSize: 20.0),
), //Text
), //Container
], //<Widget>[]
), //Stack
), //Center
), //SizedBox
) //Center
) //Scaffold
) //MaterialApp
);
}
