July 21, 2020

Dialer Screen: Basic UI design in Flutter

By Mohit Agrawal

To become an expert, master the basics first

Introduction

Hello 👋 , this is going to be another basic UI design tutorial in the Flutter. In this tutorial, I will show you how to design dialer UI ( Clone of Samsung dialer ) in the Flutter. You will learn the basic widgets like Row, Column, Expanded, CircleAvatar, and many more. Let’s get started đŸŠčđŸ».

Implementation

Design approach

In one of my recent Flutter tutorial, I have discussed the Row and Column design approach in detail. I recommend you to check that as well.

In this type of UI design approach, we try to break the UI in simple Rows and Columns as much as possible. Now let’s take our alarm app UI design. If you analyze the design carefully then you will find that all the widgets are vertically stacked on each other. Check out the below image for more understanding.

dialer_flutter_ui_1
Breaking the UI in Rows and Columns

Let’s code

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        //color: Colors.red,
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Colors.black54, Colors.red],
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
          )
        ),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(0, 60, 0, 50),
          child: Column(
            //crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Text('Calling...', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 16),),
              Padding(
                padding: const EdgeInsets.only(top: 60),
                child: Text('Siya Kholer', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 30),),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 2),
                child: Text('Home +91 847389293', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 16),),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 10),
                child: CircleAvatar(
                  radius: 70,
                  child: ClipOval(
                    child: Image.asset('images/girl.jpg', height: 150, width: 150, fit: BoxFit.cover,),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(50.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Column(
                      children: <Widget>[
                        Icon(Icons.add, color: Colors.grey, size: 40),
                        Text('Add call', style: TextStyle(color: Colors.grey),)
                      ],
                    ),
                    Column(
                      children: <Widget>[
                        Icon(Icons.videocam, color: Colors.grey, size: 40),
                        Text('Video cal', style: TextStyle(color: Colors.grey),)
                      ],
                    ),
                    Column(
                      children: <Widget>[
                        Icon(Icons.bluetooth, color: Colors.white, size: 40),
                        Text('Bluetooth', style: TextStyle(color: Colors.white),)
                      ],
                    ),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(50, 0, 50, 0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Column(
                      children: <Widget>[
                        Icon(Icons.volume_up, color: Colors.green, size: 40),
                        Text('Speaker', style: TextStyle(color: Colors.white),)
                      ],
                    ),
                    Column(
                      children: <Widget>[
                        Icon(Icons.mic_off, color: Colors.grey, size: 40),
                        Text('Mute', style: TextStyle(color: Colors.grey),)
                      ],
                    ),
                    Column(
                      children: <Widget>[
                        Icon(Icons.dialpad, color: Colors.white, size: 40),
                        Text('Keypad', style: TextStyle(color: Colors.white),)
                      ],
                    ),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 40),
                child: Container(
                  height: 70, width: 70,
                  child: Icon(Icons.phone, color: Colors.red, size: 40,),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(Radius.circular(35))
                  ),
                ),
              ),
              Expanded(child: Container())
            ],
          ),
        ),
      )
    );
  }
}

To design this I am taking a Container widget as a parent and adding the Column widget as its child.

Let me know in the comment section if you are getting any issue.

Subscribe YouTube: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!