flutter Problem : How to make Upcoming section in Top Right in card
I want to make Upcoming section in top right but I am not understatig how to do it.
I want to make Upcoming section in top right but I am not understatig how to do it. I want to make Upcoming section in top right but I am not understatig how to do it.
This is ny code
InkWell(
onTap: () {
// Navigator.pushReplacement(
// context,
// MaterialPageRoute(
// builder: (context) => HomePage(),
// ),
// );
// setState(() {
// isSelect = 1;
// });
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: SizedBox(
height: 147,
width: MediaQuery.of(context).size.width,
child: Stack(
alignment: Alignment.center,
children: [
Stack(
children: [
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: 13,
),
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,
),
),
],
),
),
Positioned(
bottom: 130,
right: 0,
child: Container(
decoration: BoxDecoration(
color: Color(0xff158998),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
topRight: Radius.circular(20),
),
),
width:160,
height: 25,
child: Center(
child: Text(
'Upcoming Plans',
style: TextStyle(
color: Colors.white,
fontSize: tSize14,
),
),
),
),
),
],
),
Positioned(
width: 18,
bottom: 0,
child: Center(
child: Container(
height: 15,
width: 15,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(50),
),
child: Theme(
data: ThemeData(
//here change to your color
unselectedWidgetColor:
Color(0xff3a99a4),
),
child: Radio(
activeColor: Colors.green,
overlayColor:
MaterialStateProperty.all(
Colors.red),
value: isSelect,
groupValue: 1,
onChanged: (int? value) {
// setState(() {
// isSelect = value!;
// });
},
),
),
),
),
),
],
),
),
),
),
In actuall i want like this
But It becoming like this. I want Upcoming section which is in top right.
Solution 1:
It would probably make your life easier to clean up the code. You have multiple stacks, which is usually a sign the layout can be simplified. But your problem can be fixed in a couple of small changes. The explanation and an image of running app is below the code.
Upcoming Plans Changes:
Positioned(
// bottom: 130,
top: 0,
right: 0,
child: Container(
alignment: Alignment.center,
decoration: const BoxDecoration(
color: Color(0xff158998),
borderRadius: BorderRadius.all(Radius.circular(20)
),
),
width:160,
height: 28,
child: const Center(
child: Text(
'Upcoming Plans',
style: TextStyle(
color: Colors.white,
fontSize: 14,
),
),
),
),
),
Explorer Package container change
Container(
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.only(right: 15, left: 15),
The container with "Explorer Package" and the one with "Upcoming plans" (layered above it) need to have offsets, either by Position or margin.
First, anchor the "Upcoming Plans" to the TOP, not the bottom. That way, no matter how high the explorer package is, it will look ok. Then, set the margin for the Explorer container to offset it from the package.
Finally, I think you want symmetric radii for the Upcoming Plans container border.
I've adapted the code and ran it. I changed some of the background colors so you can clearly see what I'm doing. I think you want it to look like this:
Again, it would make it MUCH easier for you and others in the future if you simplify the layout. Use one stack and try to remove the fixed heights. It makes your card harder to reuse (especially if you get new graphics assets). Good luck.