Design alarm app UI in Flutter

To become an expert in Flutter, start with the basics first.

Introduction

This is another basic UI design tutorial in Flutter. Today I will show you how to design a basic alarm app UI using some simple widgets like Row, Column, Text, Stack, Circle Avatar, and Icons.

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.

Let’s code

Create a new Flutter project in android studio. And copy-paste the code for main.dart.

import 'package:flutter/cupertino.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: Stack(
        children: <Widget>[
          Container(
            color: Color.fromRGBO(208, 208, 208, 0.5),
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Container(height: 1, width: 1,),
                    Padding(
                      padding: const EdgeInsets.only(right: 30,top: 50),
                      child: CircleAvatar(
                        radius: 20,
                        child: ClipOval(child: Image.asset('images/girl.jpg', height: 50, width: 50, fit: BoxFit.cover,),),
                      ),
                    )
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 30, bottom: 18),
                  child: Text('Good Morning!!!', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),),
                ),
                Text('Mon 12 May 2021', style: TextStyle(fontSize: 18, color: Colors.black54),),
                Padding(
                  padding: const EdgeInsets.all(50),
                  child: Image.asset('images/clock.png', scale: 3, color: Colors.black,),
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 19,right: 19),
                  child: Container(
                    height: 100,
                    child: Padding(
                      padding: const EdgeInsets.all(19.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                            Text('USA', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),),
                            Text('New York', style: TextStyle(fontSize: 25, color: Colors.black54),)
                          ],),
                          Text('8:00 AM', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),)
                        ],
                      ),
                    ),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(20))
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 19,right: 19, top: 13),
                  child: Container(
                    height: 100,
                    child: Padding(
                      padding: const EdgeInsets.all(19.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text('India', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),),
                              Text('Pune', style: TextStyle(fontSize: 25, color: Colors.black54),)
                            ],),
                          Text('11:00 AM', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),)
                        ],
                      ),
                    ),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.all(Radius.circular(20))
                    ),
                  ),
                )
              ],
            ),
          ),
          Positioned(
            right: 1, bottom: 1,
            child: Padding(
              padding: const EdgeInsets.all(29.0),
              child: Container(
                height: 60, width: 60,
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.all(Radius.circular(24)),
                  gradient: LinearGradient(colors: [Colors.blue, Color.fromRGBO(0, 41, 102, 1)])
                ),
                child: Icon(Icons.add, color: Colors.white60,),
              ),
            ),
          )
        ],
      )
    );
  }
}

If you are facing any issue while getting the expected result then let me know it in the comment section.

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!!!