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

View File

@ -19,6 +19,37 @@ class PlusScreen extends StatelessWidget {
@override @override
Widget build(BuildContext context) { 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( return Scaffold(
backgroundColor: const Color(0xffF4F9FF), backgroundColor: const Color(0xffF4F9FF),
body: Container( body: Container(
@ -168,12 +199,13 @@ class PlusScreen extends StatelessWidget {
iconPath: 'assets/images/plus_tier_cap.png', iconPath: 'assets/images/plus_tier_cap.png',
title: 'reFilc+', title: 'reFilc+',
description: 'tier_rfp'.i18n, description: 'tier_rfp'.i18n,
color: const Color.fromARGB(255, 97, 0, 187), color: const Color(0xFF7C3EFF),
gradient: plusGradient,
id: 'refilcplus', id: 'refilcplus',
price: 0.99, price: 0.99,
borderRadius: const BorderRadius.vertical( borderRadius: const BorderRadius.vertical(
top: Radius.circular(16.0), top: Radius.circular(16.0),
bottom: Radius.circular(8.0)), bottom: Radius.circular(16.0)),
features: [ features: [
['', 'rfp_1'.i18n], ['', 'rfp_1'.i18n],
['1', 'rfp_5'.i18n], ['1', 'rfp_5'.i18n],
@ -184,7 +216,7 @@ class PlusScreen extends StatelessWidget {
], ],
), ),
const SizedBox( const SizedBox(
height: 8.0, height: 12.0,
), ),
PlusPlanCard( PlusPlanCard(
active: ActiveSponsorCard.estimateLevel( active: ActiveSponsorCard.estimateLevel(
@ -193,11 +225,12 @@ class PlusScreen extends StatelessWidget {
iconPath: 'assets/images/plus_tier_ink.png', iconPath: 'assets/images/plus_tier_ink.png',
title: 'reFilc+ Gold', title: 'reFilc+ Gold',
description: 'tier_rfpgold'.i18n, description: 'tier_rfpgold'.i18n,
color: const Color.fromARGB(255, 187, 137, 0), color: const Color(0xFFFFBD3E),
gradient: goldGradient,
id: 'refilcplusgold', id: 'refilcplusgold',
price: 2.99, price: 2.99,
borderRadius: const BorderRadius.vertical( borderRadius: const BorderRadius.vertical(
top: Radius.circular(8.0), top: Radius.circular(16.0),
bottom: Radius.circular(16.0)), bottom: Radius.circular(16.0)),
features: [ features: [
['🕑', 'rfp_7'.i18n], ['🕑', 'rfp_7'.i18n],

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