307 lines
11 KiB
Dart
307 lines
11 KiB
Dart
import 'dart:ui';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
|
|
class PricingScreen extends StatefulWidget {
|
|
const PricingScreen({super.key});
|
|
|
|
@override
|
|
State<PricingScreen> createState() => _PricingScreenState();
|
|
}
|
|
|
|
class _PricingScreenState extends State<PricingScreen> {
|
|
bool _isYearly = false;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: const Color(0xFF0A0B17),
|
|
appBar: AppBar(
|
|
backgroundColor: Colors.transparent,
|
|
elevation: 0,
|
|
title: Text("Pricing Plans",
|
|
style: GoogleFonts.nunito(color: Colors.white, fontWeight: FontWeight.bold)),
|
|
leading: IconButton(
|
|
icon: const Icon(Icons.arrow_back, color: Colors.white),
|
|
onPressed: () => Navigator.pop(context),
|
|
),
|
|
),
|
|
body: Stack(
|
|
children: [
|
|
// Background Glows
|
|
Positioned(top: 100, left: -50, child: _buildGlowBlob(const Color(0xFF1D8BE0), 150)),
|
|
Positioned(bottom: 50, right: -50, child: _buildGlowBlob(const Color(0xFFEC4899), 150)),
|
|
|
|
SingleChildScrollView(
|
|
padding: const EdgeInsets.all(24),
|
|
child: Column(
|
|
children: [
|
|
Text(
|
|
"Choose Your Plan",
|
|
style: GoogleFonts.nunito(
|
|
color: Colors.white,
|
|
fontSize: 32,
|
|
fontWeight: FontWeight.w800,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
"Unlock premium features and grow your social presence.",
|
|
textAlign: TextAlign.center,
|
|
style: GoogleFonts.nunito(
|
|
color: Colors.white.withOpacity(0.6),
|
|
fontSize: 16,
|
|
),
|
|
),
|
|
const SizedBox(height: 32),
|
|
|
|
// Billing Toggle
|
|
Container(
|
|
padding: const EdgeInsets.all(4),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white.withOpacity(0.05),
|
|
borderRadius: BorderRadius.circular(50),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
_buildToggleButton("Monthly", !_isYearly),
|
|
_buildToggleButton("Yearly (Save 20%)", _isYearly),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 40),
|
|
|
|
// Free Trial
|
|
_buildPricingCard(
|
|
title: "7-Day Free Trial",
|
|
price: "\$0",
|
|
duration: "7 Days",
|
|
desc: "Experience SocialBuddy with no commitment.",
|
|
features: ["Full Platform Access", "All Premium Features", "No Credits Required", "Cancel Anytime"],
|
|
isPopular: false,
|
|
color: Colors.cyanAccent,
|
|
buttonText: "START FREE TRIAL",
|
|
),
|
|
const SizedBox(height: 24),
|
|
|
|
// Basic Buddy
|
|
_buildPricingCard(
|
|
title: "Basic Buddy",
|
|
price: _isYearly ? "\$100" : "\$10",
|
|
duration: _isYearly ? "Year" : "Month",
|
|
desc: "Perfect for individual creators.",
|
|
features: ["1 Social Profile", "Basic Analytics", "Content Scheduling", "Standard Support"],
|
|
isPopular: false,
|
|
color: Colors.blueAccent,
|
|
),
|
|
const SizedBox(height: 24),
|
|
|
|
// Standard Buddy
|
|
_buildPricingCard(
|
|
title: "Standard Buddy",
|
|
price: _isYearly ? "\$500" : "\$50",
|
|
duration: _isYearly ? "Year" : "Month",
|
|
desc: "For growing businesses and influencers.",
|
|
features: ["10 Social Profiles", "Advanced Analytics", "AI Content Generation", "Priority Support", "Team Collaboration (3)"],
|
|
isPopular: true,
|
|
color: const Color(0xFFEC4899),
|
|
),
|
|
const SizedBox(height: 24),
|
|
|
|
// Premium Buddy
|
|
_buildPricingCard(
|
|
title: "Premium Buddy",
|
|
price: _isYearly ? "\$1500" : "\$150",
|
|
duration: _isYearly ? "Year" : "Month",
|
|
desc: "Ultimate solution for agencies.",
|
|
features: ["25 Social Profiles", "White Label Reports", "Dedicated Account Manager", "API Access", "Unlimited Team Members"],
|
|
isPopular: false,
|
|
color: Colors.purpleAccent,
|
|
),
|
|
const SizedBox(height: 40),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildToggleButton(String label, bool isActive) {
|
|
return GestureDetector(
|
|
onTap: () => setState(() => _isYearly = label.contains("Yearly")),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(50),
|
|
gradient: isActive
|
|
? const LinearGradient(colors: [Color(0xFF4361EE), Color(0xFFC026D3)])
|
|
: null,
|
|
color: isActive ? null : Colors.transparent,
|
|
),
|
|
child: Text(
|
|
label,
|
|
style: GoogleFonts.nunito(
|
|
color: isActive ? Colors.white : Colors.white38,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 14,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildPricingCard({
|
|
required String title,
|
|
required String price,
|
|
required String duration,
|
|
required String desc,
|
|
required List<String> features,
|
|
required bool isPopular,
|
|
required Color color,
|
|
String buttonText = "GET STARTED",
|
|
}) {
|
|
return Container(
|
|
width: double.infinity,
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFF1A1D26).withOpacity(0.8),
|
|
borderRadius: BorderRadius.circular(24),
|
|
border: Border.all(
|
|
color: isPopular ? color : Colors.white.withOpacity(0.1),
|
|
width: isPopular ? 2 : 1,
|
|
),
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
if (isPopular)
|
|
Positioned(
|
|
top: 0,
|
|
right: 0,
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
|
|
decoration: BoxDecoration(
|
|
color: color,
|
|
borderRadius: const BorderRadius.only(
|
|
topRight: Radius.circular(22),
|
|
bottomLeft: Radius.circular(24),
|
|
),
|
|
),
|
|
child: const Text(
|
|
"POPULAR",
|
|
style: TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.bold),
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.all(28),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
title,
|
|
style: GoogleFonts.nunito(
|
|
color: Colors.white,
|
|
fontSize: 22,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
desc,
|
|
style: GoogleFonts.nunito(color: Colors.white54, fontSize: 14),
|
|
),
|
|
const SizedBox(height: 24),
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
Text(
|
|
price,
|
|
style: GoogleFonts.nunito(
|
|
color: Colors.white,
|
|
fontSize: 40,
|
|
fontWeight: FontWeight.w800,
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.only(bottom: 8, left: 4),
|
|
child: Text(
|
|
"/$duration",
|
|
style: TextStyle(color: Colors.white.withOpacity(0.5), fontSize: 16),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 24),
|
|
const Divider(color: Colors.white10),
|
|
const SizedBox(height: 24),
|
|
...features.map((f) => Padding(
|
|
padding: const EdgeInsets.only(bottom: 12),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(2),
|
|
decoration: BoxDecoration(
|
|
color: color.withOpacity(0.1),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(Icons.check, color: color, size: 16),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Text(f, style: const TextStyle(color: Colors.white70, fontSize: 14)),
|
|
),
|
|
],
|
|
),
|
|
)),
|
|
const SizedBox(height: 32),
|
|
SizedBox(
|
|
width: double.infinity,
|
|
height: 56,
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(colors: [color, color.withOpacity(0.7)]),
|
|
borderRadius: BorderRadius.circular(16),
|
|
boxShadow: [
|
|
BoxShadow(color: color.withOpacity(0.3), blurRadius: 10, offset: const Offset(0, 4)),
|
|
],
|
|
),
|
|
child: ElevatedButton(
|
|
onPressed: () {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(content: Text("Subscription to $title coming soon!")),
|
|
);
|
|
},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: Colors.transparent,
|
|
shadowColor: Colors.transparent,
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
|
|
),
|
|
child: Text(buttonText,
|
|
style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.white, fontSize: 16)),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildGlowBlob(Color color, double size) {
|
|
return Container(
|
|
width: size,
|
|
height: size,
|
|
decoration: BoxDecoration(
|
|
color: color.withOpacity(0.2),
|
|
shape: BoxShape.circle,
|
|
boxShadow: [
|
|
BoxShadow(color: color.withOpacity(0.4), blurRadius: 100, spreadRadius: 10),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|