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
This first Row has two widgets as children, Text(‘My Cart’) widget and an Icon() widget.
Lets see the second row
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
The Container widget takes a Row widget, this Row widget has three children, Icon, Text and Icon widget.
Lets analyze the last Row in My 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,
),
)
],
)
],
),
),
),
),
);
}
}
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,
),
],
),
),
],
),
);
}
}
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);
}
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)