644 lines
28 KiB
Dart
644 lines
28 KiB
Dart
import 'package:refilc/theme/colors/colors.dart';
|
||
import 'package:refilc_mobile_ui/plus/plus_screen.i18n.dart';
|
||
import 'package:refilc_mobile_ui/plus/components/plan_card.dart';
|
||
import 'package:flutter_feather_icons/flutter_feather_icons.dart';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:provider/provider.dart';
|
||
import 'package:refilc_plus/providers/plus_provider.dart';
|
||
import 'package:refilc_plus/ui/mobile/plus/upsell.dart';
|
||
|
||
import 'components/active_sponsor_card.dart';
|
||
// import 'components/github_button.dart';
|
||
|
||
class PlusScreen extends StatefulWidget {
|
||
const PlusScreen({super.key});
|
||
|
||
@override
|
||
State<PlusScreen> createState() => PlusScreenState();
|
||
}
|
||
|
||
class PlusScreenState extends State<PlusScreen> {
|
||
Uri parseTierUri({required String tierId}) {
|
||
return Uri.parse(
|
||
'https://github.com/sponsors/refilc/sponsorships?tier_id=$tierId&preview=true');
|
||
}
|
||
|
||
bool showLifetime = false;
|
||
|
||
@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(
|
||
padding: EdgeInsets.zero,
|
||
width: double.infinity,
|
||
decoration: const BoxDecoration(
|
||
image: DecorationImage(
|
||
image: AssetImage('assets/images/premium_top_banner.png'),
|
||
fit: BoxFit.fitWidth,
|
||
alignment: Alignment.topCenter,
|
||
),
|
||
),
|
||
child: Container(
|
||
decoration: BoxDecoration(
|
||
gradient: LinearGradient(
|
||
colors: [
|
||
const Color(0xffF4F9FF).withOpacity(0.30),
|
||
const Color(0xffF4F9FF).withOpacity(0.40),
|
||
const Color(0xffF4F9FF).withOpacity(0.50),
|
||
const Color(0xffF4F9FF).withOpacity(0.60),
|
||
const Color(0xffF4F9FF).withOpacity(0.70),
|
||
],
|
||
begin: Alignment.topCenter,
|
||
end: Alignment.bottomCenter,
|
||
stops: const [0.0, 0.1, 0.15, 0.2, 0.25],
|
||
),
|
||
),
|
||
child: ListView(
|
||
children: [
|
||
Container(
|
||
decoration: BoxDecoration(
|
||
gradient: LinearGradient(
|
||
colors: [
|
||
const Color(0xffF4F9FF).withOpacity(0.0),
|
||
const Color(0xffF4F9FF).withOpacity(0.7),
|
||
const Color(0xffF4F9FF).withOpacity(0.8),
|
||
const Color(0xffF4F9FF).withOpacity(0.9),
|
||
const Color(0xffF4F9FF),
|
||
],
|
||
begin: Alignment.topCenter,
|
||
end: Alignment.bottomCenter,
|
||
stops: const [0.0, 0.1, 0.15, 0.18, 0.22],
|
||
),
|
||
),
|
||
child: Padding(
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 20.0, vertical: 15.0),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// heading (title, x button)
|
||
Padding(
|
||
padding: const EdgeInsets.only(left: 12.0),
|
||
child: Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: [
|
||
const Text(
|
||
'reFilc+',
|
||
style: TextStyle(
|
||
fontSize: 33,
|
||
color: Color(0xFF0a1c41),
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
IconButton(
|
||
onPressed: () => Navigator.of(context).pop(),
|
||
icon: const Icon(
|
||
FeatherIcons.x,
|
||
color: Colors.black,
|
||
),
|
||
)
|
||
],
|
||
),
|
||
),
|
||
Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 12.0),
|
||
child: Text.rich(
|
||
TextSpan(
|
||
text: 'even_more_cheaper'.i18n,
|
||
style: const TextStyle(
|
||
height: 1.2,
|
||
fontSize: 22,
|
||
color: Color(0xFF0A1C41),
|
||
fontWeight: FontWeight.w600,
|
||
),
|
||
children: [
|
||
WidgetSpan(
|
||
child: Transform.translate(
|
||
offset: const Offset(1.0, -5.5),
|
||
child: Text(
|
||
'1',
|
||
style: TextStyle(
|
||
fontSize: 14.4,
|
||
color: const Color(0xFF0A1C41)
|
||
.withOpacity(0.5),
|
||
fontWeight: FontWeight.w600,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
// cards and description
|
||
const SizedBox(
|
||
height: 60,
|
||
),
|
||
Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 12.0),
|
||
child: Text.rich(
|
||
TextSpan(
|
||
children: [
|
||
TextSpan(text: 'support_1'.i18n),
|
||
WidgetSpan(
|
||
child: Transform.translate(
|
||
offset: const Offset(1.0, -3.6),
|
||
child: Text(
|
||
'2',
|
||
style: TextStyle(
|
||
color: const Color(0xFF011234)
|
||
.withOpacity(0.5),
|
||
fontSize: 10.0,
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
TextSpan(
|
||
text: 'support_2'.i18n,
|
||
),
|
||
],
|
||
style: TextStyle(
|
||
color: const Color(0xFF011234).withOpacity(0.6),
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(
|
||
height: 18,
|
||
),
|
||
PlusPlanCard(
|
||
active: ActiveSponsorCard.estimateLevel(
|
||
context.watch<PlusProvider>().scopes) ==
|
||
PremiumFeatureLevel.cap,
|
||
iconPath: 'assets/images/plus_tier_cap.png',
|
||
title: 'reFilc+',
|
||
description: 'tier_rfp'.i18n,
|
||
color: const Color(0xFF7C3EFF),
|
||
gradient: plusGradient,
|
||
id: showLifetime ? 'refilcpluslifetime' : 'refilcplus',
|
||
price: showLifetime ? 39.99 : 0.99,
|
||
borderRadius: const BorderRadius.vertical(
|
||
top: Radius.circular(16.0),
|
||
bottom: Radius.circular(16.0)),
|
||
features: [
|
||
['✨', 'rfp_1'.i18n],
|
||
['1️⃣', 'rfp_5'.i18n],
|
||
// ['👥', 'rfp_2'.i18n],
|
||
['👋', 'rfp_3'.i18n],
|
||
['📓', 'rfp_4'.i18n],
|
||
['🎓', 'rfp_6'.i18n],
|
||
['🔜', 'more_soon'.i18n],
|
||
],
|
||
),
|
||
const SizedBox(
|
||
height: 12.0,
|
||
),
|
||
PlusPlanCard(
|
||
active: ActiveSponsorCard.estimateLevel(
|
||
context.watch<PlusProvider>().scopes) ==
|
||
PremiumFeatureLevel.ink,
|
||
iconPath: 'assets/images/plus_tier_ink.png',
|
||
title: 'reFilc+ Gold',
|
||
description: 'tier_rfpgold'.i18n,
|
||
color: const Color(0xFFFFBD3E),
|
||
gradient: goldGradient,
|
||
id: showLifetime
|
||
? 'refilcplusgoldlifetime'
|
||
: 'refilcplusgold',
|
||
price: showLifetime ? 59.99 : 2.99,
|
||
borderRadius: const BorderRadius.vertical(
|
||
top: Radius.circular(16.0),
|
||
bottom: Radius.circular(16.0)),
|
||
features: [
|
||
['🕑', 'rfp_7'.i18n],
|
||
['🔤', 'rfp_8'.i18n],
|
||
// ['👥', 'rfp_9'.i18n],
|
||
// ['🎓', 'Összesített átlagszámoló'],
|
||
['📱', 'rfp_10'.i18n],
|
||
['🟦', 'rfp_11'.i18n],
|
||
['📒', 'rfp_12'.i18n],
|
||
['📅', 'rfp_13'.i18n],
|
||
const ['🖋️', 'cap_tier_benefits'],
|
||
['🔜', 'more_soon'.i18n],
|
||
],
|
||
),
|
||
// const SizedBox(
|
||
// height: 8.0,
|
||
// ),
|
||
// PlusPlanCard(
|
||
// active: ActiveSponsorCard.estimateLevel(
|
||
// context.watch<PlusProvider>().scopes) ==
|
||
// PremiumFeatureLevel.sponge,
|
||
// iconPath: 'assets/images/plus_tier_sponge.png',
|
||
// title: 'Szivacs',
|
||
// description:
|
||
// 'Férj hozzá még több funkcióhoz, használj még több profilt és tedd egyszerűbbé mindennapjaid.',
|
||
// color: const Color(0xFFFFC700),
|
||
// id: 'refilcplusgold',
|
||
// price: 4.99,
|
||
// borderRadius: const BorderRadius.vertical(
|
||
// top: Radius.circular(8.0),
|
||
// bottom: Radius.circular(16.0)),
|
||
// features: const [
|
||
// ['👥', 'Korlátlan fiók használata egyszerre'],
|
||
// ['🖋️', 'ink_cap_tier_benefits'],
|
||
// ],
|
||
// ),
|
||
// const SizedBox(
|
||
// height: 18.0,
|
||
// ),
|
||
// const GithubLoginButton(),
|
||
// lifetime plan toggle
|
||
const SizedBox(
|
||
height: 18.0,
|
||
),
|
||
Container(
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(16.0),
|
||
border: Border.all(
|
||
color: AppColors.of(context).text.withOpacity(0.2),
|
||
),
|
||
),
|
||
child: SwitchListTile(
|
||
contentPadding:
|
||
const EdgeInsets.only(left: 15.0, right: 10.0),
|
||
value: showLifetime,
|
||
onChanged: (value) {
|
||
setState(() {
|
||
showLifetime = !showLifetime;
|
||
});
|
||
},
|
||
title: Text('show_lifetime'.i18n),
|
||
),
|
||
),
|
||
// faq section
|
||
const SizedBox(
|
||
height: 30.0,
|
||
),
|
||
Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 12.0),
|
||
child: Text(
|
||
'faq'.i18n,
|
||
style: TextStyle(
|
||
color: const Color(0xFF011234).withOpacity(0.6),
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(
|
||
height: 18,
|
||
),
|
||
Card(
|
||
margin: EdgeInsets.zero,
|
||
shape: const RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.vertical(
|
||
top: Radius.circular(16.0),
|
||
bottom: Radius.circular(8.0),
|
||
),
|
||
),
|
||
shadowColor: Colors.transparent,
|
||
surfaceTintColor: const Color(0xffFFFFFF),
|
||
color: Colors.white,
|
||
child: Padding(
|
||
padding: const EdgeInsets.only(
|
||
top: 18.0,
|
||
bottom: 16.0,
|
||
left: 22.0,
|
||
right: 18.0,
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
'money'.i18n,
|
||
style: const TextStyle(
|
||
fontSize: 16.6,
|
||
fontWeight: FontWeight.w600,
|
||
color: Colors.black,
|
||
),
|
||
),
|
||
const SizedBox(
|
||
height: 14.0,
|
||
),
|
||
Text.rich(
|
||
TextSpan(
|
||
style: TextStyle(
|
||
color: const Color(0xFF011234)
|
||
.withOpacity(0.6),
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
children: [
|
||
TextSpan(
|
||
text: 'm_1'.i18n,
|
||
),
|
||
WidgetSpan(
|
||
child: Transform.translate(
|
||
offset: const Offset(1.0, -3.6),
|
||
child: Text(
|
||
'3',
|
||
style: TextStyle(
|
||
color: const Color(0xFF011234)
|
||
.withOpacity(0.5),
|
||
fontSize: 10.0,
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
TextSpan(
|
||
text: 'm_2'.i18n,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(
|
||
height: 8.0,
|
||
),
|
||
Card(
|
||
margin: EdgeInsets.zero,
|
||
shape: const RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.vertical(
|
||
top: Radius.circular(8.0),
|
||
bottom: Radius.circular(16.0),
|
||
),
|
||
),
|
||
shadowColor: Colors.transparent,
|
||
surfaceTintColor: const Color(0xffFFFFFF),
|
||
color: Colors.white,
|
||
child: Padding(
|
||
padding: const EdgeInsets.only(
|
||
top: 18.0,
|
||
bottom: 16.0,
|
||
left: 22.0,
|
||
right: 18.0,
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
'open'.i18n,
|
||
style: const TextStyle(
|
||
fontSize: 16.6,
|
||
fontWeight: FontWeight.w600,
|
||
color: Colors.black,
|
||
),
|
||
),
|
||
const SizedBox(
|
||
height: 14.0,
|
||
),
|
||
Text(
|
||
'o_1'.i18n,
|
||
style: TextStyle(
|
||
color:
|
||
const Color(0xFF011234).withOpacity(0.6),
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(
|
||
height: 30.0,
|
||
),
|
||
Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 12.0),
|
||
child: Text(
|
||
'desc'.i18n,
|
||
style: TextStyle(
|
||
color: const Color(0xFF011234).withOpacity(0.6),
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(
|
||
height: 18,
|
||
),
|
||
Card(
|
||
margin: EdgeInsets.zero,
|
||
shape: const RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.vertical(
|
||
top: Radius.circular(8.0),
|
||
bottom: Radius.circular(16.0),
|
||
),
|
||
),
|
||
shadowColor: Colors.transparent,
|
||
surfaceTintColor: const Color(0xffFFFFFF),
|
||
color: Colors.white,
|
||
child: Padding(
|
||
padding: const EdgeInsets.only(
|
||
top: 18.0,
|
||
bottom: 16.0,
|
||
left: 22.0,
|
||
right: 18.0,
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
Container(
|
||
decoration: BoxDecoration(
|
||
color: const Color(0xff011234),
|
||
borderRadius: BorderRadius.circular(20.0),
|
||
),
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 10.0,
|
||
vertical: 2.5,
|
||
),
|
||
child: const Text(
|
||
'1',
|
||
style: TextStyle(
|
||
color: Colors.white,
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(
|
||
width: 14.0,
|
||
),
|
||
Expanded(
|
||
child: Text(
|
||
'cheaper'.i18n,
|
||
maxLines: 5,
|
||
style: const TextStyle(
|
||
fontWeight: FontWeight.w500,
|
||
fontSize: 14.4,
|
||
height: 1.3,
|
||
color: Colors.black,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(
|
||
height: 14.0,
|
||
),
|
||
Row(
|
||
children: [
|
||
Container(
|
||
decoration: BoxDecoration(
|
||
color: const Color(0xff011234),
|
||
borderRadius: BorderRadius.circular(20.0),
|
||
),
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 8.8,
|
||
vertical: 2.5,
|
||
),
|
||
child: const Text(
|
||
'2',
|
||
style: TextStyle(
|
||
color: Colors.white,
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(
|
||
width: 14.0,
|
||
),
|
||
Expanded(
|
||
child: Text(
|
||
'qwit'.i18n,
|
||
maxLines: 5,
|
||
style: const TextStyle(
|
||
fontWeight: FontWeight.w500,
|
||
fontSize: 14.4,
|
||
height: 1.3,
|
||
color: Colors.black,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(
|
||
height: 14.0,
|
||
),
|
||
Row(
|
||
children: [
|
||
Container(
|
||
decoration: BoxDecoration(
|
||
color: const Color(0xff011234),
|
||
borderRadius: BorderRadius.circular(20.0),
|
||
),
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 8.6,
|
||
vertical: 2.5,
|
||
),
|
||
child: const Text(
|
||
'3',
|
||
style: TextStyle(
|
||
color: Colors.white,
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(
|
||
width: 14.0,
|
||
),
|
||
Expanded(
|
||
child: Text(
|
||
'apple'.i18n,
|
||
maxLines: 5,
|
||
style: const TextStyle(
|
||
fontWeight: FontWeight.w500,
|
||
fontSize: 14.4,
|
||
height: 1.3,
|
||
color: Colors.black,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(
|
||
height: 14.0,
|
||
),
|
||
Row(
|
||
children: [
|
||
Container(
|
||
decoration: BoxDecoration(
|
||
color: const Color(0xff011234),
|
||
borderRadius: BorderRadius.circular(20.0),
|
||
),
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 7.9,
|
||
vertical: 2.5,
|
||
),
|
||
child: const Text(
|
||
'4',
|
||
style: TextStyle(
|
||
color: Colors.white,
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(
|
||
width: 14.0,
|
||
),
|
||
Expanded(
|
||
child: Text(
|
||
'eur'.i18n,
|
||
maxLines: 5,
|
||
style: const TextStyle(
|
||
fontWeight: FontWeight.w500,
|
||
fontSize: 14.4,
|
||
height: 1.3,
|
||
color: Colors.black,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|