flutter Problem : How to make upgrade section in bottom left in card - flutter

Question

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.

Answer 1

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->

Answer 2

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,
),
),
),
),
),
],
),
),