DEV Community: Elvis

Apartment listing Detail UI for Beginners with flutter

Elvis — Thu, 15 Sep 2022 14:27:46 +0000

Good to have you here again
In this episode we shall go through the UI above together. I encourage you to check other episodes, for simpler ui designs.

Everything is on github, so you can download and check the code. Only portrait mode was considered but Its completely responsive on different screens.

Before we do a quick analysis of the architecture of the screen, lets look at the folder structure. We have three folders which are: Assets folder (located in the root folder), screens folder (inside lib folder) and widgets folder (also inside lib folder). Then we have the main.dart, where the app is run. The screen we are considering here is the details' screen. We are running this screen from main.dart.

Lets consider the design and how it was achieved.

Lets start with the app bar. For this app, we did not use the app bar widget, we created our custom app bar. If you notice, the screen has gradient and a background image. For flexibility, we did not use app bar widget

We went straight to the body and wrapped the body with a padding.

From the screen, you will notice two type of stack,

The widgets are vertically aligned on each other making it a column
Widgets also overlay on each other making it a Stack

So we started with a column as a direct child of the padding (remember we said the padding wraps the whole body?).
We calculated the screen height and width with media query. This makes it responsive on any screen.

Let consider the first component of the app

In this first component, we have the background image, the overlay for gradient, the app bar, the lease button, the apartment name and address, and the icon and text container.

First we used the stack widget. Like we explained above, the stack widget, takes children widgets that overlay on themselves.

The first child of the stack widget is the background image container, followed by the linear gradient container,

           // background image
              Container(
                height: height / 2,
                width: double.infinity,
                decoration: const BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: AssetImage(
                          'assets/images/details_img.png',
                        ))),
              ),

              // linear gradient
              Container(
                height: height * .6,
                width: double.infinity,
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                      colors: [Colors.black45, Colors.transparent],
                      begin: Alignment.bottomCenter,
                      end: Alignment.topCenter),
                ),
              ),

Then, we have the app bar which we called the header. To position it at the top of the screen, we used positioned widget (stack widgets takes position widget, this is why we had to use stack widget).

           // header
              Positioned(
                left: 0,
                right: 0,
                top: height * 0.06,
                child: Padding(
                  padding: EdgeInsets.all(10),
                  child: Row(
                    mainAxisAlignment: 
              MainAxisAlignment.spaceBetween,
                    children: [
                      CircleIconButton(
                        height: height * 0.05,
                        icon: Icons.arrow_back_ios_new_rounded,
                      ),
                      Row(
                        children: [
                          CircleIconButton(
                            icon: Icons.favorite_border,
                            height: height * 0.05,
                          ),
                          SizedBox(
                            width: width * 0.07,
                          ),
                          CircleIconButton(
                              icon: Icons.bookmark_border,
                              height: height * 0.05)
                        ],
                      ),
                    ],
                  ),
                ),
              ),

Positioned next to the header is the lease button and the apartment name and address

              Positioned(
                bottom: height * 0.22,
                left: 0,
                right: 0,
                child: Center(
                  child: ClipRRect(
                    // Clip it cleanly.
                    borderRadius: BorderRadius.circular(20),

                    child: BackdropFilter(
                      blendMode: BlendMode.src,
                      filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
                      child: Container(
                        padding: const EdgeInsets.all(8),
                        height: MediaQuery.of(context).size.height * 0.08,
                        width: MediaQuery.of(context).size.width * 0.5,
                        decoration: BoxDecoration(
                          color: Colors.grey.withOpacity(0.3),
                        ),
                        alignment: Alignment.center,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: const [
                            Text(
                              'Lease',
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.w900,
                                  fontSize: 16),
                            ),
                            Text(
                              "\$175,000.00",
                              style: TextStyle(
                                  letterSpacing: 1.5,
                                  color: Colors.white,
                                  fontWeight: FontWeight.w900,
                                  fontSize: 16),
                            )
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),

              // apartment address
              Positioned(
                  bottom: height * 0.15,
                  left: 0,
                  right: 0,
                  child: Column(
                    children: const [
                      Text(
                        'WestVille Apartments',
                        style: TextStyle(
                            fontSize: 20,
                            letterSpacing: 2.0,
                            fontWeight: FontWeight.bold,
                            color: Colors.white),
                      ),
                      Text(
                        '3544 NW 24th Street Road',
                        style: TextStyle(
                            fontSize: 14,
                            letterSpacing: 2.0,
                            //fontWeight: FontWeight.bold,
                            color: Colors.white54),
                      ),
                    ],
                  )),

Lastly on the stack is the icontext container. You will notice from the screen that the icontext is in a row. check below;

We created the icon text container as a reusable widget since it repeats three time on the screen. Check the code below;

import 'package:flutter/material.dart';
import 'dart:math' as math;

class IconTextContainer extends StatelessWidget {
  IconTextContainer({Key? key, required this.icon, required this.text})
      : super(key: key);
  IconData icon;
  String text;
  @override
  Widget build(BuildContext context) {
    return Transform(
      //alignment: Alignment.topRight,
      transform: Matrix4.skewY(0.4)..rotateZ(-math.pi / 12),
      child: Container(
        alignment: Alignment.center,
        height: MediaQuery.of(context).size.height * 0.09,
        width: MediaQuery.of(context).size.height * 0.09,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(3),
            color: Colors.black87,
            border: Border.all(color: Colors.grey)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              color: Colors.white,
            ),
            Container(
              // padding: const EdgeInsets.all(8.0),
              child: Text(
                text,
                style: const TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Again we used position widget to position it on the stack, then, use Row widget to horizontally align it. A Row widget takes children widget and align them horizontally.

   // icon and text containers
              Positioned(
                bottom: height * 0.05,
                left: 0,
                right: 0,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    IconTextContainer(text: '3', icon: Icons.hotel_sharp),
                    IconTextContainer(
                        text: '4', icon: Icons.shopping_cart_sharp),
                    IconTextContainer(text: '2500', icon: Icons.window),
                  ],
                ),
              )

Remember we are still in a Column widget? The Stack widget above is the first child.

Let see the other children of the column

For the first container, we have the agent image, details and icon.
The container wraps a row widget. The row widget carries another row widget and an Icon widget as children

 // agent image, details and icon 
          Container(
            // padding: EdgeInsets.all(10),
            height: height * 0.09,
            width: double.infinity,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: const Color(0xFF2B2B2B),
            ),
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // image and text row widget
                  Row(
                    children: [
                      // image
                      Image.asset('assets/images/shelly_img.png'),
                      // column of text widget
                      Padding(
                        padding: const EdgeInsets.all(4),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: const [
                            Text(
                              'Shelly Butcher',
                              style: TextStyle(color: Colors.white),
                            ),
                            Text(
                              'Agent',
                              style: TextStyle(color: Colors.grey),
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                  // icon
                  const Icon(
                    Icons.arrow_forward_ios_outlined,
                    color: Colors.grey,
                  ),
                ]),
          ),

Then we have another column for description and details.
These are text widgets

  // description and details
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: EdgeInsets.symmetric(
                    vertical: MediaQuery.of(context).size.height * 0.01),
                child: Text(
                  'Description',
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
              const Text(
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas ut consectetur integer aliquam integer scelerisque. Nibh malesuada lectus mattis aliquet eget elementum dictum non. Eu, viverra gravida leo vitae non eu laoreet. Egestas lorem amet, diam diam neque vestibulum semper. Dictum fusce tellus eu et viverra ac augue aliquam fusce. Pharetra laoreet arcu vitae interdum id',
                style: TextStyle(color: Colors.white70),
              ),
            ],
          ),

Lastly is the apply button. This button is a container with a text widget as child.

           Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: MediaQuery.of(context).size.height * 0.06,
            margin:
                EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.01),
            // padding: EdgeInsets.only(top: 10),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.topRight,
                    stops: const [1, 1],
                    colors: [Colors.red.shade700, Colors.transparent])),
            child: const Text(
              'Apply',
              style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 18),
            ),
          ),

I know everything may not be clear, I understand. You can always drop your questions. Its my pleasure to help. Go through the code from the link below for more clarity.

Github link

How to build complex UIs with Flutter for beginners — Track Order Screen

Elvis — Thu, 25 Aug 2022 10:19:00 +0000

In this episode we shall be coding another simple UI. Our aim is to help every beginner understand how to analyze and code any UI, both simple and complex.
This is the second screen in this series. You can check the first episode if you want to. Everything is on github.

The project has two folders and two separate files. The folders are screens (contains all the screens or pages) and widget (contains reusable widgets), colors file and main file. All the colors used across the app are in the colors file, the app is ran in the main file

Lets analyze the screen
We have the first row which is the app bar

The app bar has a leading icon and a centered text widget

      AppBar(
        backgroundColor: AppColors.backgroundColor,
        centerTitle: true,
        leading: const Icon(
          Icons.arrow_back_ios_new,
          color: AppColors.lightBlue,
        ),
        foregroundColor: AppColors.darkText,
        elevation: 0,
        title: const Text(
          'Track Order',
          style: TextStyle(color: AppColors.darkText),
        ),
        // leading: Icon(),
      ),

We wrapped the body with a container in order to apply padding to the whole screen.

If you check the content of the screen properly, you will notice that the widgets are vertically aligned. This makes the general content a column widget. Like we defined, Column widgets has children that are vertically aligned.

Lets quickly analyze the content of the body before we look at the code

The first child widget of the column widget is a column. This column has two child text widgets that are aligned to the center.

We created a container widget with a text widget as a child. We created a container so that we can give it full width and align the text to the left. Diagram is below

Next to that is a Row widget of two text widgets. We used main axis alignment to horizontally separate them. Diagram below

Then we have an image with a text at the bottom. For this we created a reusable widget. Diagram below

Lastly is the button. For this, we created a container with a Row of text and icon widgets as children.

That is the general structure of the app. The code is below;

First is the code for 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);
  static const Color inProgressColor = Color(0xFFEBB300);
}

Then the code for the button

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

class ImageAndText extends StatelessWidget {
  ImageAndText({Key? key, required this.image, required this.text})
      : super(key: key);
  String image;
  String text;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
            width: 110,
            height: 90,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                image: DecorationImage(
                    fit: BoxFit.cover, image: AssetImage(image)))),
        const SizedBox(
          height: 10,
        ),
        Text(
          text,
          style: const TextStyle(color: AppColors.lightBlue),
        )
      ],
    );
  }
}

We also have the track order screen

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.backgroundColor,
      appBar: AppBar(
        backgroundColor: AppColors.backgroundColor,
        centerTitle: true,
        leading: const Icon(
          Icons.arrow_back_ios_new,
          color: AppColors.lightBlue,
        ),
        foregroundColor: AppColors.darkText,
        elevation: 0,
        title: const Text(
          'Track Order',
          style: TextStyle(color: AppColors.darkText),
        ),
        // leading: Icon(),
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        width: double.maxFinite,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
// column of text and images
            Column(
              children: [
                // Column of text
               const  SizedBox(
                  height: 40,
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: const [
                    Text(
                      'Your Order is on its way',
                      style: TextStyle(
                          color: AppColors.darkText,
                          fontWeight: FontWeight.bold,
                          fontSize: 25),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    Text('Order will arrive in 3 days',
                        style: TextStyle(
                          fontSize: 16,
                        )),
                  ],
                ),
               const SizedBox(
                  height: 30,
                ),
                // Container Text
                Container(
                  width: double.infinity,
                  child: const Text(
                    'Products',
                    textAlign: TextAlign.left,
                    style: TextStyle(
                        fontSize: 16,
                        color: AppColors.darkText,
                        fontWeight: FontWeight.w500),
                  ),
                ),
                const SizedBox(
                  height: 30,
                ),

                // Row of text
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: const [
                    Text(
                      '#90876532',
                      style: TextStyle(
                          // fontSize: 16,
                          color: AppColors.darkText,
                          fontWeight: FontWeight.w500),
                    ),
                    Text(
                      'In progress',
                      style: TextStyle(color: AppColors.inProgressColor),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 30,
                ),
                // Row
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    // column of image and text
                    ImageAndText(
                        image: 'assets/images/snicker.png',
                        text: 'Nike Sneaker'),
                    ImageAndText(
                        image: 'assets/images/apple.png', text: 'Apple Laptop'),
                    ImageAndText(
                        image: 'assets/images/lady.png', text: 'Lady Shoe')
                  ],
                ),
              ],
            ),

            // container button
            Container(
              width: double.infinity,
              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 15),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: AppColors.lightBlue),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Text(
                    'Container',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        color: AppColors.backgroundColor, fontSize: 20),
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Icon(
                    Icons.arrow_forward,
                    color: AppColors.backgroundColor,
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Lastly is the main file

import 'package:flutter/material.dart';
import 'package:mobile_ui_screen_series/screens/track_order_screen.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        home: TrackOrderScreen());
  }
}

Thanks for reading. Its my pleasure to make sure you understand. You can drop your questions, and if you have any difficult UI mockup, I can guide you on how to go about it.

Github link here

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

Elvis — Mon, 22 Aug 2022 08:38:00 +0000

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.

How to build complex UIs with Flutter for beginners

Elvis — Thu, 18 Aug 2022 03:52:34 +0000

Understanding how to build UIs in flutter can be very confusing for beginners.

In my opinion, Flutter is the easiest framework for building UIs, though there are no drags and drops, every component is coded. I think this is where most beginners find it difficult.

We will be explaining how every single component is built, how to understand UI structures and draw them. We will also make sure they are responsive, that is they can fit to different mobile screens.

We will not be drawing for the web in this series. We will also do a YouTube series on it. I encourage you to stay with us on this series, at the end you will be able to comfortably draw complex UIs on your own.

As we begin the series, you can ask your questions, github link will be made available for download. We will start with a simple screen to complex ones.

Thanks for reading, we will start in the next article.

SOLID: Fundamental Principles of Software Development using PHP (2)

Elvis — Thu, 11 Aug 2022 10:28:00 +0000

This is a continuation of our implementation of SOLID principles using PHP. I encourage you to go through the first part where we implemented the first principle, Single-Responsibility Principle.

In this episode we shall implement the second principle, Open and Closed Principle. At the end of the whole series, we shall be writing real application with clean. Please read it to the end, drop your questions incase if there is any part that needs clarity. Also don’t forget to share. Thank you.

SOLID stands for:

S — Single-Responsibility Principle

O — Open-Closed Principle

L — Liskov Substitution Principle

I — Interface Segregation Principle

D — Dependency Inversion Principle

The Open-Closed principle states that Objects or entities should be open for extension but closed for modification.

In the first part, we created an app that collects shapes, calculate their areas and returns their sum. Assuming, we have other shapes, we will have to modify the areasumcalculator class, which is against the principle.

Our aim here is to ensure that a class or an entity can extended but not modified.

To achieve this, we create an interface that all shapes must follow.

` interface ShapeArea{
public function area();

` // exception, incase a shape that does not implements our interface is provided.
class InvalideShapeException extends Exception
{
public $message;

function __construct($mess = 'Invalid shape')
{
$this->message = $mess;
//return 'This shape is invalid';
}

public function getMyMessage()
{
return $this->message;
}
}`

We will create shape classes that will implement the interface

class Square implements ShapeArea
{
    public $length;

     function __construct($length)
    {
      $this->length = $length;
    }

    public function area()
    {
      $area = $this->length * $this->length;
      return $area;
    }

}

class Circle implements ShapeArea{
    public $radius;

     function __construct($radius)
    {
        $this->radius = $radius;
    }
    public function area()
    {
      $area = pi() * ($this->radius * $this->radius);
       return $area;
    }
}

To test our exception, lets create another shape that doesn't implement shapesurface

class Triangle{
  public $breadth;
  public $height;

  function __construct($breadth,$height)
  {
$this->breadth = $breadth;
$this->height = $height;
  }
   public function myArea()
   {
      $area = 1/2 * ($this->breadth * $this->height);

      return $area;
   }

}

Now lets go back to our areasumcalculator class

class AreaSumCalculator{
    protected $shapes;

     public function __construct($shapes = [])
     {

       $this->shapes = $shapes;
     } 

    public function sum()
    {
        $area = [];
      foreach($this->shapes as $shape)
      {
        if(is_a($shape, 'ShapeArea'))
        {
          $area[] = $shape->area();  
        }
        else{
          throw new InvalideShapeException;
        }



      }
      return array_sum($area);
    }

}

Then the class to class to output the calculated sum

class AreaSumCalculatorOutput{
    public $areasumcalculator;

   public function __construct(AreaSumCalculator $areasumcalculator)
    {
        $this->areasumcalculator = $areasumcalculator;
    }

    public function jsonOutput()
    {
      $data = [
        'sum' => $this->areasumcalculator->sum(),
      ];

      return json_encode($data);
    }
}

Lets create shapes or objects (instance of classes)

$circle = new Circle(10);
$square = new Square(5);

$triangle1 = new Triangle(10,23);
$triangle = new Triangle(1,23);

Create a shape variable to accept an array of the area of shapes (object created)

$shapes1 = [$circle, $square]; $shapes2 = [$triangle1, $triangle];

Lets test our first shapes (circle and square), it implements the interface.

/ calculate the sum of the areas of the shapes

try{

  $area_sum_calculator = new AreaSumCalculator($shapes1); 

  // answer :
/* {
  "sum": 339.1592653589793
}
*/


  // output the sum
$area_sum_output = new AreaSumCalculatorOutput($area_sum_calculator);

// call the output

$json_output = $area_sum_output->jsonOutput();

echo $json_output .'<br>'; 

}catch(InvalideShapeException $e)
{
  echo "Caught my exception: \n ";
  echo $e->getMyMessage();

}

Test the second shape

try{

  $area_sum_calculator = new AreaSumCalculator($shapes2); 

  // answer :
// Caught my exception Invalid shape


  // output the sum
$area_sum_output = new AreaSumCalculatorOutput($area_sum_calculator);

// call the output

$json_output = $area_sum_output->jsonOutput();

//echo $json_output;

}catch(InvalideShapeException $e)
{
  echo "Caught my exception\n";
  echo $e->getMyMessage();

}

Thanks for reading. You can drop your comments, questions or suggestions.

SOLID: Fundamental Principles of Software Development using PHP (1)

Elvis — Wed, 03 Aug 2022 07:40:00 +0000

Software development principles are a must-know for all software engineers that aim to achieve clean codes. Software evolves with time as new features are required, so it is necessary to build a maintainable, reliable and sustainable code.

SOLID principles are five basic principles for object-oriented programming design. They are set of rules to follow when designing a class structured software. These principles puts maintainability and extensibility into consideration as software evolves.

SOLID STANDS FOR :

S — SINGLE-RESPONSILITY PRINCIPLE

O — OPEN-CLOSED PRINCIPLE

L — LISKOV SUBSTITUTION PRINCIPLE

I — INTERFACE SEGREGATION PRINCIPLE

D — DEPENCY INVERSION PRINCIPLE

The SOLID principles were first introduced by the famous Computer Scientist Robert J. Martin (a.k.a Uncle Bob) in his 2000 paper.

Uncle Bob also authors best selling books Clean Code and Architectures, and he is one of the participant of the Agile Alliance.

The concepts of clean concept of clean coding, object-oriented architecture and design patterns are somehow related and complementary.

The purpose of these concepts is “To create understandable, readable and testable code that many developers can collaboratively work on”.

We all explain the five principles one after the other with examples. In this series, we shall explain the first principle :

SINGLE-RESPONSIBILITY PRINCIPLE (SRP)

It states that a class should have one and only one reason to change, meaning a class should have only job.

This means a class should do only one thing. For example, if a data container like Vehicle class or Book class containing fields regarding the entity should change, it should change only because of the data model.

Consider the example below:

Let’s create a app that takes a collection of shapes, calculates and sums up the areas.

Let create two classes, Square and Circle, with their required parameters

class Square

{

public $length;

function __construct($length)

{

$this->length = $length;

}

class Circle

{

public $radius;

function __construct($radius)

{

$this->radius = $radius;

}

Let’s create another class to calculate the area

class AreaSumCalculator {

protected $shapes;

public function __construct($shapes = [])

{

$this->shapes = $shapes;

}

public function sum()
{
foreach ($this->shapes as $shape) {
if (is_a($shape, 'Square')) {
$area[] = pow($shape->length, 2);
} elseif (is_a($shape, 'Circle')) {
$area[] = pi() * pow($shape->radius, 2);
}
}
return array_sum($area);
}

public function jsonOutput()

{

$data = [

‘sum’ => $this->areasumcalculator->sum(),

];

return json_encode($data);

}

// create objects (instance of classes)

$circle = new Circle(10);

$square = new Square(5);

// create a shape variable to accept an array of shapes (object created)

$shapes = [$circle,$square];

$areas = new AreaCalculator($shapes);

echo $areas->jsonOutput($areas);
The issue with this code is that the AreaCalculator handles, the business logic with the output or presentation logic.

If we need to make any change or add a feature like outputting our answer in another form, we will have to alter the AreaCalculator class.

To solve this, you need to create a class to handle the output or presentation and another to handle the summation.

class AreaSumCalculator{

protected $shapes;

public function __construct($shapes = [])

{

print_r($this->shapes);

$this->shapes = $shapes;

}

public function sum()

{

$area = [];

foreach($this->shapes as $shape)

{

if(is_a($shape, ‘Square’))

{

$area[] = $shape->length * $shape->length;

}elseif(is_a($shape, ‘Circle’))

{

$area[] = pi() * ($shape->radius * $shape->radius);

}

// return array_sum($area);

}

return array_sum($area);

}

class AreaSumCalculatorOutput{

public $areasumcalculator;

public function __construct(AreaSumCalculator $areasumcalculator)

{

$this->areasumcalculator = $areasumcalculator;

}

public function jsonOutput()

{

$data = [

‘sum’ => $this->areasumcalculator->sum(),

];

return json_encode($data);

}

// create objects (instance of classes)

$circle = new Circle(10);

$square = new Square(5);

// create a shape variable to accept an array of shapes (object created)

$shapes = [$circle,$square];

// calculate the sum of the areas of the shapes

$area_sum_calculator = new AreaSumCalculator($shapes);

// output the sum

$area_sum_output = new AreaSumCalculatorOutput($area_sum_calculator);

// call the output

$json_output = $area_sum_output->jsonOutput();

//echo $json_output;

With this, you have applied the single-responsibility principle of software design. Thanks for following this first part of the series. You can send me a mail at igieborelvis@gmail.com or drop comments.