new refilcplus page tier cards

This commit is contained in:
Kima 2024-03-13 22:59:26 +01:00
parent dc250e449f
commit 9d2bd1b37a
5 changed files with 222 additions and 177 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -12,6 +12,7 @@ class PlusPlanCard extends StatelessWidget {
required this.title,
required this.description,
required this.color,
required this.gradient,
this.price = 0,
required this.id,
this.active = false,
@ -23,6 +24,7 @@ class PlusPlanCard extends StatelessWidget {
final String title;
final String description;
final Color color;
final LinearGradient gradient;
final double price;
final String id;
final bool active;
@ -49,6 +51,12 @@ class PlusPlanCard extends StatelessWidget {
return PremiumActivationView(product: id);
}));
},
child: Container(
decoration: BoxDecoration(
gradient: gradient,
borderRadius: borderRadius!.add(BorderRadius.circular(1.5)),
),
padding: const EdgeInsets.all(1.5),
child: Card(
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
@ -56,7 +64,7 @@ class PlusPlanCard extends StatelessWidget {
),
shadowColor: Colors.transparent,
surfaceTintColor: Colors.white,
color: Colors.white,
color: Colors.white.withOpacity(0.9),
child: Padding(
padding: const EdgeInsets.only(
top: 18.0, bottom: 16.0, left: 22.0, right: 18.0),
@ -69,17 +77,17 @@ class PlusPlanCard extends StatelessWidget {
children: [
Image.asset(
iconPath,
width: 25.0,
width: iconPath.endsWith('ink.png') ? 29.0 : 25.0,
height: 25.0,
),
const SizedBox(
width: 16.0,
width: 12.0,
),
Text(
title,
style: TextStyle(
style: const TextStyle(
fontSize: 22.0,
color: color,
color: Color(0xFF0B0B0B),
fontWeight: FontWeight.w600,
height: 1.2,
),
@ -106,14 +114,14 @@ class PlusPlanCard extends StatelessWidget {
],
),
),
padding: const EdgeInsets.all(4.0),
padding: const EdgeInsets.all(2.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: const Color(0xFFEFF4FE),
),
padding: const EdgeInsets.symmetric(
horizontal: 8.0, vertical: 0.0),
horizontal: 10.0, vertical: 2.0),
child: Text(
active
? 'active'.i18n
@ -181,7 +189,7 @@ class PlusPlanCard extends StatelessWidget {
text: 'reFilc+',
style: TextStyle(
color:
Color(0xFF47BB00),
Color(0xFF7C3EFF),
fontWeight:
FontWeight.w600,
),
@ -192,21 +200,24 @@ class PlusPlanCard extends StatelessWidget {
text: 'reFilc+',
style: TextStyle(
color: Color(
0xFF47BB00),
0xFF7C3EFF),
fontWeight:
FontWeight.w600,
FontWeight
.w600,
),
),
TextSpan(
text: 'and'.i18n,
),
const TextSpan(
text: 'reFilc+ Gold',
text:
'reFilc+ Gold',
style: TextStyle(
color: Color(
0xFF0061BB),
fontWeight:
FontWeight.w600,
FontWeight
.w600,
),
),
],
@ -236,6 +247,7 @@ class PlusPlanCard extends StatelessWidget {
),
),
),
),
);
}
}

View File

@ -19,6 +19,37 @@ class PlusScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
LinearGradient plusGradient = const LinearGradient(
colors: [
Color(0xFF7087FF),
Color(0xFF9069FF),
Color(0xFFE4D7FF),
Color(0xFFDBC5FF),
Color(0xFFE57DFF),
Color(0xFFDBB7FF),
Color(0xFF6850FF),
Color(0xFF2144FF),
],
stops: [0.0, 0.16, 0.32, 0.49, 0.69, 0.8, 0.92, 1.0],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
LinearGradient goldGradient = const LinearGradient(
colors: [
Color(0xFFFFBD70),
Color(0xFFFFDE69),
Color(0xFFFFECD7),
Color(0xFFFFE4C5),
Color(0xFFFFDB7D),
Color(0xFFFFDEB7),
Color(0xFFFFAE50),
Color(0xFFFF9921),
],
stops: [0.0, 0.16, 0.32, 0.49, 0.69, 0.8, 0.92, 1.0],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
return Scaffold(
backgroundColor: const Color(0xffF4F9FF),
body: Container(
@ -168,12 +199,13 @@ class PlusScreen extends StatelessWidget {
iconPath: 'assets/images/plus_tier_cap.png',
title: 'reFilc+',
description: 'tier_rfp'.i18n,
color: const Color.fromARGB(255, 97, 0, 187),
color: const Color(0xFF7C3EFF),
gradient: plusGradient,
id: 'refilcplus',
price: 0.99,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(16.0),
bottom: Radius.circular(8.0)),
bottom: Radius.circular(16.0)),
features: [
['', 'rfp_1'.i18n],
['1', 'rfp_5'.i18n],
@ -184,7 +216,7 @@ class PlusScreen extends StatelessWidget {
],
),
const SizedBox(
height: 8.0,
height: 12.0,
),
PlusPlanCard(
active: ActiveSponsorCard.estimateLevel(
@ -193,11 +225,12 @@ class PlusScreen extends StatelessWidget {
iconPath: 'assets/images/plus_tier_ink.png',
title: 'reFilc+ Gold',
description: 'tier_rfpgold'.i18n,
color: const Color.fromARGB(255, 187, 137, 0),
color: const Color(0xFFFFBD3E),
gradient: goldGradient,
id: 'refilcplusgold',
price: 2.99,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(8.0),
top: Radius.circular(16.0),
bottom: Radius.circular(16.0)),
features: [
['🕑', 'rfp_7'.i18n],

@ -1 +1 @@
Subproject commit a4d569db8d8cffa5342fabacd7d1f3ee4fe43061
Subproject commit a1e434f0204d7131bee009b786dadb2184f4822c