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