DEV Community: Motabar Javaid

FlutterFire: Authentication Made Easy

Motabar Javaid — Sat, 17 Sep 2022 08:35:17 +0000

Firebase probably is a popular and by far the most widely used backend with Flutter. In this series of FlutterFire, we’ll be covering everything one needs to know about Flutter Firebase Integration and everything one might need if they plan on using Firebase as a backend for their Flutter Applications.

Starting with this article, where we’ll be taking a look at how we can integrate Firebase User Authentication in our Flutter Apps.

User Authentication is one of the crucial parts of a Flutter Application. There are plenty of ways you can do this with Firebase i-e; Anonymous Sign-In, Email, and Password, Google Sign-In, etc. In this tutorial, we’ll be going through the anonymous sign-in and signing in using email and password.

Why choose Firebase?

Firebase goes very well with Flutter and is very reliable. If you’ve had a chance to read the official Flutter documentation, you’ll find a section dedicated to the Firebase documentation guide with Flutter. You can check that out here.

Without any further ado, let’s take a look at the diagram so we can understand and remove the complexity of its layout structure altogether.

Let’s start off with breaking down the figure. With MyApp being the root of our application, the Wrapper widget sits under it. That Wrapper widget is responsible for showing the different screens to the user based on the login status of the user. For instance, we would want to show the homeScreen only in the case where the user is logged in and otherwise we would want to show the login or the register screen.

After creating the base Flutter Project, let’s create a Firebase Project and link the firebase project to our project. There are two ways you can do this: By going to the firebase console and manually setting up the project and then placing the services.json file in the required directory or by using Firebase Command Line Interface for Flutter called FlutterFire CLI. To make things easier, we’ll set up the project using FlutterFire CLI. Assuming you have FlutterFire installed (check guide), Inside the project directory, type the following command:

flutterfire configure

After logging in to your google account, it’ll show you the list of all the firebase projects you have and at the very end, give you an option to create a new project. While creating a new project, it’ll ask you for a name that you want to set for your project.

After that, you’ll be presented with a list and asked for which platforms you want to create the project. And that is pretty much it.

The rest will be handled by FlutterFire itself! No need to download any additional files and struggle to place them in the right directory.

Now that our project is configured with Firebase, let’s start building and take a look at how different pages will look.

For the homesceen, we’ll have an app bar showing the title of our application. In the body, We’ll have a column containing a text widget and an elevated button which will be used to log the user out of the application.

As for the RegisterScreen, we’ll have an app bar showing the title of the screen with a button to switch to the loginScreen. In the body, We’ll be taking the username, email, and password of the user and registering them on firebase using the register button.

The LoginScreen is pretty much like the RegisterScreen.In this one,we’ll have an app bar showing the title of the screen with a button to switch to the RegisterScreen. In the body, We’ll be taking the email, and password of the user and sign them into the application (If they already have registered). If not, we’ll ask them to register first.

Nothing too fancy, right? Well, This is where the fun part begins. Let’s jump into the Flutter side of things now.

Starting off with the main.dart file:

Nothing to talk much about here, Just the usual firebase setup and the MyApp Widget in the main function that contains a Material Widget with some basic theme setup and routes setup. The initial routes return the Wrapper() widget responsible for showing relavant screens which we talked about earlier. Before we take about this Wrapper() widget, let’s take a look at the Login and the Register Screens. The code for the Register Screen looks like this:

For now, we’ll just ignore the onPressed function but will later talk about it when we will define the functions for Registering and Logging the User in for firebase. For the rest, we have a form with some basic validation in place for the formfields and a button to Register the user.

The Screen looks something like this:

The Login Screen code looks very similar to the Register screen code and it looks something like this:

Visually, the screen’s nothing too fancy and has two formfields now unlike the Register Screen which had three. Also, there’s a button below the formfields to log the user into the application and looks something like this:

Now we get to the main part, the part where we define the functions for the users to register and then log into the application. Before anything, Go to the firebase console and allow the Email and Anonymous Authentication Methods. Here’s how to do it:

go to Firebase Console
From the list of projects, select your project:

After choosing the project, Under build, choose Authentication

Under Sign-in methods, Click add a new Provider and choose Email/Password and Anonymous Sign-in or whatever other methods you fancy. We’ll be adding Email/Password and Anonymous Login for now. Just make sure that the methods you’re adding have their status enabled.

Now, we’re all set from Firebase Console and need to define the methods that take the credentials from the user and register them onto firebase and then log them into the application.

Conveniently, Firebase has built-in methods for basic authentications including one for anonymous sign-in and email/password sign-in. We’ll be using them to our help. Now, let’s define the methods in dart one by one.

After installing Firebase core and Firebase Auth packages, an instance of FirebaseAuth is exposed to us using which we can access the different firebase authentication methods. Let’s start off with the very basic AnonymousLogin function.
The Firebase equivalent of the function is called signInAnonymously which can be accessed through the FirebaseAuth instance that we talked earlier about as:

Using the FirebaseAuth instance, this function calls the signInAnonymously method and logs the User into our application.

Next, for the Email/Password Registering, the firebase function createUserWithEmailAndPassword comes in handy. The function requires two parameters. Yeap you guessed it right. The Email and password that we can pass through the constructor. The Function returns a UserCrendentials Object which has our Firebase User.

Coincidentally, my dart method has the same name as the firebase function but do keep in mind that those are two different methods.

Now for the final Firebase Method, let’s take a look at the login function which thankfully is called signInWithEmailAndPassword.
The function, like the register user function, requires Email and Password as a parameter and returns a UserCredential which contains our firebase User. The code looks something like this:

We’ve talked about Registering, Sign-in but what if the user wants to logout? Firebase got you covered there as well. The firebase function signout comes to handy there. It works like this:

Now that all is set in terms of functions, let’s talk about the onPressed Function that we skipped earlier. Since all the Firebase Functions return Futures meaning that they may take some time. We use async/await so to tell Dart that this particular function is supposed to take time to return something back. And once we get the value back, we know that its a Future of type dynamic so we store it in a variable and then use it to perform actions like showing the LoadingSpinner until we get a response back from the Future.

Aren’t we still missing something? Yes, indeed we are. Remember we talked, well, not really talked but mentioned the Wrapper widget and almost forgot it afterwards? Not really :’p

Let’s talk about why it's needed and why is it a significant part of our application. Reminding ourselves of the widget tree diagram we saw are the very beginning, we know that the Wrapper widget stands below the MyApp widget and above the homeScreen and the Login and the RegisterScreen.

But why is it so? To Answer that, let’s take a look at the code:

So, in very simple words, Streams are like continuous Futures. What I mean by it is that a Stream is a sequence of continuous asynchronous events. Unlike Futures, where we ask for the Future response, the Stream keeps on returning new responses back (if there are any). The StreamBuilder used here is just like *FutureBuilder but for Streams. The FirebaseAuth instance provides a stream called *authStateChanges** which as the name suggests provides the authentication changes stream. The StreamBuilder in the Wrapper Widget is listening to any changes in the authentication status and based on the current authentication status, it either shows the HomeScreen

or if the user logs out, shows the relevant Authentication Screen (Login / Register).

That’s all for now Folks! This is the first of many in the series. Thanks for reading this article ❤️

Clap 👏 If you learned something new today.

Feel free to post any queries or corrections you think are required ✔
Do leave feedback so I can improve on my content. Thank you! 😃

You can also Follow me on:

If you’re interested, here are some of my other articles:
Demystifying Dart: Execution Thread & Dart Call Stack
Flutter 3.3: What’s New?
Getting Started with Git and Github

Demystifying Dart: Execution Thread & Dart Call Stack

Motabar Javaid — Tue, 06 Sep 2022 18:20:25 +0000

In this series, we will be deep diving into the world of Dart Programming Language; how it works behind the scenes, and why it works in a specific way.

Let’s start with a brief introduction of Dart Langauge. Dart is a multi-purpose static-typed programming language that is developed by Google. It was first released back in 2013 with version 1.0 coming out before it was used internally within Google to create web, servers, and Mobile Applications. Dart is an object-oriented, garbage-collected language with its syntax very much similar to C. Today, it’s very widely used in conjunction with Flutter to create beautiful-looking Mobile, Web, and desktop applications.

Dart, like many other programming languages, is a single-threaded language which means it can only run one thing at a time. It executes the code line by line which is also called Thread of Execution.

To understand how Thread of Execution works, Let’s understand it with the help of an example.

Before jumping onto the complex (relatively) part, let’s understand the code very quickly. In this code, we have two integers variables and two functions: One for multiplying the two numbers and one for taking the square of a number.

Now let’s understand how Thread of Execution will work. We already know that the main function is our starting point so the code execution will start from there.

Firstly, It will initialize the two variables: firstNumber and secondNumber in what’s known as global memory.

Next, there is a function implementation of the multiply function:

For this part, Dart will take the entire chunk of the code of the function and store it in the memory something like this:

Moving line by line, similar to the multiply function implementation:

Dart will do the same for the square function and store it in the global memory something like this:

Now as per Thread of Execution, Dart will move to the next line in which the variable multiplyResult is calling a function.

Here, since Dart cannot initialize this directly, it will create something which is known as the Dart Execution Thread. A Dart Execution Thread has its own local memory and set of executions. Something like this:

The Dart Execution Thread will execute the entire function body and will return back the value to the global memory from where it was initially called.
After the Dart Execution Thread is done with the execution, it will destroy itself.

Likewise, a similar Dart Execution Thread will be created for square function:

Just like the previous Dart Execution Thread, it will return back the value to the place from where it was called in the global memory. Pictorially it will be something like this:

Now If we take a step back and observe, we realize that the entire thing in itself is just another Dart Execution Context that is being executed to kickstart an application. Just like a normal Dart Execution Context, it had a memory and set of execution from the very start.

But there’s one mystery yet to be demystified, we know that Dart is a single-threaded language meaning there can only be one Thread of Execution active at any given time so how will Dart know which Thread is to execute in the main Execution Thread?

And that is exactly where the Dart Call Stack comes into action. The Call Stack is just like any other stack but this one holds the Threads of Execution that determines which thread will be executed in the Main Thread. Initially, If there is nothing else in the stack, there always is a main or global at the bottom of the stack.

But as soon as a new Dart Execution Thread is created, the thread is pushed into the Call Stack and after it’s done and destroyed, it will get popped out from the Call Stack too. Let’s visualize that with a diagram:

Just like this, the other threads will follow the same pattern and will get pushed and pop into the Stack over the course of their working.

If there are any nested methods, both will be added to the stack and will stay there until they’re done with their working and then they’ll be popped out of the stack respectively. The completion of the methods is identified with the return keyword.

That’s all for now Folks! Hoping this would be the first of many in this series. Thanks for reading this article ❤️

Clap 👏 If you learned something new today.

Feel free to post any queries or corrections you think are required ✔
Do leave feedback so I can improve on my content. Thank you! 😃

You can also Follow me on:

If you’re interested, here are some of my other articles:

Flutter 3.3: What’s New?

Motabar Javaid — Wed, 31 Aug 2022 21:55:36 +0000

Flutter 3.3: What’s New?

Flutter is Google’s very own UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Flutter achieves this task using its language called Dart.

Less than 24 hours ago, Flutter Product Manager Tim Sneath announced a new stable version of Flutter i-e; Flutter 3.3. Talking about the numbers, we get to know that since the release of Flutter 3, there have been 5,687 pull requests merged successfully which shows how actively the community is contributing to Flutter’s development.

The new version brings in a lot of features including Performance improvements, Material Design 3, VS Code extension enhancements, and many more. In this article, We’ll go through the major ones. But if you’re interested to know every change in depth, you can read Kevin Jamaul Original article here.

Framework Related Changes:

Global Selection

Using a single sweeping gesture to select elements on a web app is a native feature that was missing from Flutter web apps. But this changes today with the introduction of Flutter 3.3. With the introduction of a new widget called SelectionArea.To make it easier to select elements within our Flutter Web App, simply wrap the Scaffold with the SelectionArea widget and boom. All of its descendants are now selectable. To learn more about the widget, head to the SelectionArea API Documentation.

Trackpad Input

Flutter 3.3 also brings in some changes to the trackpad input. Now the trackpad input provides richer and swift control. Not only that, but it also removes the inconsistencies across the scrolling. To learn more about the trackpad input improvements, you can read the document shared by the Flutter team here.

Scribble

Did you ever want to have Apple Pencil support for input on your iPad in your Flutter Applications? Well, it’s here! Credits goes to one of Flutter Community member Jami Couch . The Scribble feature is enabled by default on Widgets like CupertinoTextField, TextField, and EditableText. All you have to do is to upgrade your Flutter Version to Flutter 3.3.

Text Input

To improve on the Flutter rich text editing, the latest version of Flutter provides the ability to receive granular text updates from *TextInputPlugin. This allows the developers to build an input field with different styled ranges that can expand and contract as the user types. You can see the demo *here.

Material Design 3:

Since the introduction of Android 12 which brought the dynamic theme engine Material You, the whole Android theming system has evolved. With more and more development in the Android OS, newer iterations of Material Design are integrated into it. And Flutter takes no time to catch up with those updates. With Flutter 3.3, there have been changes to the Material Design of widgets like IconButton, Chip, and variants of AppBar.

Gradually more and more widgets are getting migrated to Material Design 3 theming. You can check out the progress on Material 3 Github.

Below are the screenshots of the new Material Design adaptive widgets:

IconButton:

Chip:

AppBar:

Flutter For Desktop:

Windows

Before the release of Flutter 3.3, if you wanted to set the version of your Desktop Application based on Flutter, you had to change it from a file that was specific to Windows Application. That changes today with the update that makes it easier to change the app versions from the project’s pubspec.yaml
This makes it more consistent with how other platform versions are set. To learn more about this feature and more, head over to Flutter Docs.

Impeller: The Next-Generation Rendering Layer

If you’ve been following Flutter since its beta days, I’m sure you’ve heard of Skia Graphics Engine. The Graphics engine powered all of the Flutter itself and made it capable enough to perform as good as it does.

With the release of Flutter 3.3, The Flutter Team announced a new rendering layer called Impeller; A runtime that is capable of getting the full potential out of hardware-accelerated API’s such as Metal for iOS and Vulkan for Android.

With the introduction of a new graphics engine, you can expect even silkier animation across your Flutter applications. It will raise a bar of expectations for a cross-platform tool kit. Impeller also doesn’t need runtime shader compilation which is the main source of frame time janks in our apps.

As of now, the feature is under active development, you can try your hands on the latest Graphics Engine capabilities by switching to *master *channel of Flutter so to make sure you are running the latest version of Flutter.

Packages:

go_router Package

With the latest and greatest updates, Flutter keeps getting stable updates across different platforms including mobile, desktop, and the web. With more updates come more complexities. One big complexity is that of Navigation. In the case of complex navigations, we often find ourselves scratching our heads but things just got a little easier with the introduction of the go_router package. The package is being managed by the Flutter Team themselves. The packages make it easier by providing a declarative, URL-based API which makes it easier to navigate and handle the deep links. You can learn more about Navigation and Routing here.

VSCode Extension Improvements

We can all agree on the fact that Dart: Add Dependency VS Code Extension has made it very easy to add third-party packages to our project. Well, that has just gone one level up with now support to add multiple packages all at the same time by separating the packages name with a comma.

That’s all for now Folks! These were some of the changes that Flutter 3.3 brings. Thanks for reading this article ❤️

Clap 👏 If you learned something new today.

Feel free to post any queries or corrections you think are required ✔
Do leave feedback so I can improve on my content. Thank you! 😃

You can also Follow me on:

If you’re interested, here are some of my other articles:
Getting Started with Git and Github
Flutter UI Series: WhatsApp UI

Getting Started with Git and Github

Motabar Javaid — Thu, 11 Aug 2022 23:00:49 +0000

Diving into the realm of version control.

If you code or have a little bit of knowledge about it, I’m sure you’ve at least once heard of the term git. And I know, I know, It must’ve been jargon for you the first time. You’re not alone. It is indeed, for all of us.

Okay, So I know how confusing it was for me at first to even understand why would someone need git and Github and what’s a branch or push or pull bla bla bla. It was just too confusing and overwhelming to just use it even on a simpler personal project.

Until one day when I saw its capabilities. The use case, commands everything started to make sense. So today, ladies and gentlemen, I’ll try to help you’ll understand what Git is, why we use it, and how it can potentially be a lifesaver for a programmer!

Let’s start with the very basic,

Understanding Git

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

That’s the definition you’ll get if you google right now. But you won’t be here if you did understand it from google. So let’s understand it in simpler terms. Git basically is software that keeps track of your projects. So for instance, you have a project, in this case, a mobile app, that is divided into phases: Phase One is allocated to designing the UI. Phase Two is the functionality and phase three is integrating third-party services. Once you get done with Phase One, you being the clumsy coder, don’t want to make unintentional changes to the UI for the remaining of the app so you do what’s called a snapshot in git terms where you kind of make a safe save of your code for even if cases where you mess things up, you can always retrieve and come back to the point of time of the snapshot. And remember we talked about different phases? We divide the code into what’s called a branch. Where each branch is a new feature or a phase in our case. After each phase is done, we can integrate the done phases/parts into one by merging them together into what’s known as the master branch in git.

Git in group projects

So, git for a personal project where you’re the only one coding might not sound so convincing but when there are multiple people working on the same project, Git just makes the convenience goes into super Saiyan mode. So if you look at the photo above, there is a branch, a Master branch (the main one) and there are two more branches coming out of the main branch at one point and then merging all into the main branch at another point. That’s representing in what’s in our case would be the different phases of our mobile application where we were working on the UI Section while a colleague was working on the functionality and them we both merge them together into the main/master branch. So when you want to get a copy of the updated project, you retrieve it from the main branch with the action known as pull in git.

The main and master branch refer to the same thing. Its just that the master branch is now called main in Github which we’ll learn later on.

Getting started with git commands

Now that we’ve a sufficient knowledge of what git is and how it works. Let’s get into the fun part and learn how to work with it. So let’s dive in,

git init — Initializes an empty git repository in the current directory.
git status — Shows state of the working git directory.
git branch — Shows the branch you’re currently on
git add — Add something into the staging area
git commit — Captures a snapshot of the currently staged changes
git checkout — Navigate between the branches
git push — push local repository to a remote one (From Local to Github)
git pull — Fetch the remote repository and update the local one (From Github to Local)

Now that we’ve gone through the basic git commands, let’s get ourselves familiar with Github.

What is Github?

People often confuse git with Github which is understandable if you don’t know what Github actually is. So starting off with,

Github is nothing but a hosting space for our coding projects.

But that’s not all that Github has to offer. Github is a platform for code hosting along with features including version control and collaboration. Github makes it easy for us to use git by providing users with a Graphical User Interface (GUI) as opposed to git which is limited to the Command Line Interface or the CLI which makes it easier to manage our projects and collaboration in large teams.

Even though Github is not the only space that is used as an extension to git to host our code, there are several others, to name a few:

GitLab.
GitBucket.
SourceForge.
BitBucket.

But Github is the most renowned and most used platform used for hosting code.

Fun Fact: Github was acquired by Microsoft in 2018 for $7.5B

So, Github works exactly the same way as git does, the major difference being the Master branch is called the main branch in github which doesn’t make a difference in most cases except when you intend to push your code to the ‘main branch’ of Github and you mistakenly create a new branch called main cause you’re too used to git :p

With that, I think we’re pretty much done for this article. Thanks for reading this article! ❤️ You can find all the code on my github @WhatsApp Clone Repo

That’s all for now Folks Thanks for reading this article ❤️ I hope you learned something new today.
Clap 👏 If this article helped you.

Feel free to post any queries or corrections you think are required ✔

Do leave a feedback so I can improve on my content. Thankyou! 😃

You can follow me on twitter @iizmotabar

If you’re interested, here are some of my other articles:

Flutter 2.5: What's changes does it bring?
Dart Collection Types: Sets
Dart Collection Types: Lists
The Beauty of Dart Strings Method
**Also, If you’re interested, here are some of my other

Flutter UI Series: WhatsApp Clone

Motabar Javaid — Sat, 18 Sep 2021 07:41:10 +0000

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.

I’ve been using Flutter since its very early release days. Having an experience with Native Android Development, I could clearly see the perks of Flutter’s declarative UI approach with its cross-platform compatibility being the cherry on top.

In this series of Flutter UI designs, I’ll try to show you how with Flutter, it becomes very easy to replicate some of the renowned apps we use on our daily basis. What better way to start the series off than with WhatsApp. Probably the most used Social Media Application in the world.

Enough of the talking. Time to get our hands dirty now.

We’ll start off with the very simple app as a skeleton which has an AppBar and Text saying ‘Hello World’ in the centre of the body.

Here’s how it looks in code:




import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar(
            backgroundColor: const Color(0xff128C7E),
            title: const Text('WhatsApp'),
          ),
          body: const Center(child: Text('Hello World'),
         ),
       ),
    );
  }
}

I know, I know it doesn’t look like the Original WhatsApp but we’ll get there together. Step-by-step. Let’s start with the AppBar. What’s missing?

Search button and three-Dot Menu parallel to WhatsApp text.
Tabs to open Camera, Chats, Status, Calls.

For The search button and the three-dot Menu Button, AppBar widget has a property called actions that takes in a list of Widgets. We can use an Icon widget to get a search button.

For the three-dot Menu, There’s a widget called PopupMenuButton in Flutter with which we can get as many Popup items as we need in the form of a list. Let’s see how that would look and dive into the code:

Let's see the code now. Shall we?




import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
          appBar: AppBar(
            actions: [
              // Widget for the search button
              InkWell(child: const Icon(Icons.search), onTap:(){
                // Implement Search functionality here
              }),
              // Widget for implementing the three-dot menu
              PopupMenuButton(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                itemBuilder: (context) {
                  return [
                    // In this case, we need 5 popupmenuItems one for each option.
                    const PopupMenuItem(child: Text('New Group')),
                    const PopupMenuItem(child: Text('New Broadcast')),
                    const PopupMenuItem(child: Text('Linked Devices')),
                    const PopupMenuItem(child: Text('Starred Messages')),
                    const PopupMenuItem(child: Text('Settings')),
                  ];
                },
              ),
            ],
            backgroundColor: const Color(0xff128C7E),
            title: const Text('WhatsApp'),
          ),
          body: const Center(child: Text('Hello World'))
          ),
    );
  }
}

Now let’s get to the Tabs Implementation, For that we’ll get the help of AppBar’s bottom property and provider it with TabBar widget which takes in list of tabs. For every Tab selected, We can show a different view to the User using the TabBarView widget which we can use in the body but we’ll get there later on in this article.

Here’s the code for it:




import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  Widget openPopUp() {
    return PopupMenuButton(
      itemBuilder: (context) {
        return List.generate(
            3,
            (index) => const PopupMenuItem(
                  child: Text('Setting'),
                ));
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
          appBar: AppBar(

            actions: [
              // Widget for the search
              const Icon(Icons.search),
              // Widget for implementing the three-dot menu
              PopupMenuButton(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                itemBuilder: (context) {
                  return [
                    // In this case, we need 5 popupmenuItems one for each option.
                    const PopupMenuItem(child: Text('New Group')),
                    const PopupMenuItem(child: Text('New Broadcast')),
                    const PopupMenuItem(child: Text('Linked Devices')),
                    const PopupMenuItem(child: Text('Starred Messages')),
                    const PopupMenuItem(child: Text('Settings')),
                  ];
                },
              ),
            ],
            backgroundColor: const Color(0xff128C7E),
            title: const Text('WhatsApp'),
            bottom: const TabBar(
              indicatorSize: TabBarIndicatorSize.tab,
              indicatorColor: Colors.white,
              tabs: [
                Tab(
                    iconMargin: EdgeInsets.all(100),
                    child: Icon(
                      Icons.camera_alt_rounded,
                    )),
                Tab(
                  child: Text('CHATS', style: TextStyle(color: Colors.white)),
                ),
                Tab(
                  child: Text('STATUS', style: TextStyle(color: Colors.white)),
                ),
                Tab(
                  child: Text('CALLS', style: TextStyle(color: Colors.white)),
                ),
              ],
              labelColor: Colors.white,
            ),
          ),
          body: const Center(child: Text('Hello World'))


    );
  }
}

I think we’re pretty much done with the AppBar. Since the first tab Camera requires a functionality and that’s beyond the scope of this article, we’ll ignore that and create a Single Tab Views for Chats, Status, Calls tab.

Chats Tab:

Lets Make the Chats Tab View First. For that we need to break down the layout. In WhatsApp Chat Screen, We have a profile picture, Username, last message,status of the message and the timestamp. Let’s first see how to UI would look and then dive into the code implementation.

Here’s a look at its code implementation:




import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  Widget openPopUp() {
    return PopupMenuButton(
      itemBuilder: (context) {
        return List.generate(
            3,
            (index) => const PopupMenuItem(
                  child: Text('Setting'),
                ));
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          actions: [
            // Widget for the search
            const Icon(Icons.search),
            // Widget for implementing the three-dot menu
            PopupMenuButton(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              itemBuilder: (context) {
                return [
                  // In this case, we need 5 popupmenuItems one for each option.
                  const PopupMenuItem(child: Text('New Group')),
                  const PopupMenuItem(child: Text('New Broadcast')),
                  const PopupMenuItem(child: Text('Linked Devices')),
                  const PopupMenuItem(child: Text('Starred Messages')),
                  const PopupMenuItem(child: Text('Settings')),
                ];
              },
            ),
          ],
          backgroundColor: const Color(0xff128C7E),
          title: const Text('WhatsApp'),
          bottom: const TabBar(
            indicatorSize: TabBarIndicatorSize.tab,
            indicatorColor: Colors.white,
            tabs: [
              Tab(
                  iconMargin: EdgeInsets.all(100),
                  child: Icon(
                    Icons.camera_alt_rounded,
                  )),
              Tab(
                child: Text('CHATS', style: TextStyle(color: Colors.white)),
              ),
              Tab(
                child: Text('STATUS', style: TextStyle(color: Colors.white)),
              ),
              Tab(
                child: Text('CALLS', style: TextStyle(color: Colors.white)),
              ),
            ],
            labelColor: Colors.white,
          ),
        ),

        // ! THE DESIGNED BODY
        body: const TabBarView(
          children: [
            Center(child: Text('This feature is coming soon')),
            ChatsTab(),
            Center(child: Text('Status feature is coming soon')),
            Center(child: Text('Call feature is coming soon')),
          ],
        ),
      ),
    );
  }
}

class ChatsTab extends StatelessWidget {
  const ChatsTab({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: const [
            SingleChatWidget(
                chatTitle: "Arya Stark",
                chatMessage: 'I wish GoT had better ending',
                seenStatusColor: Colors.blue,
                imageUrl:
                    'https://static-koimoi.akamaized.net/wp-content/new-galleries/2020/09/maisie-williams-aka-arya-stark-of-game-of-thrones-someone-told-me-in-season-three-that-i-was-going-to-kill-the-night-king001.jpg'),
            SingleChatWidget(
                chatTitle: "Robb Stark",
                chatMessage: 'Did you check Maisie\'s latest post?',
                seenStatusColor: Colors.grey,
                imageUrl:
                    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDXCC-UB67rk0HtbmrDvVsIGvnPfTAMc_tSg&usqp=CAU'),
            SingleChatWidget(
                chatTitle: "Jaqen H'ghar",
                chatMessage: 'Valar Morghulis',
                seenStatusColor: Colors.grey,
                imageUrl:
                    'https://static3.srcdn.com/wordpress/wp-content/uploads/2017/06/Jaqen-Hghar-Game-of-Thrones.jpg'),
            SingleChatWidget(
                chatTitle: "Sansa Stark",
                chatMessage: 'The North Remembers',
                seenStatusColor: Colors.blue,
                imageUrl:
                    'https://i.insider.com/5ce420e193a15232821d3084?width=700'),
            SingleChatWidget(
                chatTitle: "Jon Snow",
                chatMessage: 'Stick em\' with the pointy end',
                seenStatusColor: Colors.grey,
                imageUrl:
                    'https://i.insider.com/5cb3c8e96afbee373d4f2b62?width=700'),
            SingleChatWidget(
                chatTitle: "Arya Stark",
                chatMessage: 'I wish GoT had better ending',
                seenStatusColor: Colors.blue,
                imageUrl:
                    'https://static-koimoi.akamaized.net/wp-content/new-galleries/2020/09/maisie-williams-aka-arya-stark-of-game-of-thrones-someone-told-me-in-season-three-that-i-was-going-to-kill-the-night-king001.jpg'),
            SingleChatWidget(
                chatTitle: "Robb Stark",
                chatMessage: 'Did you check Maisie\'s latest post?',
                seenStatusColor: Colors.blue,
                imageUrl:
                    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDXCC-UB67rk0HtbmrDvVsIGvnPfTAMc_tSg&usqp=CAU'),
            SingleChatWidget(
                chatTitle: "Jon Snow",
                chatMessage: 'Stick em\' with the pointy end',
                seenStatusColor: Colors.blue,
                imageUrl:
                    'https://i.insider.com/5cb3c8e96afbee373d4f2b62?width=700'),
          ],
        ),
      ),
    );
  }
}

In the code, We’re using a ListView. Since the number of chat items is constant a simple ListView would do just fine otherwise if the items were dynamic, ListView.builder would have been our choice. The SingleChatWidget used in the ListView defines how a single item would look like. Here’s its implementation in code:




// Widget to define how a single chat widget would look like
class SingleChatWidget extends StatelessWidget {
  final String? chatMessage;
  final String? chatTitle;
  final Color? seenStatusColor;
  final String? imageUrl;

  const SingleChatWidget({
    Key? key,
    this.chatMessage,
    this.chatTitle,
    this.seenStatusColor,
    this.imageUrl,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 30,
          backgroundImage: NetworkImage(imageUrl!),
        ),
        Expanded(
          child: ListTile(
              title: Text('$chatTitle',
                  style: const TextStyle(fontWeight: FontWeight.w600)),
              subtitle: Row(children: [
                Icon(
                  seenStatusColor == Colors.blue ? Icons.done_all : Icons.done,
                  size: 15,
                  color: seenStatusColor,
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 6.0),
                    child: Text(
                      '$chatMessage',
                      style: const TextStyle(overflow: TextOverflow.ellipsis),
                    ),
                  ),
                ),
              ]),
              trailing: Column(
                children: const [
                  Padding(
                    padding: EdgeInsets.only(top: 8.0),
                    child: Text(
                      'Yesterday',
                    ),
                  ),
                ],
              ),
          ),
        ),
      ],
    );
  }
}

Status Tab:

Let’s now move to the status tab. The status tab on WhatsApp has firsly a row displaying the user’s photo if the user has no status update and a button to add one. Below it are the viewed stories from the contacts and after it are the muted status updates of contacts.

Confused already? Let’s make it easier by taking a look at the UI and then understanding its implementation in code.

Let’s decode the status screen now:





import 'package:flutter/material.dart';
import 'package:whatsapp_ui/widgets/single_status_widget.dart';

class StatusTab extends StatelessWidget {
  const StatusTab({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8),
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Stack(
                  children: const [
                    CircleAvatar(
                      backgroundColor: Color(0xff128C7E),
                      foregroundColor: Color(0xff128C7E),
                      radius: 30,
                      backgroundImage: AssetImage('lib/assets/images/Me.jpg'),
                    ),
                    Positioned(
                      top: 40,
                      left: 40,
                      child: CircleAvatar(
                        radius: 10,
                        child: Icon(Icons.add, size: 20),
                      ),
                    ),
                  ],
                ),
                const Expanded(
                  child: ListTile(
                    title: Text('My Status'),
                    subtitle: Padding(
                      padding: EdgeInsets.only(top: 2.0),
                      child: Text('Tap to add status update'),
                    ),
                  ),
                ),
              ],
            ),
            const Padding(
              padding: EdgeInsets.only(top: 8.0, bottom: 8.0),
              child: Text('Viewed updates',
                  style: TextStyle(fontWeight: FontWeight.w400)),
            ),
            Row(
              children: [
                Stack(
                  children: const [
                    CircleAvatar(
                      backgroundColor: Colors.grey,
                      radius: 30,
                      child: CircleAvatar(
                        radius: 28,
                        backgroundImage:
                            AssetImage('lib/assets/images/Mountains.jpg'),
                      ),
                    ),
                  ],
                ),
                const Expanded(
                  child: ListTile(
                    title: Text('Arya Stark'),
                    subtitle: Padding(
                      padding: EdgeInsets.only(top: 2.0),
                      child: Text('7 minutes ago'),
                    ),
                  ),
                ),
              ],
            ),
            // Since the ExpansionTile has top and bottom borders by default and we don't want that so we
            //use Theme to override its dividerColor property
            Theme(
              data: ThemeData().copyWith(dividerColor: Colors.transparent),
              child: const ExpansionTile(
                textColor: Colors.black,
                tilePadding: EdgeInsets.all(0.0),
                title: Text('Muted updates',
                    style: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                    )),
                children: [
                  SingleStatusItem(
                    statusTitle: 'Cersei Lannister',
                    statusTime: '56 minutes ago',
                    statusImage: 'lib/assets/images/Ansu.jpg',
                  ),
                  SingleStatusItem(
                    statusTitle: 'Lyanna Mormont',
                    statusTime: '2 minutes ago',
                    statusImage: 'lib/assets/images/Ubuntu.png',
                  ),
                  SingleStatusItem(
                    statusTitle: 'Daenerys Targaryen',
                    statusTime: '12 minutes ago',
                    statusImage: 'lib/assets/images/Mountains.jpg',
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

As for the SingleStatusItem widget, here’s how its implemented:





import 'package:flutter/material.dart';

class SingleStatusItem extends StatelessWidget {
  final String? statusTitle;
  final String? statusTime;
  final String? statusImage;
  const SingleStatusItem({
    Key? key,
    this.statusTitle,
    this.statusTime,
    this.statusImage,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Stack(
          children: [
            CircleAvatar(
              backgroundColor: Colors.grey,
              radius: 30,
              child: CircleAvatar(
                radius: 28,
                backgroundImage: AssetImage('$statusImage'),
              ),
            ),
          ],
        ),
        Expanded(
          child: ListTile(
            title: Text('$statusTitle'),
            subtitle: Padding(
              padding: const EdgeInsets.only(top: 2.0),
              child: Text("$statusTime"),
            ),
          ),
        ),
      ],
    );
  }
}

Calls Tab:

Last but not the least, the calls tab.If we take a closer look at the calls screen, its pretty much the same as the chat screen with some minor differences such as in the place of last sent or received text, there’s status of the call and in place of the timestamp, there’s a button for an audio or a video call. Let’s see how it looks after implementation and then go through the code.

Since the UI is very much alike the chat screen, so is the code for the calls screen. Let’s take a look at it.




import 'package:flutter/material.dart';
import 'package:whatsapp_ui/widgets/single_call_widget.dart';
import 'package:whatsapp_ui/widgets/single_chat_widget.dart';

class CallTab extends StatelessWidget {
  const CallTab({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: const [
            SingleCallWidget(
              callStatus: 'Outgoing',
              callType: 'Audio',
              chatMessage: 'Today, 12:28 PM',
              chatTitle: 'Arya Stark',
              imageUrl:
                  'https://static-koimoi.akamaized.net/wp-content/new-galleries/2020/09/maisie-williams-aka-arya-stark-of-game-of-thrones-someone-told-me-in-season-three-that-i-was-going-to-kill-the-night-king001.jpg',
            ),
            SingleCallWidget(
              callStatus: 'Incoming',
              callType: 'Video',
              chatMessage: 'Today, 01:11 AM',
              chatTitle: 'Cersei Lannister',
              imageUrl:
                  'https://pyxis.nymag.com/v1/imgs/8a2/6a6/8ddcaf4454e34b72484c5393560af17366-09-cersei-lannister.rsquare.w700.jpg',
            ),
            SingleCallWidget(
              callStatus: 'Incoming',
              callType: 'Video',
              chatMessage: 'Today, 5:28 AM',
              chatTitle: 'Red Woman',
              imageUrl:
                  'https://upload.wikimedia.org/wikipedia/en/8/80/Melisandre-Carice_van_Houten.jpg',
            ),
            SingleCallWidget(
              callStatus: 'Outgoing',
              callType: 'Audio',
              chatMessage: 'Today, 12:28 PM',
              chatTitle: 'The Mountain',
              imageUrl: 'lib/assets/images/Mountains.jpg',
            ),
          ],
        ),
      ),
    );
  }
}

As for the SingleCallWidget Implementation, here’s the code for it:





// Widget to define how a single call widget would look like
import 'package:flutter/material.dart';

class SingleCallWidget extends StatelessWidget {
  final String? chatMessage;
  final String? chatTitle;
  final String? callStatus;
  final String? imageUrl;
  final String? callType;

  const SingleCallWidget({
    Key? key,
    this.chatMessage,
    this.chatTitle,
    this.callStatus,
    this.imageUrl, this.callType,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 30,
          backgroundImage: NetworkImage(imageUrl!),
        ),
        Expanded(
          child: ListTile(
              title: Text('$chatTitle',
                  style: const TextStyle(fontWeight: FontWeight.w600)),
              subtitle: Row(children: [
                Icon(
                  callStatus == 'Incoming'
                      ? (Icons.call_received_sharp)
                      : Icons.call_made_sharp,
                  size: 15,
                  color: callStatus == 'Incoming' ? Colors.teal : Colors.red,
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.only(left: 6.0),
                    child: Text(
                      '$chatMessage',
                      style: const TextStyle(overflow: TextOverflow.ellipsis),
                    ),
                  ),
                ),
              ]),
              trailing: Column(
                children:  [
                  Padding(
                    padding:const EdgeInsets.only(top: 8.0),
                    child: Icon(callType == 'Audio' ? Icons.call :Icons.videocam,color: Colors.teal),
                  ),
                ],
              )),
        ),
      ],
    );
  }
}

One thing that I find missing is the Floating action button at the bottom. We can add that by using the floatingActionButton property on the Scaffold and then we can either make our own floatingActionButton or use a built-in Flutter FloatingActionButton(FAB) widget as follows:




import 'package:flutter/material.dart';

import 'screens/call_screen.dart';
import 'screens/chat_screen.dart';
import 'screens/status_screen.dart';
import 'widgets/single_chat_widget.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  Widget openPopUp() {
    return PopupMenuButton(
      itemBuilder: (context) {
        return List.generate(
            3,
            (index) => const PopupMenuItem(
                  child: Text('Setting'),
                ));
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        floatingActionButton: Container(
          width: 50,
          height: 50,
          child: FloatingActionButton(
            child: const Icon(Icons.chat),
            onPressed: () {},
          ),
        ),
        appBar: AppBar(
          actions: [
            // Widget for the search
            const Icon(Icons.search),
            // Widget for implementing the three-dot menu
            PopupMenuButton(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              itemBuilder: (context) {
                return [
                  // In this case, we need 5 popupmenuItems one for each option.
                  const PopupMenuItem(child: Text('New Group')),
                  const PopupMenuItem(child: Text('New Broadcast')),
                  const PopupMenuItem(child: Text('Linked Devices')),
                  const PopupMenuItem(child: Text('Starred Messages')),
                  const PopupMenuItem(child: Text('Settings')),
                ];
              },
            ),
          ],
          backgroundColor: const Color(0xff128C7E),
          title: const Text('WhatsApp'),
          bottom: const TabBar(
            indicatorSize: TabBarIndicatorSize.tab,
            indicatorColor: Colors.white,
            tabs: [
              Tab(
                  iconMargin: EdgeInsets.all(100),
                  child: Icon(
                    Icons.camera_alt_rounded,
                  )),
              Tab(
                child: Text('CHATS', style: TextStyle(color: Colors.white)),
              ),
              Tab(
                child: Text('STATUS', style: TextStyle(color: Colors.white)),
              ),
              Tab(
                child: Text('CALLS', style: TextStyle(color: Colors.white)),
              ),
            ],
            labelColor: Colors.white,
          ),
        ),
        body: const TabBarView(
          children: [
            Center(child: Text('This feature is coming soon')),
            ChatsTab(),
            StatusTab(),
            CallTab(),
          ],
        ),
      ),
    );
  }
}

With that, I think we’re pretty much done for this article. Thanks for reading this article! ❤️ You can find all the code on my github @WhatsApp Clone Repo

That’s all for now Folks! These were some of the changes that Flutter 2.5 brings. Thanks for reading this article ❤️
Clap 👏 If this article helped you.

Feel free to post any queries or corrections you think are required ✔

Do leave a feedback so I can improve on my content. Thankyou! 😃

If you’re interested, here are some of my other articles:

Flutter 2.5: What changes does it bring?

Motabar Javaid — Thu, 09 Sep 2021 07:38:45 +0000

If you’re reading this, you probably already know what Flutter is but for those who don’t, Flutter is Google’s very own UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Flutter achieves this dart using its a language known as Dart.

Less than 24 hours ago, The Flutter team released a new stable version of Flutter i-e; Flutter 2.5. Talking about the numbers, this version closes 4600 issues and is contributed by around 252 contributors and 216 reviewers with a whooping 3932 PRs merges.

The new version brings in a lot of new features with it mostly relating to Performance,better Exception Handling and much more. In this article, We’ll go through the major ones. If you’re interesting to know every change in depth, you can read Chris Sell’s Original article here.

Dart 2.14 :

What better way to start with the changes than Flutter’s brother in arms, Dart 🎯 . The new version of Dart brings in changes to code Formatting, making Cascading more clear. The triple shift operator also makes a comeback for better bitwise shifting. Another major change is the introduction of Lint out of the box with every Flutter Project. You don’t have to manually add Lint to your projects anymore.

New Template App:

Since the start of mankind, We’ve been seeing the good old Counter App as the demo app whenever we make a new project. The Counter App might finally have a comepetitor 😅. With this new release, We can have a new Demo App that demonstrates a list having three items with its detail page and a way to implement the dark mode.

Framework Changes:

Android FullScreen Mode:

Starting off with the change related to Android Full Screen mode. Now we can have more control over the Full Screen modes in our app. Flutter 2.5 comes with three new modes: lean back, sticky, sticky immersive, and edge to edge.
The developers have more control over how when the user interacts with the app, they can return to fullscreen or do something else.

Floating Action Button (FAB) Sizes:

With the new update, Sizing the Floating Action Button(FAB) is a lot easier now.

Material Banner:

Another good addition to the is the Material Banner which lets the developers to add the functionality of a banner at the top of Scaffold that sticks to its place until the use dismisses it from view.

Let’s see how we can have implement this behavior of Banners in our apps.


class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('The MaterialBanner is below'),
        ),
        body: Center(
          child: ElevatedButton(
            child: const Text('Show MaterialBanner'),
            onPressed: () => ScaffoldMessenger.of(context).showMaterialBanner(
              MaterialBanner(
                content: const Text('Hello, I am a Material Banner'),
                leading: const Icon(Icons.info),
                backgroundColor: Colors.yellow,
                actions: [
                  TextButton(
                    child: const Text('Dismiss'),
                    onPressed: () => ScaffoldMessenger.of(context)
                        .hideCurrentMaterialBanner(),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
}

More changes include the ones to theming which are now Material You based and the addition of new MaterialState.scrollUnder state that you can see below:

One more change worth talking about here is the improvement on the scroll metrics notifications which now provides notifications of scrollable areas when the UI is not being scrolled. One application of that would be the example below which shows or hides scrollbar based on underlying size of the ListView. An the best part about it that you don’t even have to write any extra code to get this behavior in your apps.

VSCode Improvements:

Dependencies:

It becomes tedious to add packages from pub.dev into your project if the list is a long one.Pubspec assist made it easier to add packages but now you don’t even need it as it comes built in with the Flutter plugin for VS Code.

Fix All:

We’ve been there when we refactor our code and have to manually add the dependencies for everything that is being used in our code. Worry no more! Fix All got you covered. Use the Fix All command and it fixes all the known dependencies related issues in your code like magic. 🔮

Mind that the command can be made to run on on-save by adding sources.fixAll to the editor.codeActionsOnSave Setting in VS Code.

IntelliJ/Android Studio Improvements:

Integration Tests:

With the new update, changes have been made to the Flutter IntelliJ/Android Studio plugin which is now capable of running Integration Tests. Integration tests are whole-app tests that run on a device, live in the integration_test directory and use the same testWidgets() functionality from widget unit tests. To add the integration tests to the project, you can follow the guide on flutter.dev

Icons Preview:

Another good addition to the release is the addition of preview icons. Now you can have Icon Previews in your IntelliJ/Android Studio which are based around TrueType Font Files similar to Material & Cupertino Icon previewing.

To enable icon previews you need to tell the plugin which packages you are using. There is a new text field in the plugin settings/preferences page. One thing to keep in mind is that these icon previews work for static constants in the class and won’t work for expressions like LineIcons.addressBook() or LineIcons.values[‘code’].

That’s all for now Folks! These were some of the changes that Flutter 2.5 brings. Thanks for reading this article ❤️
Clap 👏 If this article helped you.

Feel free to post any queries or corrections you think are required ✔

Do leave a feedback so I can improve on my content. Thankyou! 😃

If you’re interested, here are some of my other articles:

Exploring Dart Collection Types: Part 2 — Sets

Motabar Javaid — Sun, 05 Sep 2021 06:40:18 +0000

In the previous article, We discussed Lists in detail. Today we’ll discuss the second type of Dart’s Collection i-e; Sets.

A Set in dart is an unordered collection of unique objects. Since the collection is of unordered objects, we cannot iterate through the elements using Indices like we can in other Collection Types such as Lists.

One use case of choosing Sets over Lists is that suppose we want to have a collection of Unique names of Employees and the order of names does not really matter. Sets could work out better in this scenario than List as Sets cannot have duplicates.

Let’s get our hands dirty and see how Set is declared and what does it has to offer:

A Set can be defined using Set Constructor as well as defining it explicitly as:


void main() {
  // Defining a set using Constructor
  var thisIsASet = Set();

  // Implicitly declaring a Set of dynamic types
  var setOfNames = {'John', 'Emilia', 'Robb', 'Jack', 'Jorah', 'Stark', 1, 4};

  //Explicitly defining a set of just String values
  Set<String> colors = {'Blue', "Red", "Orange", "Green"};


}

We can also convert a List into a set using Set.from() and providing the List as an argument to it as:


void main()
{

  List listOfNumbers = [1,2,3,4,5,5];

 //converting a List to a set
 Set setOfNumbers = Set.from(listOfNumbers);

 //Returns set having no duplicates
 print(setOfNumbers); //returns {1,2,3,4,5}

}

Since a Set’s element does not have an order, we cannot access it using Index but we can access it using elementAt() method that is available for sets. The method takes in an integer value as an index and returns the element which is present at that index as:


void main() {

  List listOfNumbers = [1, 2, 3, 4, 5, 5, 6];

  // converting a list into a Set
  Set setOfNumbers = Set.from(listOfNumbers);

  //Returns set having no duplicates
  print(setOfNumbers); //returns {1,2,3,4,5,6}


}

Dart’s Set offers general Set Operations such as Union, Intersection, difference, Compliment etc. Let’s go through them one by one:

union():

The union() method in takes in a set as a parameter and unites the elemtents with the Set on which it is called on. Let’s make it less complex as see it in action:


void main() {
  Set<int> setOfOddNumbers = {1, 3, 5, 7, 9};

  Set<int> setOfEvenNumbers = {2, 4, 6, 8, 10};

  // Taking union of set of odd and even numbers:
  print(
      "${setOfOddNumbers.union(setOfEvenNumbers)}"); //rturns {1, 3, 5, 7, 9, 2, 4, 6, 8, 10}

}

intersection():

The intersection() method, just like the union method takes in a set as a parameter and intersects it with the set on which it is called on. In code, it works as follows:


void main() {
  Set<int> firstSet = {1, 2, 3, 4, 5, 6};

  Set<int> secondSet = {1, 4, 2, 6, 8, 7};

  // Taking intersection of set of first and second set:
  print("${firstSet.intersection(secondSet)}"); //returns {1,2,4,6} as only these are present in first and the second set

}

difference():

The differnce() method returns back the set having the elements that are in the first Set but not in the second. It works by taking in a set as a parameter and taking difference with the set on which it is called on as follows:

void main() {
  Set<int> firstSet = {1, 2, 3, 4, 5, 6};

  Set<int> secondSet = {1, 4, 2, 6, 8, 7};

  // Taking the difference of first and second set:
  print("${firstSet.difference(secondSet)}"); //returns {3,5} as only these two are present in first but not in the second set

}

Compliment of a set is just like the difference between the sets. The only difference is the first set is a Universal Set (A set containing elements of all the sets).

In addition to basic Set Operations, Dart offer plenty of other methods for its Set Collection Type. Let’s go through them one by one and see what they do.

add():

Like the name suggests, the add method is used to add elements into the set. The method takes in an element as parameter and adds it up into the set on which it is called on as follows:


void main() {
  Set<int> numbers = {1, 2, 3, 4, 5, 6, 7, 8};

  // Adding elements into the set
  numbers.add(9);
  numbers.add(10);
  // Printing the modified set
  print(numbers); //returns {1,2,3,4,5,6,7,8,9,10}
}

remove():

remove() method on Sets works just like the add method but does the opposite. It removes the elements from the list. The method takes in an element as the parameter that we want to remove from the set and removes it. Let’s see that in code:


void main() {
  Set<int> numbers = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10};

  // removing elements from the set
  numbers.remove(4);
  numbers.remove(6);
  // Printing the modified set
  print(numbers); //returns {1,2,3,5,7,8,9,10}
}

clear():

Sometimes we want to delete all the elements that are present in the Set. For that purpose, the Set clear() method comes in handy. Just call it on the set you want to clear and it will remove all the elements present in it.


void main() {
  Set<int> numbers = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10};

  // Deletes all the elements present in the set
  numbers.clear();

  print(numbers); //returns {}
}

contains():

The contain() method on Set helps us if we want to check if a certain element is present in the list. It takes in the element we want to check as a parameter and returns true if the element is in the list and false if it is not. Let’s see that in code:


void main()
{
  Set<int> numbers = {1, 2, 3, 4, 5, 6, 7, 8};

  // Check if an element exists in the list
  print(numbers.contains(2)); //returns true as 2 is present in the set

}

These are some of the methods that are more repeatitively used with Sets. If you’re interested in learning more about them, you can check them out at dart.dev.

That’s all for now Folks! Thanks for reading this article ❤️ Will soon be posting the next parts. Stay tuned!

Feel free to post any queries or corrections you think are required ✔

Do leave a feedback so I can improve on my content. Thankyou! 😃

If you’re interested, here are some of my other articles on

Exploring Dart Collection Types : Part 1 — Lists

Motabar Javaid — Tue, 31 Aug 2021 09:08:41 +0000

Collections in any programming language are fundamentals.It allows us to store, retrieve data in the form of a collection per say. Just like in any other programming lanaguage, Dart provides us with built-in Collection types including Lists, Set, Map and Queue and more.

All the collection types are available with dart:collection package. One thing that is common between these collection types is that all of them implements an Iterable. An Iterable is just another object capable of returning its element in iterations or in easy words, one-by-one.

We’ll go through each of the Collection one by one. Let’s start off with the probably the most common amongst all, The List Collection Type.

List:

List, also known as an Array in some languages is simply is an ordered collection of objects which has a length. The list can be iterated through indices, starting off with the zero index and ending at length-1. To define a list in Dart, we enclose its elements with square brackets []. Let’s see that in code:


void main()
{

  List listOfFruits = ['Apple', 'Orange', 'Banana', 'Strawberry', 'Pineapple'];
  //We can also have a list having elements of different types.
  List listOfDifferentTypes = ['Bag', 1, 4, 'Mouse', 3.14 ]; 

  //To print the list as a whole, we can do: 
  print(listOfFruits);  //Returns the whole list of fruits

  //Lets say we want to print some specific element from the list. For that, we can make use of the index as such:
  print(listOfDifferentTypes[0]); //Returns 'Bag'as its the first element in the list.

}

If we want our List to be of specific types, we can restrict the element types using the angle brackets<> as such:


void main()
{
  // The list will only contain the elements of Integer type.
  List<int> listOfIntegers = [1,2,4,5,6,7];

  // The list is restricted to only elements of boolean type.
  List<bool> listOfBooleans = [false, true, true, true];

  // We can also have a list of elements having different types by setting 
  // its type to dynamic as such
  List<dynamic> listOfDynamicElements = ["String", 12, 45];

  //We can still use the indices to get a specific element from the list
  print(listOfIntegers[3]);  //Returns '5' .

 //To get last element from the list we can use the length method,
 // and then subtract 1 from it as follows:

  print(listOfDynamicElements[listOfDynamicElements.length - 1]); 

}

Now let’s get to the interesting part, We can not only create lists and iterate through them to get the element we want but we can also perform operations on it. Dart Lists offers a bunch of functions. Let’s go through them one by one:

reversed():

Let’s start things off with the reverse() method. I remember, when I started learning Programming with an OG language like C, how complex it was just to reverse a list or an Array as I should say. Dart makes the process so much easier with its reverse() method. You just call it on a List and it returns a reversed version back to you. That simple. Let’s have a look at the code:


void main()
{ 
  //Declaring a list of integers
  List<int> listOfIntegers = [1,2,4,5,6,7,8,9];

  //Reversing the list and storing it in a variable
  var reversedList = listOfIntegers.reversed;

  //Let's print the reversed String
  print(reversedList);  //returns [9,8,7,6,5,4,3,2,1]



}

shuffle():

The shuffle method like the name tells, shuffles a given list. The method takes an optional parameter where you can define how you want to shuffle the list. Bear in mind, since the Shuffle method does not returns anything, It manipulates the original List on which it is being called on. Let’s see the shuffle() method in action:


void main()
{ 
  //Declaring a list of integers
  List<String> listOfNames = ['John', 'Maisie', 'Barack', 'Bob'];

 //Shuffles the listOfNames List
  listOfNames.shuffle();

  print(listOfNames);  // prints a new shuffled list everytime it is called 

}

subList():

The subList() method returns a new list SubList from the List of elements on which it is called on. The subList() method takes in two parameters: start and end. The sublist contains elements starting from start (inclusive) and ends at ending index with that index being exclusive. Let’s dive into the code to see its magic:


void main()
{ 
  List footballClubs = ["FC Barcelona", 'Real Madrid', "Bayern Munich", "PSG", "Manchester City", "Juventus"];

  //Returns the elements between from 0 index(inclding 0 index) to 3 (excluding element at index 3)

  print(footballClubs.sublist(0, 3));  //Returns ["FC Barcelona", "Real Madrid", "Bayern Munich"]

}

asMap():

asMap() returns the Map(A key-value pair representation of data) - representation of the given String. In that Map, the indices serve as the keys and the values are the corresponding elements of the List. We can further call the getter methods on asMap().keys if we just want to get the keys or asMap().values if we want to only get the values. Let’s have a look at the method in code:


void main()
{ 

  List footballClubs = ["FC Barcelona", 'Real Madrid', "Bayern Munich", "PSG", "Manchester City", "Juventus"];

  //If we want the whole map to be printed, we just call the asMap() function
  print(footballClubs.asMap()); //prints the whole Map as: {0: FC Barcelona, 1: Real Madrid, 2: Bayern Munich, 3: PSG, 4: Manchester City, 5: Juventus}

  //To get just the keys or just the values,we call the corresponding getter as:

  print(footballClubs.asMap().keys); //returns just the keys as: (0, 1, 2, 3, 4, 5)

  print(footballClubs.asMap().values); //returns just the values as:  (FC Barcelona, Real Madrid, Bayern Munich, PSG, Manchester City, Juventus)

}

fold():

The return value of fold() function is a single value. The value is determined by the function which is being performed with the fold() function. For instance, It can be used to get a sum of elements in a list as:


void main()
{ 
 var listOfNumbers = [2,4,6];

 int result = listOfNumbers.fold(5, (i, j) => i+j);

 print('Resultant value is: ${result}'); //returns 17

}

Fold takes two parameters, the initialValue and a function. In this example, we iterate through the list with 5 being the initialValue and add up list elements into the initialValue so that:

In the first iteration, the element at Index 0 is 2, so 5+2 = 7 which now the new value of i.
In the second iteration i+j, 7+4 = 11 =i;
In the third of i+j, 11+6= 17 and there is no more element left in the list so the function evaluatation completes and it returns 17.

isEmpty() & isNotEmpty():

isEmpty() and isNotEmpty() are two very important functions on Dart Lists which as their name suggests checks if a List is Empty or if a List is not empty respectively.

isEmpty(): It returns true is the list is empty and false otherwise.
isNotEmpty(): In case of isNotEmpty(), the situation is other way round, where is returns true in case of list having some elements and false otherwise.


void main()
{ 
 List<int> listOfNumbers = [];

 List<int> anEmptyList =  [2,4,6,8,10];

 listOfNumbers.isEmpty ? print('A lie!') : print('A nobel man indeed.'); //prints 'A lie!' 
 if (anEmptyList.isNotEmpty)  //prints 'Am I a joke to you?'
 {
   print('Am I a joke to you?');
 }
 else
 {
    print('I see a man of virtue');
 }

}

add():

add() is the method that is used to add elements into the list. It takes in the element as a parameter and adds it up into the list on which it is called on as:


void main()
{ 
 List<int> listOfNumbers = [];

  listOfNumbers.add(1); //adds 1 to the empty listOfNumber List
  listOfNumbers.add(2); //adds 2 so the list becomes [1,2]
  listOfNumbers.add(3); //adds 3 so the list becomes [1,2,3]
  listOfNumbers.add(4); //adds 4, list becomes [1,2,3,4]
  listOfNumbers.add(5); //list is now [1,2,3,4,5]

  print(listOfNumbers); //prints [1,2,3,4,5]


}

dart

reduce():

reduce() method works pretty much the same as the fold method. The only difference between the two is that fold() method has an initial value while the reduce method does not. Let’s see that in code:


void main()
{ 
 List<int> listOfNumbers = [1,2,3,4,5];

  // We call reduce on the listOfNumbers list and call fold, which multiplies 
  // the elements within the list one by one and return a single value 
  var returnValue = listOfNumbers.reduce((i,j)=> i*j);

  print(returnValue);  // returns 120 as (1*2)*(2*3)*(6*4)*(24*5) = 120

}

any():

any() is the method that takes in a function as a parameter and based on that function returns a boolean in the form or a true or a false. Let’s suppose we want to check if the list contain any negative number. We can use any() in that case as:


void main()
{ 
 List<int> listOfNumbers = [1,2,3,4,5];

  //Checking if there is any negative number in the list at any index
  var returnValue = listOfNumbers.any((element)=> element.isNegative);

  print(returnValue);  // prints false as there is no negative number in the list
}

every():

every() works pretty much the same as any. The only difference is that any evaulates to a boolean value if even a element satisfies the condition but in case of every(), every element in the list has to satisfy the condition. Let’s see that in code:


void main()
{ 
 List<int> listOfNumbers = [1,2,3,4,5];

  //Checking if every element of the list is an even number
  var returnValue = listOfNumbers.every((element)=> element.isEven);

  print(returnValue);  // prints false as there are odd numbers in the list aswell.
}

getRange():

As the name suggests, the getRange method returns elements from the list which lie in the specific range. The range function takes in two parameters: start and end where start is inclusive and end is exclusive. Since the range function returns an iterable, we call toList() to typeCast the Iterable to a List as follows:


void main()
{ 
  List listOfColors = ['Red','Green','Blue','Yellow','Orange','Violet','Indigo','Black'];

  // getRange will only get the elements from index 1(including element at that index) to index 4 (while excluding element at index 4)
  print(listOfColors.getRange(1,4).toList()); // prints a list of [Green, Blue, Yellow]

}

replaceRange():

Need help updating an element within a specific range? The replaceRange() method got you covered. The method takes in 3 parameters, 2 of which are just like getRange() where its the start and end point of range while the third being the value that is to be replaced in the place of the desired element.The element that lies between the two ranges gets replaced. If there is no element withtin the two ranges, the element at start gets replaced. Let’s see that in an example as:


void main()
{ 
  List listOfColors = ['Red','Green','Blue','Yellow','Orange','Violet','Indigo','Black'];
  //replace the element between range(3,4) with purple, and that is Yellow in this case so, yellow is replaced with Purple
  listOfColors.replaceRange(3,4,['Purple']); 
  print(listOfColors); //prints [Red, Green, Blue, Purple, Orange, Violet, Indigo, Black]
}

firstWhere():

firstWhere() is the method that takes in a function as a paramater and returns the first element where the condition is satisfied as:



void main()
{ 
  List listOfColors = ['Red','Green','Blue','Yellow','Orange','Violet','Indigo','Black'];

  // returns the first element where the pattern matches for 'ang' and the list contains Orange that matches the pattern
  print(listOfColors.firstWhere((element)=> element.contains('ang'),),); //prints Orange as it satifies the condition


}

first() & last():

Like the name speaks for itself, the first() method is used to get the first element from the list and the last() method returns the last element from the list. Let’s see that in code:


void main()
{ 
  List listOfColors = ['Red','Green','Blue','Yellow','Orange','Violet','Indigo','Black'];

  //Returns the first element from the list
  print(listOfColors.first); //returns 'Red'

  //returns the last element from the list
  print(listOfColors.last); // returns 'Black'


}

That’s all for now Folks! Thanks for reading this article ❤️ Will soon be posting the next parts. Stay tuned!

Feel free to post any queries or corrections you think are required ✔
Do leave a feedback so I can improve on my content. Thankyou! 😃
If you’re interested, here are some of my other here on Dart String Methods

The Beauty of Dart String Methods

Motabar Javaid — Wed, 25 Aug 2021 09:44:26 +0000

Dart is a Google's client-optimized Object Oriented Programming Language which is used to build User Interfaces in conjunction with Flutter - A Cross Platform Development Toolkit.

Dart is a statically typed language that offers features like Sound Null Safety , Spread operators, Collection if's for its Collection class and the powerful Dart VM that enables it to have its renowned Hot Reload functionality.
Like any other Programming Languages, Dart offers String as types. It can be represented with either a single, double or triple quotes.

What makes Dart Strings special is the Methods that are available for the String Types. Here are some which comes in very handy when dealing with String literals.



void main() {

  String thisIsAString = 'Hello World'; //Explicitly typed variable
  var thisIsAlsoAString = "Hello World Again";  // Implicitly typed variable
  String tripleQuotedString = """ This is a triple-quoted String """;

  print(thisIsAString);  //Prints Hello World onto the console

}

endsWith():

The endsWith Method takes a String as an argument and returns true if the String on which it is called ends at the given parameter.Its worth mentioning, the endsWith Method is case sensitive. Let's see that in practice:



void main(){
  String name = 'I am Motabar';
  String notSoSophisticatedString = 'i Am mOTAbAR';

  print(name.endsWith('r')); // Returns true as the parameter 'r' is same as 'r' in variable name's last character

  print(notSoSophisticatedString.endsWith('r')); //Returns false as parameter 'r' does not match with variable's last character 'R'


}

trim():

Have you ever felt lazy while removing trailing or leading white spaces from large Strings? Dart's trim Method got you covered. When called, it returns a new String with no whitespaces. Here's the code:



void main() {

  String aVeryLongString = "      This is a very long string with leading as well as trailing white spaces    "
  String trimmedString = aVeryLongString.trim();

//   The trimmedString Variable has now removed all the leading and trailing white spaces.

  print(trimmedString);  //Prints "This is a very long string with leading as well as trailing white spaces"

}

replaceAll():

The replaceAll function on Strings takes two string parameters: First one is the substring that is to be replaced and the second one is the one with which it is to be replaced with. The function replaces the string with the substring at all the instances within that String. Confused? Let's make it easier by looking at an example:



void main() {

  String justAnotherString = 'And then she said: "Valar Morghulis" ';

  //modifiedString Variable now contains the string with original String's "Morghulis" replaced by "Dohaeris".
  String modifiedString = justAnotherString.replaceAll('Morghulis', 'Dohaeris');

  print(modifiedString);  //'Prints "And then she said: Valar Dohaeris '


}

compareTo():

We'll all been there at some points where we want to compare two Strings but just can't do it with the '==' operator. Why can't we do that, putting it in simpler words is because the equality operator doesn't compare the exact literals but the Object references. So what's the solution? Here comes compareTo() method to the rescue. The Method takes in two parameters: The first one being the one you want to compare and the second one, you guessed it right, the one to which we want to compare our String. The function has three return values based on the result:

0 : When the two Strings match.
1: When the first string is greater than the second (based on ASCII values).
-1: When the first string is smaller than the second string. Let's see its functionality by looking at an example:



void main() {

  String firstCharacter = 'A';
  String secondCharacter = 'B';
  String thirdCharacter = 'A';


  print(firstCharacter.compareTo(secondCharacter)); //Returns -1 as the firstCharacter's ASCII value(65) is smaller than secondCharacter (66)

  print(firstCharacter.compareTo(thirdCharacter)); //Returns 0 as both the String literals are equal

  print(secondCharacter.compareTo(firstCharacter)); //Returns 1 as ASCII value of 'B' is indeed greater than 'A'

}

toLowerCase() & toUpperCase():

The toLowerCase() and toUpperCase() methods are self explanatory. The former convert the string literal into Lower-case while the latter does the opposite and converted the string into Upper-case characters. Here's an example containing both:



void main() {

  String firstName = 'MotaBar';
  String lastName = 'javaid';

 print(firstName.toLowerCase());  // print 'motabar' on the console

  print(lastName.toUpperCase()); //prints 'JAVAID' on the console


}

split():

The split() method splits up the string by taking a parameter as a delimeter and returns back the result in the form of List of splitted substrings. Let's look at a code example for it:



void main() {

 String unSplittedString = "This String is to be splitted";


 //prints the list of substrings that gets splitted based on the delimeter which is a blank space.

  print(unSplittedString.split(' ')); // returns [This, String, is, to, be, splitted]

 String oneMoreString = "He ate an apple. And then went on to take a nap";

 //prints the list of two Substrings with a period being the delimeter.

  print(oneMoreString.split('.')); // returns [He ate an apple,  And then went on to take a nap]

}

substring():

The substring() method on dart String literals provides us with the functionality of retreiving a substring by its position. It takes in two parameters: The starting index (inclusive )and the ending index (exclusive). The second parameter is optional. The subString() method in code works as follows:



void main() {

 String unSplittedString = "This String is to be splitted";

  //Start at 0 index(T) and end at, not including index 4(a whitespace).

  print(unSplittedString.substring(0,4));  // prints 'This'

  //We can also only define a starting index and not the ending index, 
  // in such cases, the substring will be as long as the original string   

  print(unSplittedString.substring(5,)); // prints 'String is to be splitted'

}

toString():

Last but not the least, probably the one any developer would be mostly using is the toString() method. The sole purpose of this method is to return the string representaion of the object on which it is called. Let's see it in action:



void main() {

 int anInteger = 45;
 double aDouble = 65.0;
 bool aBoolean = false;

 // Converts the int variable anInteger into type String   
  print("This integer is now a String: ${anInteger}");

  // Converts the double variable aDouble into type String   
  print("This double is now a String literal: ${aDouble}");

   // Converts the bool variable aBoolean into type String   
  print("The boolean's value is not a value but a string and that is : ${aBoolean}");



}

That's all for now Folks! Thanks for reading this article ❤️
Feel free to post any queries or corrections you think are required ✔
Do leave a feedback so I can improve my content. Thankyou! 😃