DEV Community

Cover image for How to build complex UIs with Flutter for beginners — Cart Screen
Elvis
Elvis

Posted on

How to build complex UIs with Flutter for beginners — Cart Screen

cart screen

You can check the introduction to this series here. Our aim is to understand how to analyze any mobile app mock up and build it responsively, from beginner’s to advance’ level.

We are starting with a relatively simple screen, the cart screen.

Mobile app mockups like we have above usually consists Rows and Columns, understanding how to identify them is the foundation for building any mock up. In flutter we describe them as widgets. Lets first understand what Row and Column widget is.

In simple terms, a Row is a widget that takes other widgets as children and align them horizontally. Column widget also accept other widgets as children but align them vertically.

Lets divide my cart page into Rows and Widget

Let take the first Row

first row on the cart screen

This first Row has two widgets as children, Text(‘My Cart’) widget and an Icon() widget.

Lets see the second row

second row on the cart screen

The second Row too has children widgets which are a Row and a Container widget.

If you notice, in My Cart screen, all the Row widgets are aligned vertically, or siting vertically on each other, this makes the general structure a Column widget.

For better understanding, lets analyze the second Row above. It has two children widgets which are a Row and a Container.

The Row widget has two children, Image and a Column widget

image and column

The Container widget takes a Row widget, this Row widget has three children, Icon, Text and Icon widget.

Container with a child row widget

Lets analyze the last Row in My Cart Screen

last row on the cart screen

This Row also has two children, a Column and a Container widget. The Column widget has two Text widgets. The Container widget has a Text widget as a child.

I will drop the github link for the complete code. Everything on the Cart screen was created from scratch, including buttons. The colors used are hex colors. There are two folders, screens and widgets ( re-usable widgets are written here), were the colors file and then the main file where the project is ran.

Here is the cart screen page

import 'package:flutter/material.dart';
import 'package:mobile_ui_screen_series/colors.dart';
import 'package:mobile_ui_screen_series/widgets/my_cart_items_constainer.dart';

class MyCartScreen extends StatelessWidget {
  const MyCartScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: double.maxFinite,
        color: AppColors.myCartBackgroundColor,
        child: Center(
          child: Container(
            decoration: BoxDecoration(
                color: AppColors.backgroundColor,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(25),
                    topRight: Radius.circular(25))),
            padding: EdgeInsets.all(10),
            width: 400,
            height: 450,
            child: Column(
              children: [
                const SizedBox(
                  height: 30,
                ),
                // row of text and icon
                Row(
                  children: const [
                    Expanded(
                      child: Center(
                        child: Text(
                          'My Cart',
                          style: TextStyle(
                              color: AppColors.darkText,
                              fontSize: 20,
                              fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                    Icon(
                      Icons.close,
                      color: AppColors.lightBlue,
                      size: 30,
                    ),
                  ],
                ),

                // column of image, text and button
                SizedBox(
                  height: 20,
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    MyCartItemsContainer(
                        image: 'assets/images/snicker.png',
                        itemName: 'Nike Sneaker',
                        itemPrice: 'NGN250,000',
                        itemQuantity: '2'),
                    MyCartItemsContainer(
                        image: 'assets/images/apple.png',
                        itemName: 'Apple Laptop',
                        itemPrice: 'NGN350,000',
                        itemQuantity: '1'),
                    MyCartItemsContainer(
                        image: 'assets/images/lady.png',
                        itemName: 'Nike Sneaker',
                        itemPrice: 'NGN50,000',
                        itemQuantity: '1')
                  ],
                ),
                SizedBox(
                  height: 50,
                ),
                // row of text and button
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    // column of text
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Total',
                          style: TextStyle(
                              fontSize: 16, color: AppColors.lightBlue),
                        ),
                        Text(
                          'NGN750,000',
                          style: TextStyle(
                              color: AppColors.darkText,
                              fontSize: 20,
                              fontWeight: FontWeight.bold),
                        )
                      ],
                    ),
                    // button
                    Container(
                      padding: EdgeInsets.all(15),
                      width: 150,
                      height: 50,
                      decoration: BoxDecoration(
                          color: AppColors.lightBlue,
                          borderRadius: BorderRadius.circular(25)),
                      child: Text(
                        'Checkout',
                        style: TextStyle(
                            color: AppColors.backgroundColor,
                            fontWeight: FontWeight.bold),
                        textAlign: TextAlign.center,
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Enter fullscreen mode Exit fullscreen mode

You will notice that the second Row ( the image is above) is repeated three times. So we created a widget in the widgets folder and added it to the cart screen page as a reusable widget.

import 'package:flutter/material.dart';
import 'package:mobile_ui_screen_series/colors.dart';

class MyCartItemsContainer extends StatelessWidget {
  MyCartItemsContainer(
      {Key? key,
      required this.image,
      required this.itemName,
      required this.itemPrice,
      required this.itemQuantity})
      : super(key: key);
  String image;
  String itemName;
  String itemPrice;
  String itemQuantity;
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 20),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          //a  row of image and text
          Row(
            children: [
              Image(fit: BoxFit.cover, image: AssetImage(image)),
              SizedBox(
                width: 15,
              ),
              Column(
                children: [
                  Text(
                    itemName,
                    style: TextStyle(
                        color: AppColors.lightBlue,
                        fontSize: 16,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Text(
                    itemPrice,
                    style: TextStyle(
                      color: AppColors.darkText,
                      fontSize: 16,
                      //fontWeight: FontWeight.bold
                    ),
                  )
                ],
              ),
            ],
          ),
          // button
          Container(
            padding: EdgeInsets.all(8),
            width: 100,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                border: Border.all(color: AppColors.lightBlue)),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Icon(
                  Icons.remove,
                  size: 15,
                  color: AppColors.lightBlue,
                ),
                Text(
                  itemQuantity,
                  style: TextStyle(
                    fontSize: 20,
                    color: AppColors.lightBlue,
                  ),
                ),
                Icon(
                  Icons.add,
                  size: 15,
                  color: AppColors.lightBlue,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Enter fullscreen mode Exit fullscreen mode

Lastly, we have the colors file

import 'package:flutter/material.dart';

class AppColors {
  static const Color backgroundColor = Color(0xFFFFFFFF);
  static const Color lightBlue = Color(0xFF4C9EEB);
  static const Color darkText = Color(0xFF14171F);
  static const Color myCartBackgroundColor = Color(0xFfE5E5E5);
}

Enter fullscreen mode Exit fullscreen mode

We shall be drawing other screens. Our focus in this first episode is not responsiveness but how to identify Column and Row widgets.

Its our pleasure to teach, so you can drop any question and If you need any personal assistance, you can request for our mail.

Download the code : Github link.

Pls follow for more episodes.

Top comments (0)