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.

zorgonred/Flutter_recreate_skype_ui

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