Stack UI In Flutter :
Stack UI In Flutter : Today i will show you how to create stack ui in flutter also give the information of the stack with an example
stack allows us to make multiple widgets which is overlay to each other.using stack you can design cool layout
there are two types of stack
- IndexedStack
- Stack
IndexedStack :
An IndexedStack is a stack where only one element is displayed at one time by its index. it takes the children in the stack but it display one child at a time.
When we wrap the same elements with IndexedStack and give it the index 0, it shows the bottommost child.
Stack :
using stack you can put multiple widgets in the single screen.it takes multiple children and order them in the form of bottom to top so the last item is the topmost and the first item is the bottom most
the size of the stack is depend on the largest member of the stack
each member of the stack ui in flutter needs the alignment and the position
There are also other types of Positioned. A few of them are:
Positioned.fill()
Sets top, right, bottom, left to 0.0 by default unless overriden. Hence, it fills the screen by default since distance from all four sides is 0.0.
Positioned.fromRect()
Creates a Positioned object from a given Rect.
Now i am going to show you the example of stack ui in flutter
Stack UI Image
Stack UI.dart
Stack(
children: <Widget>[
Column(
children: <Widget>[
Image.network(
"https://www.visitnewportbeach.com/wp-content/uploads/2018/04/star700x400-700x400.jpg",
fit: BoxFit.cover,
width: double.infinity,
height: 200.0,
),
Container(
width: double.infinity,
padding: EdgeInsets.all(16.0),
color: Colors.blue,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Starbucks Coffe",
style: TextStyle(color: Colors.white, fontSize: 24),
),
Text(
"Coffe Shop",
style: TextStyle(color: Colors.white, fontSize: 16),
),
],
),
),
Container(
width: double.infinity,
padding: EdgeInsets.all(16.0),
child: RaisedButton(
onPressed: () {
FeatureDiscovery.discoverFeatures(
context, [feature1, feature2, feature3, feature4]);
},
child: Text('Starting'),
),
)
],
),
Positioned(
top: 200,
right: 0,
child: FractionalTranslation(
translation: Offset(-0.5, -0.5),
child: DescribedFeatureOverlay(
featureId: feature4,
icon: Icons.drive_eta,
color: Colors.blue,
title: "The title",
description: "The description",
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.white,
foregroundColor: Colors.blue,
child: Icon(Icons.drive_eta),
),
),
),
),
],
)
Item UI Image :
Item UI.dart
Widget _buildListItem(String imgPath, String foodName, String price) {
return InkWell(
onTap: () {
Navigator.of(context).push((MaterialPageRoute(
builder: (context) => DetailsPage(heroTag: imgPath, foodName: foodName, foodPrice: price)
)));
},
child: Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0, bottom: 10.0),
child: Container(
height: 200.0,
width: 200.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 6.0,
color: Colors.grey.withOpacity(0.2),
spreadRadius: 5.0)
]),
child: Stack(
children: <Widget>[
Container(
height: 175.0,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white, Color(0xFFACBEA3)],
begin: Alignment.topLeft,
end: Alignment.bottomRight
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0)
)
)
),
Hero(
tag: imgPath,
child: Container(
height: 175.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(imgPath),
fit: BoxFit.contain
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0)
)
),
)
),
Positioned(
top: 160.0,
right: 20.0,
child: Material(
elevation: 2.0,
borderRadius: BorderRadius.circular(15.0),
child: Container(
height: 30.0,
width: 30.0,
child: Center(
child: Icon(Icons.favorite, color: Colors.red, size: 17.0)
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.white
),
)
)
),
Positioned(
top: 190.0,
left: 10.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(foodName,
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w600,
color: Colors.black,
fontSize: 14.0)),
SizedBox(height: 3.0),
Container(
width: 175.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Text(
'4.9',
style: TextStyle(
fontFamily: 'Montserrat',
color: Colors.grey,
fontSize: 12.0),
),
SizedBox(width: 3.0),
Icon(Icons.star,
color: Colors.green, size: 14.0),
Icon(Icons.star,
color: Colors.green, size: 14.0),
Icon(Icons.star,
color: Colors.green, size: 14.0),
Icon(Icons.star,
color: Colors.green, size: 14.0),
Icon(Icons.star,
color: Colors.green, size: 14.0),
],
),
Text(price,
style: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w500,
color: Colors.black,
fontSize: 16.0)),
],
)
)
],
)
)
],
)
)
)
);
}
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in
