Flutter, build a Chat app
Flutter is a new mobile development SDK brought to us by Google to help build fast, beautiful, and cross-platform mobile applications with native interfaces.

Before now I work on cross-platform applications mostly with Ionic and React Native. Then Google released the new Flutter SDK and it gained a lot of attention. Like every other developer, I’m constantly looking for simpler ways to write better codes so I decided to check it out and so far, the experience has been flawless, I have only good things to say. Which is why I’ve decided to share this tutorial.
One of my favorite features of Flutter is it’s rich material design features that let you quickly ship features with native end-user experiences. It also comes with an amazing native feel as it incorporates all critical platform differences such as scrolling, navigation, icons and fonts to provide full native performance on both iOS and Android applications.
Like always, we’ll build something to further expose the beauty of Flutter. The idea is to showcase the very basic concepts like states, classes, events etc. It will be a two-part series tutorial, in this part, we’ll build a basic chat application where a user can type and send messages.
On the second part, we’ll extend it to build a more conversational chat app where connected users can share messages and images using Firebase.
At the end of this part, we’ll have built this chat application:


Lets get digging… 😎 Build along !!
Prerequisites
First it’s worthy to note that Flutter uses a not so popular language called Dart. But if you are worried about having to learn a whole new programming language to build Flutter Apps, don’t be! Dart is majorly influenced by languages like JavaScript and Java. This helps to reduce the learning curve significantly.
Also if you’re already familiar with widgets then you’re in luck because In Flutter, Nearly Everything’s a Widget. If that’s not the case then brace up for a brand new experience.
Finally, we’ll proceed on the assumption that you have Dart and Flutter installed properly so we’ll just continue with the code. If you don’t have them installed, check out the installation guides
Project Setup
lets create a new Flutter project. On my Desktop, i’ll make a directory called flutter apps and open it up in VSCode like so:
//Desktop
$mkdir flutter apps
$cd flutter apps
$code .This will open up the directory in visual studio code. Then go ahead and create a new flutter project via the command pallete:
- In VSCode, select
viewand click oncommand palleteor simply pressCtrl + Shift + Pon the keyboard to open the command pallete. - In the pallete, type
New Projectand clickEnterit will open another pallete for you to type the project name where you’ll just typeflutter_chatand clickEnterto finish. It’ll prompt you to select a storage location, select theflutter appsdirectory in the Desktop. - It’ll take some seconds to setup the project and once its done, you’ll have a structure like this:

Now let’s run the app and see what the default app looks like before we make any changes to the code. Connect your physical device to your system with a USB cable or run your simulator/emulator if you’re on the native IDE. Once it is connected, Click Debug on the VSCode menu bar and select start Debugging. It will run the project on your device and you should get this output:

Building the chat app
Let’s start from scratch. Open the main.dart file, delete the existing code and update the file with this code:
This is a simple Flutter class. Here we first defined our main() function which is basically the entry point of our application. Every Flutter class extends either a StatelessWidget or a StatefulWidget in creation. The MyApp class in this case extends a StatelessWidget. Also we have to override the default build() widget and return the MaterialApp() widget which gives us access to the application title and home. The title specifies the name of the application and the home defines the body of the app.
Here we have set the home to a new class Homepage() which we have not created yet so at this point you will see errors in your code. To fix that lets create the Homepage() class and import it into this main.dart file. In the libs folder, create a new file called homepage.dart and set it up like so :
Here, we have the same thing as in the main.dart file. However, something is different, instead of the materialApp() widget , we returned a Scaffold() widget which will let us define the title of the appBar and the body of the app. In the body: we could simply pass a text to show on screen like this :
body : new Text("text")But we don’t intend to just show a text on the screen, we want to show the entire chat screen which is why we have the new ChatScreen() class in the body. To render this homepage class in the maid.dart file, first lets go back to main.dart and add this line of code at the top:
import 'package:flutter_chat/homepage.dart';This will now remove the existing error in that file but still show nothing on screen. This is because the class we’ve passed to show on screen has not been created yet so lets create it.
Create a new file called chatscreen.dart in the libs folder and set it up like so:
Lets break it down a bit. The build() widget has three children(). A ListView where all sent messages would be displayed, a Divider that provides a thin separation between the list of sent messages and a Container() that simply holds the _chatEnvironment() widget.
The _chatEnvironment() widget defines the particular chat layout of the app where users will type messages and send.
Because we’ll have an input field and a button in this widget, we defined a Row that takes in multiple elements. In our case, this Row will have two children() first a flexible() where we have the text input field and a container() to hold the button icon for sending the message.
In the button icon onpressed: method we have the _handlesubmit() function that submits the text we have type in the input field. This is possible because we defined a TextEditingController that will handle events in the input field. So when we press the icon button, the _chatController clears any typed text in the input field.
But that is not all. In the _handleSubmit() function, we also update the list of messages with the currently sent message from the ChatMessage() class. But we don’t have this class yet so if you see any errors at this point, don’t fret, you’re not doing anything wrong.
Let’s create the ChatMessage() class. In the libs folder, create a new file called chatmessage.dart and update it like so:
So here we have defined the model of each message we’ll be updating the list with. Each message will have an image avatar of the sender, the name of the sender (which we set to “Anonymous”) and the text message itself.
For this widget, the Container() will have a Row for the image and a Column for the name and the text. The name is already supplied as anonymous, the image url has also been passed in for fetching.
With this, our Flutter chat app is completed. You can run the app now and monitor how it functions. Once you type a message and press the send button icon, the handleSubmit() function is called. The _chatController then takes the text provided in the message and sends it to the ChatMessage() class from where it is now added to the list of messages and displayed on screen.
Conclusion and Next steps
Like most of you, i’ve only just started using flutter but so far, i’m loving it. 😍 Going forward i’ll be extending the app to a more conversational chat app where connected users can send and receive messages in realtime using Firebase.
You’re welcome to join me on the project Github repo lets build together or try it out yourself and beat me to it. Either way, keep learning and improving yourself. Until next time, stay sharp!
