Fluttering Forward: A Fresh Approach to Mobile App Development

Published in

tech@iiit-gwalior

8 min readApr 9, 2024

Whenever one tries to embark on the journey of using and implementing a particular coding language, they often feel overloaded by the information fed through blogs, tutorials, articles and all kinds of people, leaving them with the dilemma — “How should I begin learning it? And What’s the right way to implement it?”. These are million-dollar questions arguably left unanswered in the minds of many curious coders.

I’ve personally experienced the troublesome nature of this problem and needed a guide who could brief me about an abstract development path.

However, you need not worry about this — you are covered :)

Clear the Clutter — Try Flutter!

This article will explore the stepping stones that would ultimately lead an individual to gain sufficient knowledge and valuable insights about Flutter.

What’s Flutter?
Why Flutter?
Set up and Installation.
Getting the Basics right
Foundation of Flutter
Widgets
Let’s get started
State management in Flutter
APIs and third-party services (Firebase)
Testing, debugging and deployment
The Holy Scriptures

Note: This blog reflects how I would have started my development journey if given one more chance. Hence, there might be better possible paths than this. However, I’ve tried to make it the best.
Since the entire subject matter can’t be covered in a single article, I will focus more on the flow and importance of the steps in the journey as we proceed. Further references will be provided as a reference bank for an in-depth understanding of the subject matter in each topic. Keep Fluttering!

What’s Flutter?

Flutter is an open-source UI software development kit (SDK) created by Google. It uses Dart to develop mobile, web, and desktop applications from a single codebase — cross-platform development.

Flutter was first introduced in 2015 and has since gained popularity among developers due to its fast development cycle, expressive and flexible UI, and native performance.

For more information on Flutter and its history, please refer to the -

Reference Bank 1 -

Why Flutter?

Flutter and other mobile development languages

Flutter is by far the best choice for ambitious coders in the mobile app development domain. Let’s quickly brief some reasons up -

Strong community support
Widgets
Comprehensive docs and support
Own rendering engine
Performance similar to native apps
Single Codebase

Other competitors to Flutter include React native and other native languages.

For an in-depth analysis of each language and its performance and comparison between native cross-platform languages, please refer to -

Reference Bank 2 —

A.Cross platform vs Native app development

B. Flutter vs React Native

C.Why Flutter — answered

Set up and Installation

Video link for step-by-step installation of Flutter

To access the facilities and services provided by Flutter, we need -

A Code editor (VS Code is preferred)
Flutter SDK (to be downloaded from the official website)
Setting up the environment variables in the system
Android Studio (for virtual and physical emulators)
Flutter Doctor and a lot of patience, passion and enthusiasm!

The step-by-step guide for the installation of these requirements is given at

Reference Bank 3 — Flutter installation doc

Getting the Basics right

After having done the setup to build beautiful apps, we need to know more about the language — Dart and all concepts revolving around its implementation, especially Object Oriented Programming.

Dart is a programming language developed by Google. Since it follows object-oriented programming, its syntax will not appear much different from Java or Javascript. Yet, it will be easy for all newcomers to learn because of its straightforward terminology.

To learn more about Dart, its syntax and Object Oriented Programming, refer to -

Reference Bank 4 -

A.Learn Dart

B. Dart Cheatsheet

C. Learn Object Oriented Programming

A brief overview of the syntax and some practice would be good to go.

Foundation of Flutter -

This refers to the Flutter Architecture, which refers to the makeup of the framework, C++ compiler, and all its components. It is too much theory, but it will all turn into gold when implemented using code.

Also, this theoretical portion is the most asked in your coding interviews, so buckle up!

Reference Bank 4 — Architecture Overview

Widgets-

Widgets in Flutter are the building blocks of user interfaces.

Everything in a Flutter app is a widget, including structural elements like buttons and menus, layout elements like rows and columns, and even entire screens.

Widgets are used to define the structure and behaviour of the UI, and they can be combined and nested to create complex and interactive user interfaces. (Feel free to hover over widgets and components to learn more about their use cases and implementation)

There are two types of widgets — Stateless Widgets and Stateful Widgets. Learning about widgets and their implementation would provide you with ample conceptual clarity.

Reference Bank 5 — Stateless vs Stateful Widgets

Let’s get started -

They say a true programmer can’t live without using the keyboard for a long time, so let the action begin,

It’s time to create your first project on Flutter.

Run the command ‘flutter create projectName’ on your terminal.

(You’ll be provided with all the required components without hassle.)

As a beginner, you should develop a simple app with only one screen and UI. The most common suggestion would be creating a simple To-do app. We will learn state management using the same example. You can try hands-on creating just the UI of the To-do app screen. (Here’s the code)

import 'package:flutter/material.dart';

void main() {
  runApp(SimpleToDoListApp());
}

class SimpleToDoListApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple To-Do List',
      home: ToDoListScreen(),
    );
  }
}

class ToDoListScreen extends StatefulWidget {
  @override
  _ToDoListScreenState createState() => _ToDoListScreenState();
}

class _ToDoListScreenState extends State<ToDoListScreen> {
  List<String> tasks = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple To-Do List'),
      ),
      body: Column(
        children: [
          TextField(
            onSubmitted: (value) {
              setState(() {
                tasks.add(value);
              });
            },
            decoration: InputDecoration(
              labelText: 'Add a new task',
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: tasks.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(tasks[index]),
                  trailing: IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () {
                      setState(() {
                        tasks.removeAt(index);
                      });
                    },
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

State management in Flutter -

In the context of an app, state refers to the current situation of all the variables that make up the app. Imagine you are cycling or studying — both are states of your life.

So, State management in Flutter refers to managing and manipulating the state of widgets within a Flutter application.

State management in Flutter is primarily done using these methods -

setState
Provider
GetX
BLoC

Back to building apps, state management can refer to navigating through different screens via buttons and changing the screen's content based on user input.

Similarly, we can learn state management in Flutter by upgrading our To-do app further -

Reference Bank 6 -

Before moving into further topics, having more practice in state management is advisable as it is a crucial part of your projects. Hence, 2–3 projects can be made simply by the knowledge gained till now. It will help increase your confidence.

APIs and Third-Party Services -

We now dive deep into advanced concepts -

Fetching from and storing data in a database — using HTTP requests via JWT, the database can be from MongoDB or any other commonly used database platform.
Integrating APIs
Fetching data from RESTful APIs and their integration into the application

While it is good to implement all these functionalities using HTTP services or backend tools, all of these services are provided by Firebase — User Authentication, Cloud Firestore, Realtime Database and many more. However, Firebase has limited access to its services and is inaccessible after certain conditions.

Learning these services would make you the master of all trades in front-end mobile development. You can refer to -

Reference Bank 7 -

You can create more projects to enhance your skills and make an excellent impression on your CV. Also, look for mobile developer internship opportunities on suitable platforms. You are unstoppable now!

Testing, Debugging and Deployment -

Testing and debugging help improve your app’s performance and remove unnecessary errors. You don’t need to do it manually, but very effective tools await you.

Reference Bank 8 -

Deployment basically refers to converting your fully furnished app into a .apk version and uploading it to the Google Play Store or Apple App Store. Here’s how you can do it -

Reference Bank 9 — https://docs.flutter.dev/deployment/android

The Holy Scriptures -

In your development journey, If you ever find any difficulty in understanding any terminology or concepts, here are some resources that’ll help you magnificently -

Flutter docs — Anything related to Flutter would be up there.
Pub. dev — All the libraries imported in your pubspec.yaml file comes from here. Hence, do not hesitate to look for complex components or functionalities in this pool of libraries; you’ll definitely find some solutions.
Stack overflow — All technical difficulties are addressed here.
Recommended learning resource — A code-along course on Udemy named Flutter and Dart — The Complete Guide by Maximillian.

Thank you for reading this. I hope this provides you with more clarity going forward. Please give a clap if this article has helped you.