Flutter UI Challenge: Skype Mobile App

These Flutter re-creations will be my attempts to recreate an app UI or design using the Flutter framework.

This challenge involves the chats screen on the Android Skype app. Note that the focus will be on the UI rather than actually fetching messages.

Getting Started

The Skype chat screen consists of

  1. An AppBar with a notification action , avatar action, search action , and vertical menu.
  2. A Bottom Navigation bar with a “chats” item to view all conversations, a “calls” item and “contacts” item.
  3. A FloatingActionButton for multiple purposes.

Setting up the Project

Let’s make a Flutter project named skype_ui and remove all the default code leaving just a blank screen with the default app bar.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Skype"),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[],
),
),
);
}
}

The AppBar

The AppBar has the notification action, the avatar with the user’s photo and a further two actions: Search and a vertical menu.

Adding that to the AppBar

appBar: new AppBar(
centerTitle: true,
leading: IconButton(
icon: Icon(
Icons.notifications_none,
color: Colors.black,
),
onPressed: null),
title: CircleAvatar(),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Icon(Icons.search)),
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Icon(Icons.more_vert),
)
],
),

This is the result of the code (I have omitted the photo):

The Bottom Navigation Bar

A material widget that’s displayed at the bottom of an app for selecting among a small number of views. As stated, here we have a “chats” item to view all conversations, a “calls” item and “contacts” item.

bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Color.fromRGBO(0, 120, 212, 0.8),
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.message),
title: Text('Chats'),
),
BottomNavigationBarItem(
icon: Icon(Icons.call),
title: Text('Calls'),
),
BottomNavigationBarItem(
icon: Icon(Icons.contacts),
title: Text('Contacts'),
),
],
onTap: null,
),

Floating Action Button

The Floating Action Button changes depending on which page is on screen.

First add a FloatingActionButton in the Scaffold.

floatingActionButton: FloatingActionButton(
onPressed: () {},
child: pageIcon,
backgroundColor: Color.fromRGBO(0, 120, 212, 0.8),
),

The “pageIcon” field simply stores which icon to display because we need to change which icon is displayed according to the screen displayed. The variable “pageIcon” is declared here:

class _MyHomePageState extends State<MyHomePage> {

var pageIcon = Icon(FontAwesomeIcons.pencilAlt);


@override

The Chats Screen

The Chat Screen has a list of messages we need to display. To make a list of messages, we make use of the ListView.builder() to construct our items.

Let’s take a look at the list item for the chat screen.

The outer widget is a row of one icon and another row

Inside the second row is a column consisting of one row and one text widget.

The row has the title and message date.

I created a separate Dart file with the list and then imported the class into the original main Dart file.

import 'package:flutter/material.dart';

class Packages extends StatefulWidget {
@override
_PackagesState createState() => _PackagesState();
}

class _PackagesState extends State<Packages> {
var messages_list = [
{
"name": "Daniel",
"recent": "newest list",
"date": "2019/05/16",
},
{
"name": "Xavier",
"recent": "Hello",
"date": "2019/05/16",
},
{
"name": "Marcelo",
"recent": "Thank you",
"date": "2019/05/16",
},
{
"name": "Diego",
"recent": "Bye",
"date": "2019/05/16",
},
];

@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: messages_list.length,
itemExtent: 100.0,
itemBuilder: (BuildContext context, int index) {
return Single_pack(
message_name: messages_list[index]['name'],
message_recent: messages_list[index]['recent'],
message_date: messages_list[index]['date'],
);
});
}
}

class Single_pack extends StatelessWidget {
final message_name;
final message_recent;
final message_date;

Single_pack({this.message_name, this.message_recent, this.message_date});

@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Icon(
Icons.account_circle,
size: 64.0,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
message_name,
style: TextStyle(
fontWeight: FontWeight.w300, fontSize: 20.0),
),
Text(
message_date,
style: TextStyle(color: Colors.black45),
),
],
),
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
message_recent,
style: TextStyle(
color: Colors.black45, fontSize: 16.0),
),
),
],
),
],
),
),
)
],
),
),
Divider(),
],
);
}
}

The complete example is hosted on GitHub.

Thank you for reading! Feel free to make any other suggestions or recommendations for future challenges. Leave a few claps if you enjoyed it !

--

--

--

My aim is to document my journey as a Software Developer. Writing as I go along. To enforce new knowledge in my mind and to share with others !

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The 4 use cases for webhook APIs

OpenHAB 3 and Alexa

Invoice Compliance Solution

SYSTEM DEVELOPMENT LIFE CYCLE (SDLC) WATER FALL:-

How Workflow Automation is Changing the Back Office

ForVag com Cable kkl 409.1

Thinking about a career in Software Engineering?

Day 3 — What is StatefulWidget and an example of how it works

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniel Xav De Oliveira

Daniel Xav De Oliveira

My aim is to document my journey as a Software Developer. Writing as I go along. To enforce new knowledge in my mind and to share with others !

More from Medium

I will do configure and published your codecanyon projects

Flutter, Android app, Codecanyon

How to Configure Auto-Capitalization Behavior in Flutter’s Text Entry Fields?

Flutter platform adoptive User Interface on android and IOS both

Using FadeInImage widget in Flutter