Checkout step 1.

lib/screens/checkout/checkout_state.dart

@@ -28,3 +28,9 @@ class CheckoutProceedState extends CheckoutState {
   @override
   List<Object> get props => [cartProducts];
 }
+
+
+@immutable
+class CheckoutErrorState extends CheckoutState {
+  String toString() => 'CheckoutErrorState';
+}

lib/screens/checkout/views/cart_view.dart

@@ -3,6 +3,16 @@
 // Date: 2020-02-17
 
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:openflutterecommerce/config/theme.dart';
+import 'package:openflutterecommerce/widgets/action_card.dart';
+import 'package:openflutterecommerce/widgets/delivery_method.dart';
+import 'package:openflutterecommerce/widgets/payment_card.dart';
+import 'package:openflutterecommerce/widgets/summary_line.dart';
+import 'package:openflutterecommerce/widgets/widgets.dart';
+
+import '../../wrapper.dart';
+import '../checkout.dart';
 
 class CartView extends StatefulWidget {
 
@@ -17,12 +27,107 @@ class CartView extends StatefulWidget {
 class _CartViewState extends State<CartView> {
   @override
   Widget build(BuildContext context) {
-    return SingleChildScrollView(
-      child: Column(
-        children: <Widget>[
-
-        ],
-      )
+
+    final bloc = BlocProvider.of<CheckoutBloc>(context);
+    final ThemeData _theme = Theme.of(context);
+    final double width = MediaQuery.of(context).size.width - AppSizes.sidePadding*2;
+
+    return BlocListener(
+        bloc: bloc,
+        listener: (context, state) {
+          if (state is CheckoutErrorState) {
+            return Container(
+                padding: EdgeInsets.all(AppSizes.sidePadding),
+                child: Text('An error occured',
+                  style: _theme.textTheme.headline3
+                    .copyWith(color: _theme.errorColor)));
+          }
+          return Container();
+        },
+        child: BlocBuilder(
+          bloc: bloc,
+          builder: (BuildContext context, CheckoutState state) {
+            return SingleChildScrollView(
+              child: Column(
+                children: <Widget>[
+                  OpenFlutterBlockSubtitle(
+                    title: 'Shipping Address',
+                    width: width
+                  ),
+                  OpenFlutterActionCard(
+                    title: 'Jane Doe',
+                    linkText: 'Change',
+                    onLinkTap: ( () => {
+                      BlocProvider.of<CheckoutBloc>(context)
+                          .add(CheckoutShowAddNewCardEvent()),
+                      widget.changeView(changeType: ViewChangeType.Backward)
+                    }),
+                    child: RichText(
+                      text: TextSpan(
+                        text:"3 Newbridge Court Chino Hills, CA 91709, United States",
+                        style: _theme.textTheme.headline5.copyWith(
+                          color: _theme.primaryColor
+                        )
+                      ),
+                      maxLines: 2,
+                    )
+                  ),
+
+                  OpenFlutterBlockSubtitle(
+                    title: 'Payment',
+                    width: width,
+                    linkText: "Change",
+                    onLinkTap: ( () => {
+
+                    }),
+                  ),
+                  OpenFlutterPaymentCard(
+                    cardNumber: "**** **** **** 3947",
+                  ),
+
+                  OpenFlutterBlockSubtitle(
+                    title: 'Delivery Method',
+                    width: width,
+                    linkText: "Change",
+                    onLinkTap: ( () => {
+
+                    }),
+                  ),
+
+                  OpenFlutterDeliveryMethod(
+
+                  ),
+                  Padding(padding: EdgeInsets.only(top: AppSizes.sidePadding*3)),
+
+                  OpenFlutterSummaryLine(
+                    title: 'Order',
+                    summary: '\$112'
+                  ),
+                  Padding(padding: EdgeInsets.only(top: AppSizes.sidePadding)),
+
+                  OpenFlutterSummaryLine(
+                    title: 'Delivery',
+                    summary: '\$15'
+                  ),
+                  Padding(padding: EdgeInsets.only(top: AppSizes.sidePadding)),
+
+                  OpenFlutterSummaryLine(
+                    title: 'Summary',
+                    summary: '\$127'
+                  ),
+                  Padding(padding: EdgeInsets.only(top: AppSizes.sidePadding)),
+
+                  OpenFlutterButton(
+                    title: 'SUBMIT ORDER',
+                    onPressed: ( () => {
+
+                    }),
+                  )
+                ],
+              )
+            );
+          }
+        )
     );
   }
 }

lib/widgets/action_card.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:openflutterecommerce/config/theme.dart';
+
+class OpenFlutterActionCard extends StatelessWidget {
+  final String title;
+  final String linkText;
+  final Function onLinkTap;
+  final Widget child;
+
+  const OpenFlutterActionCard({Key key, 
+    @required this.title, 
+    this.linkText, 
+    this.child, 
+    this.onLinkTap}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    ThemeData _theme = Theme.of(context);
+    final double width = MediaQuery.of(context).size.width - AppSizes.sidePadding*4;
+    return Padding(
+      padding: EdgeInsets.all(AppSizes.sidePadding),
+      child: Container(
+        padding: EdgeInsets.all(AppSizes.sidePadding),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.all(Radius.circular(AppSizes.imageRadius)),
+          color: AppColors.white,
+          boxShadow: [BoxShadow(
+              color: AppColors.lightGray.withOpacity(0.3),
+              blurRadius:  AppSizes.imageRadius,
+              offset: Offset(0.0,  AppSizes.imageRadius)
+            )
+          ]
+        ),
+        child: Column(children: <Widget>[
+          Row(children: <Widget>[
+            Container(
+              width: width/3*2,
+              child: Text(title, 
+                style: _theme.textTheme.headline5.copyWith(
+                  color: _theme.primaryColor
+                )
+              )
+            ),
+            this.linkText != null ?
+              Container(
+                alignment: Alignment.centerRight,
+                width: width/3,
+                child: InkWell(
+                  onTap: ( () => {
+                    this.onLinkTap()
+                  }),
+                  child: Text(linkText,
+                    style: _theme.textTheme.headline5.copyWith(
+                      color: _theme.accentColor
+                    )),
+                  )
+                )
+              : Container()
+          ],),
+          Container(
+            padding: EdgeInsets.symmetric(vertical: AppSizes.linePadding*2),
+            child: this.child
+          )
+        ],)
+      )
+    );
+  }
+}

lib/widgets/block_subtitle.dart

@@ -0,0 +1,59 @@
+// Header of the block widget with title and description
+// Author: openflutterproject@gmail.com
+// Date: 2020-02-06
+
+import 'package:flutter/material.dart';
+import 'package:openflutterecommerce/config/theme.dart';
+
+class OpenFlutterBlockSubtitle extends StatelessWidget {
+  final double width;
+  final String title;
+  final String linkText;
+  final Function onLinkTap;
+
+  const OpenFlutterBlockSubtitle({Key key, this.width, 
+    this.title, this.linkText, this.onLinkTap}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    ThemeData _theme = Theme.of(context);
+    double rightLinkWidth = 100;
+    return Container(
+      padding: EdgeInsets.only(top: AppSizes.sidePadding, 
+        left: AppSizes.sidePadding),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: <Widget> [
+          Row(
+            children: <Widget>[
+              Container(
+                width: this.width - rightLinkWidth,
+                child: Text(this.title,
+                  style: _theme.textTheme.headline3.copyWith(
+                    fontWeight: FontWeight.bold,
+                    color: _theme.primaryColor
+                  )
+                )
+              ),
+              this.linkText != null ?
+                InkWell(
+                  onTap: (() => { this.onLinkTap() }),
+                  child: Container(
+                    width: rightLinkWidth,
+                    child: Align(alignment: Alignment.centerRight,
+                      child: Text(this.linkText,
+                        style: _theme.textTheme.headline3.copyWith(
+                          color: _theme.accentColor
+                        )
+                      )
+                    )
+                  )
+                )
+                :Container()
+            ],
+          )
+        ]
+      )
+    );
+  }
+}

lib/widgets/delivery_method.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:openflutterecommerce/config/theme.dart';
+
+class OpenFlutterDeliveryMethod extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData _theme = Theme.of(context);
+    final double width = MediaQuery.of(context).size.width;
+    final double widgetWidth = (width)/3;
+    final double height = 90;
+    return Container(
+      width: width,
+      height: height,
+      padding: EdgeInsets.only(left: AppSizes.sidePadding,
+        top: AppSizes.sidePadding
+      ),
+      child: Row(children: <Widget>[
+        buildElement("assets/images/checkout/fedex.png",
+          '2-3 days', _theme, widgetWidth, height),
+        buildElement("assets/images/checkout/usps.png",
+          '2-3 days', _theme, widgetWidth, height),
+        buildElement("assets/images/checkout/dhl.png",
+          '2-3 days', _theme, widgetWidth, height),
+      ],),
+    );
+  }
+
+  Widget buildElement(String assetImage, String title, ThemeData _theme, double width, double height){
+    return Padding(
+      padding: EdgeInsets.only(right: AppSizes.sidePadding),
+      child: Container(
+        width: width - AppSizes.linePadding*2-AppSizes.sidePadding,
+        height: height,
+        padding: EdgeInsets.all(AppSizes.linePadding),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.all(Radius.circular(AppSizes.imageRadius)),
+          color: AppColors.white,
+          boxShadow: [BoxShadow(
+              color: AppColors.lightGray.withOpacity(0.3),
+              blurRadius:  AppSizes.imageRadius,
+              offset: Offset(0.0,  AppSizes.imageRadius)
+            )
+          ]
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: <Widget>[
+            Container(
+              padding: EdgeInsets.all(AppSizes.sidePadding),
+              child: Image.asset(assetImage, width: 61,),
+            ),
+            Text(title,
+              style: _theme.textTheme.bodyText2.copyWith(
+                color: _theme.primaryColorLight
+              ))
+          ],),
+      )
+    );
+  }
+}

lib/widgets/payment_card.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:openflutterecommerce/config/theme.dart';
+
+class OpenFlutterPaymentCard extends StatelessWidget {
+  final String cardNumber;
+
+  const OpenFlutterPaymentCard({Key key, this.cardNumber}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData _theme = Theme.of(context);
+    return Container(
+      padding: EdgeInsets.all(AppSizes.sidePadding),
+      child: Row(children: <Widget>[
+        Container(
+          width: 64,
+          height: 38,
+          color: AppColors.white,
+          child: Image.asset("assets/images/checkout/mastercard.png", height: 38),
+        ),
+        Container(
+          padding: EdgeInsets.only(left: AppSizes.sidePadding),
+          child: Text(cardNumber,
+            style: _theme.textTheme.headline5.copyWith(
+              color: _theme.primaryColor
+            )),)
+      ],)
+    );
+  }
+}