Issue
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.
Solution
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-> 
Answered By – Ravindra S. Patil
Answer Checked By – Cary Denson (FlutterFixes Admin)