Receipt Test

main.dart

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,
            ),
          ],
        ),
      ),
    );
  }
}