Skip to content

Instantly share code, notes, and snippets.

@b-cancel
Last active December 29, 2020 21:33
Show Gist options
  • Save b-cancel/73ba50db7a5a82303380a51847dc1390 to your computer and use it in GitHub Desktop.
Save b-cancel/73ba50db7a5a82303380a51847dc1390 to your computer and use it in GitHub Desktop.
Receipt Test
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
double totalHeight;
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Receipt Test',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
);
}
}
class Home extends StatelessWidget {
//final double goldenRatio = 1.61803398875;
final double small = 0.381966;
Widget build(BuildContext context) {
totalHeight = MediaQuery.of(context).size.height;
TextStyle title = TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
);
String lorem =
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. ";
return Scaffold(
body: Body(
title: title,
lorem: lorem,
),
);
}
}
class Body extends StatelessWidget {
Body({
Key key,
@required this.title,
@required this.lorem,
}) : super(key: key);
final TextStyle title;
final String lorem;
@override
Widget build(BuildContext context) {
double radius = 16;
double small = 0.381966;
String lengthy = "\n\n\nn\n\n\n\n\n\n\n\n\n\nend";
return Column(
children: [
Expanded(
child: SafeArea(
bottom: false,
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
),
child: Padding(
padding: const EdgeInsets.only(
bottom: 24,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(
bottom: 8.0,
),
child: Text(
"1 | Pick Your Plan",
style: title,
),
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
APlan(
name: "CORE",
description: lorem,
),
APlan(
isSelected: true,
name: "PLUS",
description: lorem + lorem,
),
APlan(
name: "PRO",
description: lorem + lorem + lorem,
),
],
),
Padding(
padding: const EdgeInsets.only(
top: 16,
bottom: 8,
),
child: Text(
"2 | Pick Monthly Add-Ons",
style: title,
),
),
Text("yada yada"),
Padding(
padding: const EdgeInsets.only(
top: 16,
bottom: 8,
),
child: Text(
"3 | Pick Your One Time Add-Ons",
style: title,
),
),
Text("yada yada"),
],
),
),
),
),
),
),
Container(
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.only(
topRight: Radius.circular(radius),
topLeft: Radius.circular(radius),
),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0.0, 0.75),
),
],
),
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.only(
topRight: Radius.circular(radius),
topLeft: Radius.circular(radius),
),
onTap: () {
showModalBottomSheet<void>(
enableDrag: true,
isScrollControlled: true, //makes it full screen
backgroundColor: Colors.transparent,
context: context,
builder: (BuildContext context) {
return Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
child: Container(
color: Colors.transparent,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
alignment: Alignment.bottomCenter,
child: Column(
children: [
Expanded(
child: GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: Container(
color: Colors.transparent,
child: SizedBox.expand(),
),
),
),
Container(
height: (1 - small) * totalHeight,
child: CustomBottomSheet(
radius: radius,
lengthy: lengthy,
),
),
],
),
),
),
);
},
);
},
child: SafeArea(
top: false,
child: CheckoutRibbon(
radius: radius,
),
),
),
),
),
],
);
}
}
class CustomBottomSheet extends StatefulWidget {
const CustomBottomSheet({
Key key,
@required this.radius,
@required this.lengthy,
}) : super(key: key);
final double radius;
final String lengthy;
@override
_CustomBottomSheetState createState() => _CustomBottomSheetState();
}
class _CustomBottomSheetState extends State<CustomBottomSheet> {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
verticalDirection: VerticalDirection.up,
children: [
Expanded(
child: ListView(
shrinkWrap: false,
children: [
SizedBox(
height: 24,
),
AppTile(
title: "Wordpress PLUS",
features: [
Feature("End User Support", "58"),
Feature("24/7 Support", "134"),
Feature("End User Support", "58"),
],
),
SizedBox(
height: 16,
),
AppTile(
title: "Shopify CORE",
features: [
Feature("End User Support", "58"),
Feature("Extra Back Ups", "58"),
Feature("24/7 Support", "134"),
Feature("End User Support", "58"),
Feature("End User Support", "58"),
Feature("Extra Back Ups", "58"),
Feature("24/7 Support", "134"),
Feature("End User Support", "58"),
],
),
SizedBox(
height: 24,
),
],
),
),
CheckoutSummary(radius: widget.radius),
],
),
),
CheckoutButton(radius: widget.radius),
],
);
}
}
class Feature {
String name;
String price;
Feature(String name, String price) {
this.name = name;
this.price = price;
}
}
class AppTile extends StatelessWidget {
AppTile({
@required this.title,
@required this.features,
});
final String title;
final List<Feature> features;
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
Divider(
color: Colors.black,
),
],
),
),
Column(
children: List.generate(
features.length,
(index) {
return ListTile(
title: Text("- " + features[index].name),
trailing: Text("\$" + features[index].price),
);
},
),
),
],
),
),
);
}
}
class ExpandingCloser extends StatelessWidget {
const ExpandingCloser({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Expanded(
child: GestureDetector(
onTap: () {
Navigator.of(context).maybePop();
},
),
);
}
}
class CheckoutSummary extends StatelessWidget {
const CheckoutSummary({
Key key,
@required this.radius,
}) : super(key: key);
final double radius;
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(radius),
topLeft: Radius.circular(radius),
),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0.0, .75),
),
],
),
child: Padding(
padding: const EdgeInsets.all(16),
child: Text(
"Checkout Summary",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
),
);
}
}
class CheckoutButton extends StatelessWidget {
const CheckoutButton({
Key key,
@required this.radius,
}) : super(key: key);
final double radius;
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54,
blurRadius: 15.0,
offset: Offset(0.0, 0.75),
),
],
),
child: SafeArea(
top: false,
child: CheckoutRibbon(
radius: radius,
isCheckingOut: true,
),
),
);
}
}
class CheckoutRibbon extends StatelessWidget {
const CheckoutRibbon({
Key key,
@required this.radius,
this.isCheckingOut: false,
}) : super(key: key);
final double radius;
final bool isCheckingOut;
@override
Widget build(BuildContext context) {
return DefaultTextStyle(
style: TextStyle(
color: isCheckingOut ? Colors.black : Colors.white,
),
child: Padding(
padding: EdgeInsets.all(radius),
child: Row(
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.only(
right: 8.0,
),
child: Text(
"\$234",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 32,
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("per"),
Text("month"),
],
)
],
),
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: IgnorePointer(
ignoring: isCheckingOut == false,
child: RaisedButton(
color:
isCheckingOut ? ThemeData.light().primaryColor : null,
onPressed: () {
//of
Navigator.of(context).pop();
//STRIPE
showDialog<void>(
context: context,
barrierDismissible: true,
builder: (BuildContext context) {
return AlertDialog(
title: Text('STRIPE POP UP HERE'),
);
},
);
},
child: Text(
isCheckingOut ? "Checkout" : "View Cart",
style: TextStyle(
color: isCheckingOut ? Colors.white : Colors.black,
),
),
),
),
),
),
],
),
),
);
}
}
class APlan extends StatelessWidget {
const APlan({
@required this.name,
this.isSelected: false,
@required this.description,
Key key,
}) : super(key: key);
final String name;
final String description;
final bool isSelected;
@override
Widget build(BuildContext context) {
return Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: isSelected ? Colors.black : Colors.transparent,
),
),
padding: EdgeInsets.symmetric(
horizontal: 8,
vertical: 8,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
Text(
description,
),
],
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment