Related
I am trying to Position an Image horizontally in a way that it would cover/overlap on the left side of a container , but can't seem to figure out the right way to do it
Here is what I am trying to achieve:
Image is covering the Left edge of the Container.
This is what I got:
There is a gap between the image and container
Here is my code :
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: [
Image(
image: AssetImage("assets/images/btc.png"),
height: 47,
width: 43,
fit: BoxFit.contain,
),
Container(
alignment: Alignment.center,
margin: EdgeInsets.zero,
padding: EdgeInsets.zero,
width: MediaQuery.of(context).size.width * 0.4,
height: MediaQuery.of(context).size.height * 0.045,
decoration: BoxDecoration(
color: Color(0xff2e325c),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(6.0),
),
child: Text(
"1 Token",
textAlign: TextAlign.start,
overflow: TextOverflow.clip,
style: TextStyle(
fontWeight: FontWeight.w600,
fontStyle: FontStyle.normal,
fontSize: 16,
color: Color(0xffffffff),
),
),
),
],
),
UPDATE:
This is what it looks like when I add it into the stack
Positioning is a little bit off how can I align it with the container like above image
Row(
children: [
Stack(
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.fromLTRB(30, 8, 0, 0),
padding: EdgeInsets.zero,
width: MediaQuery.of(context).size.width * 0.4,
height: MediaQuery.of(context).size.height * 0.055,
decoration: BoxDecoration(
color: Color(0xff2e325c),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(6.0),
),
child: Text(
"1 Token",
textAlign: TextAlign.start,
overflow: TextOverflow.clip,
style: TextStyle(
fontWeight: FontWeight.w600,
fontStyle: FontStyle.normal,
fontSize: 16,
color: Color(0xffffffff),
),
),
),
),
Icon(
Icons.monetization_on,
size: 60,
color: Colors.amber,
)
],
),
],
),
You can use stack to overlap coin with container.
Stack(
children: [
Container(
alignment: Alignment.center,
margin: EdgeInsets.zero,
padding: EdgeInsets.zero,
width: MediaQuery.of(context).size.width * 0.4,
height: MediaQuery.of(context).size.height * 0.045,
decoration: BoxDecoration(
color: Color(0xff2e325c),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(6.0),
),
child: Text(
"1 Token",
textAlign: TextAlign.start,
overflow: TextOverflow.clip,
style: TextStyle(
fontWeight: FontWeight.w600,
fontStyle: FontStyle.normal,
fontSize: 16,
color: Color(0xffffffff),
),
),
),
Image(
image: AssetImage("assets/images/btc.png"),
height: 47,
width: 43,
fit: BoxFit.contain,
),
],
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.4,
height: MediaQuery.of(context).size.height * 0.070,
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.only(left: 20),
width: MediaQuery.of(context).size.width * 0.4,
height: MediaQuery.of(context).size.height * 0.045,
decoration: BoxDecoration(
color: Color(0xff2e325c),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(6.0),
),
child: Text(
"1 Token",
textAlign: TextAlign.start,
overflow: TextOverflow.clip,
style: TextStyle(
fontWeight: FontWeight.w600,
fontStyle: FontStyle.normal,
fontSize: 16,
color: Color(0xffffffff),
),
),
),
),
Align(
alignment: Alignment.centerLeft,
child: Image(
image: AssetImage("assets/images/btc.png"),
height: 55,
width: 55,
fit: BoxFit.contain,
),
),
],
),
),
I tried to code this all the way I can, but It's still can't move .
I tried to wrap this all in stack and I put the picture as second child, even if i adjust the container width, the image can't get out of the card, and the card padding is stuck there, I can't change anything, how do i fix that
here is the example design
here is my code
children: [
SizedBox(height: 37),
const Text("Hey Mishal,",
style: TextStyle(
fontSize: 26,
color: Color(0xFF0D1333),
fontWeight: FontWeight.bold,
)),
const Text("Find a course you want to learn",
style: TextStyle(
fontSize: 20,
color: Color(0xFF61688B),
height: 2,
)),
Container(
height: 150,
width: 357,
alignment: Alignment.topLeft,
margin: const EdgeInsets.symmetric(vertical: 30),
decoration: BoxDecoration(
color: kDeepBlueTheme,
borderRadius: BorderRadius.circular(15)),
child: Stack(
children: [
Card(
color: Colors.blueAccent,
child: Padding(
padding: const EdgeInsets.only(left: 15, top: 23),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// SizedBox(height: 30, width: 100,),
const Text('50% off',
style: TextStyle(
color: Colors.white,
fontSize: 27,
fontWeight: FontWeight.bold)),
const SizedBox(
height: 5,
),
const Text('For Any Courses',
style: TextStyle(
letterSpacing: 2,
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w300)),
const SizedBox(
height: 6,
),
ElevatedButton(
//on pressed
onPressed: () async {},
//text to shoe in to the button
child: const Text('Join Now!',
style: TextStyle(color: kMainTheme)),
//style section code here
style: ButtonStyle(
elevation:
MaterialStateProperty.all<double>(0),
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
)),
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.black),
),
),
]),
),
),
Positioned(
bottom: 1,
left: 100,
child: Image.asset(
'assets/person_home.png',
height: 230,
),
)
],
),
),
],
and here is my result ,
how can I achieve that ?
Wrap your Stack with a SizedBox and give it a height greater than the height of Card, use media query heights to make it responsive.
SizedBox(
height: 220,
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
height: 200,
width: double.infinity,
padding: const EdgeInsets.all(8.0),
child: Card(
color: Colors.blueAccent,
child: Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('50% off',
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.bold)),
const SizedBox(
height: 5,
),
const Text('For Any Courses',
style: TextStyle(
letterSpacing: 2,
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w300)),
const SizedBox(
height: 6,
),
ElevatedButton(
//on pressed
onPressed: () async {},
//text to shoe in to the button
child: const Text('Join Now!',
style: TextStyle(color: Colors.white)),
//style section code here
style: ButtonStyle(
elevation: MaterialStateProperty.all<double>(0),
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
)),
backgroundColor:
MaterialStateProperty.all<Color>(Colors.black),
),
),
]),
),
),
),
Positioned(
right: 0,
top: 0,
child: Image.network(
'https://i.ibb.co/7Kr3Vc2/Screenshot-2022-02-23-at-6-11-05-PM-removebg-preview.png',
fit: BoxFit.cover,
height: 210,
),
)
],
),
),
Try This Result Will be like in pic..
Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 400,
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.blueGrey,
),
),
),
Row(
children: [
const Padding(
padding:EdgeInsets.only(left: 20,right: 5),
child: Text('hello'),
),
Spacer(),
SizedBox(
height: 700,
child: Image.asset('assets/images/place_holder_avatar.png',fit: BoxFit.cover,),
),
],
),
],
)
I placed a post like this. When the text did not fit, it did not pass when it should have been on the bottom line.
Code:
body: Container(
padding: EdgeInsets.all(10),
child: Container(
height: 150,
decoration: BoxDecoration(
color: Colors.black
),
padding: EdgeInsets.all(10),
child: Container(
height: 180,
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2),
),
child: Row(
children: [
Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Soru sor, kazan", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),),
Text("SorSor! uygulaması ile soru sor, para kazan! Tek amacın yaşadığın sorunları soru olarak açmak ve diğer kullanıcıların sorularını yanıtlamak.", style: TextStyle(fontSize: 16, color: Colors.white),),
],
),
),
],
),
),
)
)
I want it to go to the bottom line when there is no space left. How can I do it?
Just remove the Row widget that you have above the Padding and the issue will gone.
Container(
height: 180,
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2),
),
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Soru sor, kazan",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white),
),
Text(
"SorSor! uygulaması ile soru sor, para kazan! Tek amacın yaşadığın sorunları soru olarak açmak ve diğer kullanıcıların sorularını yanıtlamak.",
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
I want to make upgrade section in bottom left but I am not understatig how to do it.
I want to make upgrade section in bottom left but I am not understatig how to do it.
I want to make upgrade section in bottom left but I am not understatig how to do it.
this is my code.
import 'package:cwc/constants/constants.dart';
import 'package:flutter/material.dart';
class UpgradeMemberPackages extends StatefulWidget {
const UpgradeMemberPackages({Key? key}) : super(key: key);
#override
_UpgradeMemberPackagesState createState() => _UpgradeMemberPackagesState();
}
class _UpgradeMemberPackagesState extends State<UpgradeMemberPackages> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
width: double.infinity,
height: 160,
decoration: const BoxDecoration(
color: Color(0xffCCEAEF),
image: DecorationImage(
image: AssetImage('assets/ump.png'),
fit: BoxFit.cover,
),
),
),
Container(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Column(
children: [
SizedBox(
height: 13,
),
Text(
"Your Membership Package",
style: TextStyle(
fontSize: tSize18,
fontWeight: FontWeight.w500),
),
Container(
padding: EdgeInsets.only(right: 15, left: 15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: AssetImage("assets/green_card.png"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Starter Package",
style: TextStyle(
fontSize: tSize18,
fontWeight: FontWeight.w500),
),
SizedBox(
height: 6,
),
Text(
"Package for new members",
style: TextStyle(
fontSize: tSize14,
),
),
SizedBox(
height: 16,
),
Text(
"Free",
style: TextStyle(
fontSize: tSize27,
fontWeight: FontWeight.w500),
),
SizedBox(
height: 3,
),
Text(
"Valid Til: NONE",
style: TextStyle(
fontSize: tSize14,
),
),
],
),
),
Padding(
padding: EdgeInsets.only(bottom: 8),
child: Image.asset(
'assets/onaa.png',
height: 114,
width: 114,
),
),
],
)),
SizedBox(
height: 13,
),Text(
"Other Packages",
style: TextStyle(
fontSize: tSize18,
fontWeight: FontWeight.w500),
), SizedBox(
height: 13,
),
Container(
padding: EdgeInsets.only(right: 15, left: 15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: AssetImage("assets/orange_card.png"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Explorer Package",
style: TextStyle(
fontSize: tSize18,
fontWeight: FontWeight.w500),
),
SizedBox(
height: 6,
),
Text(
"Best package for price",
style: TextStyle(
fontSize: tSize14,
),
),
SizedBox(
height: 16,
),
Text(
"\$99 USD",
style: TextStyle(
fontSize: tSize27,
fontWeight: FontWeight.w500),
),
],
),
),
Padding(
padding: EdgeInsets.only(bottom: 8),
child: Image.asset(
'assets/onbb.png',
height: 114,
width: 114,
),
),
],
)),
SizedBox(
height: 10,
),
Container(
padding: EdgeInsets.only(right: 15, left: 15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: AssetImage("assets/purple_card.png"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Champion Package",
style: TextStyle(
fontSize: tSize18,
fontWeight: FontWeight.w500),
),
SizedBox(
height: 6,
),
Text(
"VIP Package",
style: TextStyle(
fontSize: tSize14,
),
),
SizedBox(
height: 16,
),
Text(
"\$199 USD",
style: TextStyle(
fontSize: tSize27,
fontWeight: FontWeight.w500),
),
],
),
),
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Image.asset(
'assets/oncc.png',
height: 114,
width: 114,
),
),
],
))
],
),
),
),
],
),
),
);
}
}
In Actuall I want to make like this.
But It becoming like this. I want upgrade section which is in bottom left.
Try below code hope its help to you. You used Stack widget for that
Refer Stack here
Refer Positioned here
Stack(
children: [
Container(
padding: EdgeInsets.only(right: 15, left: 15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(
"https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png"),
fit: BoxFit.fill,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: Column(
children: [
Text(
"Explorer Package",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w500),
),
SizedBox(
height: 6,
),
Text(
"Best package for price",
style: TextStyle(
fontSize: 14,
),
),
SizedBox(
height: 16,
),
Text(
"\$99 USD",
style: TextStyle(
color: Colors.white,
fontSize: 27,
fontWeight: FontWeight.w500),
),
],
),
),
Padding(
padding: EdgeInsets.only(bottom: 8),
child: Image.network(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
height: 114,
width: 114,
),
),
],
),
),
Positioned(
bottom: 0,
child: Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(8),
topRight: Radius.circular(20),
),
),
width: 200,
height: 38,
child: Center(
child: Text(
'Upgrade Now',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
),
],
),
Your result screen->
By using Stack widget, I implemented what you want to.
Because there is no image resource, screenshot is not same as you uploaded.
Wrap Row Widget with Stack widget in Container
Moved padding property because of 'upgrade now' widget location
Added 'upgrade now' widget
Container(
decoration: BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: AssetImage("assets/orange_card.png"),
fit: BoxFit.fill,
),
),
height: 147,
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
Padding(
padding: EdgeInsets.only(right: 15, left: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Explorer Package",
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500),
),
SizedBox(
height: 6,
),
Text(
"Best package for price",
style: TextStyle(
fontSize: 10,
),
),
SizedBox(
height: 16,
),
Text(
"\$99 USD",
style: TextStyle(
fontSize: 23,
fontWeight: FontWeight.w500),
),
],
),
),
Padding(
padding: EdgeInsets.only(bottom: 8),
child: Image.asset(
'assets/onbb.png',
height: 114,
width: 114,
),
),
],
),
),
Align(
alignment: Alignment.bottomLeft,
child: Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomLeft: Radius.circular(10),
),
),
height: 25,
width: 150,
child: Center(
child: Text(
'Upgrade Now',
style: TextStyle(
color: Colors.white,
fontSize: 9,
),
),
),
),
),
],
),
),
I want to create a listview item design something like
Click here
and which I have tried so far is Click here
Here is my code
ListTile(
leading: ConstrainedBox(
constraints: BoxConstraints(
minWidth: 44,
minHeight: 44,
maxWidth: 64,
maxHeight: 64,
),
child: Image.network(catData[index]['icon'].toString(),
width: 150,
height: 150,
fit: BoxFit.cover,
headers: headersMap,
)
),
title: Padding(
padding: EdgeInsets.only(left: 10,bottom: 5, right: 10, top: 10),
child: Text(
getCategoryName(catData, index),
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 20,
fontFamily: 'Mada-Medium',
letterSpacing: 0.25,
),
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
subtitle: Padding(
padding: EdgeInsets.only(left: 10,bottom: 5, right: 10),
child: Text(
getText(catData[index]['catId'], subCatData),
style: TextStyle(
color: parseColor('##A2A2A2'),
letterSpacing: 0.25,
fontSize: 14,
fontFamily: 'Mada',
fontWeight: FontWeight.w500),
maxLines: 2,
overflow: TextOverflow.ellipsis,
)
),
)
The image portion is not setting properly on listTile title. Please help to create this design
Try this
class ListItem extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.all(Radius.circular(20.0))),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0), bottomLeft: Radius.circular(20.0)),
child: Image.asset(
'assets/images/nilesh.jpg',
fit: BoxFit.cover,
height: 120,
width: 100,
),
),
SizedBox(width: 20),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
SizedBox(height: 20),
Text(
'Dummy Text',
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
SizedBox(height: 30),
Text(
'Dummy Text',
style: TextStyle(color: Colors.grey, fontWeight: FontWeight.normal),
),
],
))
],
),
);
}
}
OUTPUT