Flutter is widely regarded as one of the most popular and widely used technologies in the modern IT sector. When it comes to mastering new programming languages and frameworks, everyone has their own method. The first step, though, is to figure out what it is that you actually need to study. Let’s get started with today’s blog post where I lay out a roadmap for you to follow to become a Flutter developer!

What is Flutter exactly?

Flutter is one of the most popular cross-platform frameworks at the current time. It enables the very fast and efficient development of mobile applications for 2 platforms – Android and iOS – using a single code base, which greatly simplifies the development process as well as lowers the cost of producing an app for a fledgling startup.

Why should you learn Flutter?

Flutter technology is gaining a lot of popularity recently, with many companies maintaining native applications choosing to port their applications to Flutter because it saves them time spent taking care of two platforms at once. There is also quite a large community that has grown up around Flutter and is constantly creating new libraries, as well as more and more startups that are choosing to write their solutions in Flutter.

My learning path for Flutter development

I am a developer who started his adventure with programming from scratch. On my learning path, I made some mistakes that could have been avoided if I had the experience that I have today. And this is the experience I would like to share with you in this article 😀

How should you start your adventure with Flutter?

If you are already a programmer and have mastered one programming language, all you need to do is familiarize yourself with the specifics of the Dart programming language syntax and you can move on to the next step.

So the first step would be to start with the foundation of Flutter, i.e., learning the programming language Dart. If you’ve never had experience with programming, it’s really worth spending a lot of time learning basic programming concepts such as

  • variables,
  • functions,
  • data types.

Then move on to the basics of object-oriented programming because Dart is an object-oriented language. It’s really worth stopping a little longer at this stage to solidly build your foundation for further learning. Remember, learning to program is not a 100-meter sprint but a marathon. Regularity here is the key to success 🙂

I can recommend this tutorial as it will be helpful in mastering the foundations of the Dart language. Thanks to it, you will understand the basic concepts of the language as well as get familiar with the syntax.

Flutter basics you need to know

If you feel confident in the Dart programming language and understand the fundamental concepts that govern it, you can progress to learning Flutter. In the beginning, it’s worth noting that Flutter itself is just a user interface development kit that Google created, and all business logic is powered by the Dart language itself.

My personal recommendation at this stage is to go through one of the many available crash courses available for free on YouTube. I personally recommend this one. 

This course will teach you how to create basic UI elements in Flutter, and it definitely won’t bore you because when you’re done, you’ll have some pretty nice-looking views that will motivate you to keep learning 😉

Stateless and Stateful – what is a state in the Flutter app?

Once you know how to create basic UI views, it’s time to add some logic to them, and here we will use the concept of state. This is the ability to hold the values of variables while the application is running. It allows us to build your first single-screen application using this concept 

My recommendation would be to create a simple to-do list, which is an application that allows the user to save the entered text to a list on the main screen of the application. This is a great project to refresh ourselves with the knowledge we acquired in the previous stage, as well as to understand exactly how we manage the state of the screens using the stateful concept.

So let’s create a new project and a basic view under our application, which we will call Todo App, and then convert the stateless widget to stateful. Only in this configuration, the screen will hold the state of our items.

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Todo App’', home: TodoList());
  }
}

class TodoList extends StatefulWidget {
  @override
  _TodoListState createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Todo App')));
  }
}

Next, we create a variable that will hold our data as well as a text controller that will be responsible for holding the data entered by the text field.

final List<String> _todoList = <String>[];

final TextEditingController _textFieldController = TextEditingController();

And the next step is to create a method responsible for adding items to the list.

void _addTodoItem(String title) {
    setState(() {
      _todoList.add(title);
    });
    _textFieldController.clear();
  }

It’s certainly worth noting the setState(() {}) call is where we assign the state to the variable, and without this element, the state will not be preserved. After creating the method that adds the elements, we create a UI element that will display a text box and a button to validate what we have entered.

Future<void> _displayDialog(BuildContext context) async {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: const Text('Add todo'),
            content: TextField(
              controller: _textFieldController,
              decoration: const InputDecoration(hintText: 'Enter text here'),
            ),
            actions: <Widget>[
             ElevatedButton(
                child: const Text(“Add”),
                onPressed: () {
                  Navigator.of(context).pop();
                  _addTodoItem(_textFieldController.text);
                },
              ),
            ElevatedButton(
                child: const Text(“Back”'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              )
            ],
          );
        });

Note that in creating this view, we used many of the widgets you learned about in the previous section. If you see something new to you, the best thing to do is to take a peek at the Flutter documentation. It’s created very clear and accessible, so you can easily check out the new widget and get acquainted with its purpose.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Todo App')),
      body: Text(‘todo list’),
      floatingActionButton: FloatingActionButton(
          onPressed: () => _displayDialog(context),
          tooltip: 'Add todo,
          child: Icon(Icons.add)),
    )

Next, we connect the _displayDialog function to the FloatingActionButton element. This lets us add new items to the list.

Next, we create a list of items using the ListView.builder() widget and give it our array of data.

  body: ListView.builder(
        itemCount: _todoList.length,
        itemBuilder: (context, index) => Text(_todoList[index]),
      ),

And this is the end of this project. Now, by typing a given text, you are able to add new items to the list.

In this way, you have created a very cool application using the concept of state in Flutter. If any part of this tutorial was unclear, you can check out the repository for this project on my GitHub.

Notice also that if you restart the application, the data disappears. This is how the application holds the state of individual variables until you restart or exit the application.

It’s worth stopping at this point and creating a few of your own small applications using the concept of state because in learning programming, a solid mastery of the various concepts is the key to success, and it’s also worthwhile at this time trying to learn about new widgets and ways of creating UIs to get comfortable and confident with them. Here are many helpful tutorials from YouTube, which are available for free.

BloC as a global state management tool

Moving on to advanced topics, the first important concept is the application status manager. It’s worth checking out this tutorial to familiarize yourself with this concept.

To begin with, it’s worth noting that it’s quite a difficult concept to fully understand, so it’s worth stopping here for a while to fully understand why we need such a tool and how to use it correctly. Once we have mastered this tool, creating a few sample projects using it, such as a more extensive to-do list or shopping cart, will be a great idea to test this concept in practice.

Remember that practicing and building your own projects is key to learning programming because it teaches you to solve problems effectively and think abstractly, which is a much-needed skill in a programmer’s job.

Queries to the API and connecting the application to the backend

Another of your key skills as a future Flutter Developer is the ability to send and receive data via HTTP requests. This is also a very complex topic, so I can suggest a tutorial.

It’s worth getting acquainted with how data is sent and received by our application and familiarizing ourselves with the key concept in this topic, which is JSON. After understanding and going through the tutorial, I highly recommend creating your own application using API queries, e.g., using one of the open APIs. I’m tossing a list of ideas here 🙂

Flutter architecture is the key to success

Being familiar with the concept of architecture increases your probability of success to become a Junior Flutter Developer. I described this topic in my previous blog post.

It’s very important at this stage of learning to familiarize yourself with the key concepts of the three-layer architecture such as UseCase, presentation layer, domain, and data. Then it’s worth creating for your portfolio on GitHub some larger applications using such architecture – for example, an application to retrieve the weather status of a city. Without a doubt, it will increase your chance of success. 

Going through this series of tutorials will also add a great deal to your scope of knowledge.

Contact

Do you want to find out more about Flutter app development?

Talk to us!

To become a Flutter Developer, you must practice, practice, and practice

In this article, you have learned the most important concepts you need to master to become a Junior Flutter Developer. The best idea after learning all of them is to write a massive project using all the topics you have learned. Bonus points if the project is about your interests and is useful because such projects are always a big plus. 

Remember that learning to program is a long process, and systematicity is critical here. You should set yourself up for a long marathon of knowledge and, day by day, make a small contribution to your future success in the IT world. You may find more tips from Flutter Developers in the newest publication. Good luck, and I’m keeping my fingers crossed!