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.
CodePudding user response：
Try below code hope its help to you. You used Stack widget for that
Refer Stack 
CodePudding user response：
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,
),
),
),
),
),
],
),
),