Skip to content

Instantly share code, notes, and snippets.

@Maddoxx88

Maddoxx88/pricing_cards.dart

Created August 20, 2020 18:24
Show Gist options
  • Save Maddoxx88/b94ca9499d41db931f00f41091fddb2f to your computer and use it in GitHub Desktop.
Save Maddoxx88/b94ca9499d41db931f00f41091fddb2f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pricing_cards.dart
import 'package:flutter/material.dart';
final Color darkBlue = Colors.white;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final PageController pageCtrl =
PageController(viewportFraction: 0.8, initialPage: 1);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: PageView(
scrollDirection: Axis.horizontal,
controller: pageCtrl,
children: [
AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.easeOutQuint,
margin: EdgeInsets.only(top: 170, bottom: 170),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.blueGrey[50],
border: new Border.all(
color: Color(0xFF888888),
width: 1.0,
style: BorderStyle.solid),
boxShadow: [
BoxShadow(
color: Colors.black87,
blurRadius: 1,
offset: Offset(1, 1))
]),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Basic',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 32.0,
letterSpacing: 5,
fontFamily: 'Poppins',
color: Colors.black87,
),
),
SizedBox(height: 5),
RichText(
textAlign: TextAlign.center,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: '\$ ',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
fontFamily: 'Poppins',
color: Colors.black87,
)),
TextSpan(
text: '19/mo',
style: TextStyle(
fontSize: 56.0,
fontWeight: FontWeight.w900,
letterSpacing: 2,
fontFamily: 'Poppins',
color: Colors.black87,
)),
],
),
),
SizedBox(height: 15),
Text(
'✔️ Basic Support',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w100,
fontFamily: 'Raleway',
color: Colors.black87,
),
),
SizedBox(height: 15),
Text(
'❌ Technical Support',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w100,
fontFamily: 'Raleway',
color: Colors.black87,
),
),
SizedBox(height: 15),
Text(
'❌ Dedicated Support',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w100,
fontFamily: 'Raleway',
color: Colors.black87,
),
),
]),
),
),
AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.easeOutQuint,
margin: EdgeInsets.only(top: 150, bottom: 150, right: 1),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.blueGrey[50],
border: new Border.all(
color: Color(0xFF862e9c),
width: 5.0,
style: BorderStyle.solid),
boxShadow: [
BoxShadow(
color: Colors.black87,
blurRadius: 10,
offset: Offset(5, 5))
]),
child: Padding(
padding: EdgeInsets.only(left: 20, right: 20, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 40, right: 40),
color: Color(0xFF862e9c),
child: Text(
'POPULAR',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
fontFamily: 'Raleway',
color: Colors.white,
),
),
),
SizedBox(height: 5),
Text(
'Pro',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 32.0,
letterSpacing: 5,
fontFamily: 'Poppins',
color: Colors.black87,
),
),
SizedBox(height: 5),
RichText(
textAlign: TextAlign.center,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: '\$ ',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
fontFamily: 'Poppins',
color: Colors.black87,
)),
TextSpan(
text: '49/mo',
style: TextStyle(
fontSize: 56.0,
fontWeight: FontWeight.w900,
letterSpacing: 2,
fontFamily: 'Poppins',
color: Colors.black87,
)),
],
),
),
SizedBox(height: 15),
Text(
'✔️ Basic Support',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w100,
fontFamily: 'Raleway',
color: Colors.black87,
),
),
SizedBox(height: 15),
Text(
'✔️ Technical Support',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w100,
fontFamily: 'Raleway',
color: Colors.black87,
),
),
SizedBox(height: 15),
Text(
'❌ Dedicated Support',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w100,
fontFamily: 'Raleway',
color: Colors.black87,
),
),
Container(
margin: EdgeInsets.all(10),
child: RaisedButton(
onPressed: () {},
color: Color(0xFF862e9c),
child: const Text('Get Started',
style: TextStyle(fontSize: 20)),
),
),
]),
),
),
AnimatedContainer(
duration: Duration(seconds: 1),
curve: Curves.easeOutQuint,
margin: EdgeInsets.only(top: 170, bottom: 170),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.blueGrey[50],
border: new Border.all(
color: Color(0xFF888888),
width: 1.0,
style: BorderStyle.solid),
boxShadow: [
BoxShadow(
color: Colors.black87,
blurRadius: 1,
offset: Offset(1, 1))
]),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Premium',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 32.0,
letterSpacing: 5,
fontFamily: 'Poppins',
color: Colors.black87,
),
),
SizedBox(height: 5),
RichText(
textAlign: TextAlign.center,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: '\$ ',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
fontFamily: 'Poppins',
color: Colors.black87,
)),
TextSpan(
text: '99/mo',
style: TextStyle(
fontSize: 56.0,
fontWeight: FontWeight.w900,
letterSpacing: 2,
fontFamily: 'Poppins',
color: Colors.black87,
)),
],
),
),
SizedBox(height: 15),
Text(
'✔️ Basic Support',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w100,
fontFamily: 'Raleway',
color: Colors.black87,
),
),
SizedBox(height: 15),
Text(
'✔️ Technical Support',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w100,
fontFamily: 'Raleway',
color: Colors.black87,
),
),
SizedBox(height: 15),
Text(
'✔️ Dedicated Support',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.w100,
fontFamily: 'Raleway',
color: Colors.black87,
),
),
]),
),
),
]),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment