I've been trying to create a little card in flutter, and I've been trying to get the hang of stacks and how to position items over each other. I've moved the items around each other within the code a ton, but I can't seem to figure out how to position the text over the image, as shown. Any help on how to do this would be fantastic!
image of problem
body: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 20),
child: Stack(children: <Widget>[
Center(
child: InkWell(
onTap: null,
child: Container(
padding: EdgeInsets.all(5),
height: 200,
width: 300,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
colors: [Colors.red, Colors.redAccent],
),
borderRadius: BorderRadius.circular(25)),
child: Column(),
)),
),
Center(
child: Align(
alignment: Alignment.bottomCenter,
child: Image.asset(
'assets/running.png',
height: 180,
width: 300,
))),
Center(
child: Text(
"Events",
style: GoogleFonts.poppins(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 30),
)),
]))
],
),
Use Stack Widget with below code
Stack(
children: <Widget>[
Card(
child: Container(
height: 200,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
alignment: FractionalOffset.center,
image: AssetImage('assets/images/jitesh.jpg'),
)),
),
),
Align(
alignment: Alignment.topCenter,
child: Text(
'jitesh',
style: TextStyle(fontSize: 20, color: Colors.white),
)),
],
),
Related
I want to make a design like following
I build the base layout with background image. Following is the code to achieve that. Now i want to put "Grocery store" Text on top of this image and other widgets. How can i do that ?
Widget build(BuildContext context) {
return Container(
height: 190.0,
width: size.width,
margin: const EdgeInsets.symmetric(
horizontal: 16.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(https://www.exampledomain.com/images/background.jpg),
fit: BoxFit.cover,
),
),
// child: ????
),
),
],
),
),
],
),
);}
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(https://www.exampledomain.com/images/background.jpg),
fit: BoxFit.cover,
),
),
child: Text('Grocery store'),
//padding: <-- Using to shift text position a little bit for your requirement
),
Stack/Align is your friend.
Take a look here https://api.flutter.dev/flutter/widgets/Stack-class.html
Here is a basic example (based in your code):
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
alignment: Alignment.center,
color: Colors.red,
height: 190.0,
width: size.width,
margin: const EdgeInsets.symmetric(
horizontal: 16.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: Container(
width: size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(11.0),
image: DecorationImage(
image: NetworkImage(
"http://www.exampledomain.com/images/background.jpg"),
//fit: BoxFit.cover,
),
),
),
),
],
),
),
],
),
),
),
Align(
alignment: Alignment.center,
child: Text("Grocery store"))
]
);
}
I am making a drawer for my app and it has 2 containers in the column widget, there seems to be a line in between these containers that ruins the appearance, i have tried this for the upper container
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.only(bottom: 0),
and this for the lower container
margin: EdgeInsets.only(top: 0),
padding: EdgeInsets.only(top: 0),
still the line remains. How to remove that line, any help would be appreciated. Here is the code for the drawer:
Drawer(
child: Column(
children: <Widget>[
Container(
height: globals.heightofdevice * 0.30,
width: double.infinity,
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.only(bottom: 0),
child: Stack(
children: <Widget>[
Image.asset(
'./images/drawerbackground.jpg',
fit: BoxFit.fitWidth,
),
Positioned(
left: globals.widthofdevice * 0.07,
bottom: 20,
child: Text(
globals.username,
style: GoogleFonts.quicksand(
textStyle: TextStyle(
// fontWeight: FontWeight.w700,
fontSize: 32,
color: Colors.white,
),
),
),
)
],
),
),
Container(
height: globals.heightofdevice * 0.70,
margin: EdgeInsets.only(top: 0),
padding: EdgeInsets.only(top: 0),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.white],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Stack(children: <Widget>[
Image.asset(
'./images/uni.jpg',
fit: BoxFit.cover,
width: double.infinity,
),
Column(
children: <Widget>[
listTileBuilder(Icons.history, 'History'),
listTileBuilder(Icons.info_outline, 'About the app'),
listTileBuilder(Icons.account_circle, 'Logout'),
listTileBuilder(Icons.exit_to_app, 'Exit'),
],
),
]),
)
],
),
)
You can clearly see the problem in this picture
it must be something with the image or the stack
another example lets try
return Scaffold(
appBar: new AppBar(
title: new Text("Drawer"),
),
drawer: Drawer(
child: Column(
children: <Widget>[
Container(
color: Colors.yellow,
height: MediaQuery.of(context).size.height * 0.30,
width: double.infinity,
child: new Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("./images/drawerbackground.jpg"), fit: BoxFit.fill)),
child: new Align(
alignment: Alignment.bottomLeft,
child: new Padding (
padding: EdgeInsets.only(left: 20.0, bottom: 10.0),
child: Text(
"globals.username",
style: TextStyle(color: Colors.white),
),
),
),
),
),
Container(
height: MediaQuery.of(context).size.height * 0.70,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("./images/uni.jpg"), fit: BoxFit.fill),
gradient: LinearGradient(
colors: [Colors.redAccent, Colors.white],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
child: Column(
children: <Widget>[
listTileBuilder(Icons.history, 'History'),
listTileBuilder(Icons.info_outline, 'About the app'),
listTileBuilder(Icons.account_circle, 'Logout'),
listTileBuilder(Icons.exit_to_app, 'Exit'),
],
),
)
],
),
),
body: Container(
child: Text('Add Moka'),
),
);
The problem is most likely the fact that your top widget's image is set to fit: BoxFit.fitWidth,. Since it is trying to fill the horizontal plain fully it will stop once it has done so and not scale vertically to cover the remaining white space.
To fill the space of the container not taken by your image with a color so it isn't a white line you can try this (changes background to black):
Container(
height: globals.heightofdevice * 0.30,
width: double.infinity,
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.only(bottom: 0),
colors: Colors.black, // Added color
child: Stack(
...
),
),
Or to try and make the image take up all the available space of the container, regardless of the image's size and aspect ratio you can change the BoxFit to fill:
Image.asset(
'./images/drawerbackground.jpg',
fit: BoxFit.fill, // BoxFit fill
),
I want to align the text to the center inside the image as shown in the image.
I recently started working with flutter please help me to achieve the layout.
Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
child: Stack(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Image.asset(
'assets/images/car.jpg',
fit: BoxFit.cover,
),
),
Positioned.fill(
child: Align(
alignment: Alignment.center,
child: Text(
'Cars',
style: TextStyle(
fontFamily: 'Welcome',
fontSize: 30,
color: Colors.white),
),
),
)
],
),
)
With the help of the above code, the text is appearing in the bottom-center instead of the center.
return Container(
width: MediaQuery
.of(context)
.size
.width,
margin: EdgeInsets.fromLTRB(24, 20, 24, 0),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(16.0),
child: Image.asset(
Images.image1,
fit: BoxFit.cover,
),
),
Text(
'Cars',
style: TextStyle(
fontFamily: 'Welcome',
fontSize: 30,
color: Colors.white),
)
],
),
);
I'm trying to make a card with "balloon" in top of card Here a example of what i'm trying to do
I'm doin'g in Flutter, the last update, i've tried add stack with positioned, but i got this horrible thing
My code about this is:
Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: Text('1'),
decoration:
BoxDecoration(color: Colors.redAccent, shape: BoxShape.circle),
),
Positioned(
left: 19,
top: 37,
child: Container(
height: 20,
width: 20,
color: Colors.green,
),
),
],
),
Card(
child: Container(
color: Colors.blue,
child: Text('aaaaaaaa'),
),
)
],
);
And my expected response was the link above
Please try this :-
Column(
children: <Widget>[
Container(
alignment: Alignment.topLeft,
child: Column(
children: <Widget>[
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: Text('1'),
decoration: BoxDecoration(
color: Colors.redAccent, shape: BoxShape.circle),
),
Container(
height: 40,
width: 2,
color: Colors.green,
),
],
),
),
Container(
width: double.infinity,
child: Card(
child: Container(
color: Colors.blue,
child: Text('aaaaaaaa'),
),
),
)
],
)
child: Stack(
//alignment: Alignment.center,
children: <Widget>[
Container(
alignment: Alignment.center,
width: MediaQuery.of(mContext).size.width / 1.7,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
gradient: LinearGradient(
colors: gradient,
begin: Alignment.topLeft,
end: Alignment.bottomRight),
),
child: Text(title,
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w500)),
padding: EdgeInsets.only(top: 16, bottom: 16),
),
Visibility(
visible: isEndIconVisible,
child: Padding(
padding: EdgeInsets.only(right: 10),
child: ImageIcon(
AssetImage("assets/ic_forward.png"),
size: 30,
color: Colors.white,
)),
),
],
),
I have a button which should be at the center of the screen. A text which is at the centre of the button and a right arrow. Since I want the button at the center i put alignment centre and so the right arrow coming as centre. Can anyone help me to solve this? I also want to know where we put click for this button.
You can use simple row Widget to achieve you expected ui.
Look at following code which help you may be.
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width / 1.7,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
color: Colors.red
,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("vdsv",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w500)),
Visibility(
visible: true,
child: Padding(
padding: EdgeInsets.only(right: 10),
child: ImageIcon(
AssetImage("assets/images/logo.png"),
size: 30,
color: Colors.white,
)),
),
],
),
padding: EdgeInsets.only(top: 16, bottom: 16),
),
],
)
Add align before Visibility
child: Stack(
//alignment: Alignment.center,
children: <Widget>[
Container(
alignment: Alignment.center,
width: MediaQuery.of(mContext).size.width / 1.7,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
gradient: LinearGradient(
colors: gradient,
begin: Alignment.topLeft,
end: Alignment.bottomRight),
),
child: Text(title,
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w500)),
padding: EdgeInsets.only(top: 16, bottom: 16),
),
Align(alignment: Alignment.topRight,
child: Visibility(
visible: isEndIconVisible,
child: Padding(
padding: EdgeInsets.only(right: 10),
child: ImageIcon(
AssetImage("assets/ic_forward.png"),
size: 30,
color: Colors.white,
)),
),)
],
),