Introduction:
What is APP DEVELOPMENT?
Nothing much fancy or too mysterious to tell about. But basically, app development epitomizes the meticulous orchestration of intricate software applications poised to traverse an extensive gamut of platforms including mobile apparatus, desktop interfaces, and web conduits. This cerebral undertaking is underscored…
More of a boring stuff right? But what we believe here in PClub is that app development is the magical process of turning your wildest ideas into little digital buddies that live on your devices. Imagine having a personal army of tiny obedient robots ready to entertain you, keep you informed about your girlfriend’s message, or even help you order pizza at 2 AM. That’s app development in a nutshell! Interesting, huh? :)
Why APP DEVELOPMENT?
- Learning app development enhances essential technical skills like coding, problem-solving, and software design. It cultivates proficiency in programming languages alongside familiarity with development frameworks and tools.
- Mastering app development equips individuals with in-demand abilities crucial for careers in technology, providing a solid foundation for growth and specialization within the industry.
Getting Started:
Choosing A Framework
What framework should I use for App Dev?
Now here comes the most fundamental question about choosing the framework. There exist many options for that like React Native, Flutter, Ionic, Xamarin, etc. Now we will be using Flutter as our framework further in our roadmap.
Wait, what? You want to know why? Well, why wouldn’t we use Flutter? I mean who doesn’t love darting around with a fluttering feeling of excitement? If this doesn’t make sense, watch these videos to find out about what Flutter is, what that darting means, and why we should use it.
If you prefer reading blogs, check this out:
Now as you have decided to use Flutter, let us start.
But before starting, you should know that learning Flutter is a wild ride and there is no better way than to enjoy it with some memes? As you can see on this page, these memes might initially make you go “What the Flutter?” But trust us, by the time you’re a Flutter pro, you will grasp these memes faster than your app crashes during a live demo. So buckle up, get ready to code, and enjoy the fun side of Flutter!
Throughout the journey, and beyond, you can take reference to wonderfull book title The Flutter Foundation by Chetankumar Akarte
You can either go this site, and get the book for free by entering the amount 0 and then hit buy. It’ll prompt you for your mail id and once you enter that, you will recieve the download link on your provided mail id.
or you may access the book here
Week I (Learning Dart And Basics of Flutter)
Throughout our journey, the best resource to look up is the official documentation of Flutter, well maintained and updated by Google.
For Dart, refer to this
For Flutter Packages, refer to pub official site
Day 1 – Exploring and Installing Flutter
The crucial first step in our journey is to set up our development environment. So go ahead and install Flutter SDK using the guide Install Flutter. After installation, you need to test the setup. So follow these steps to Test a Sample App.You don’t need to worry about the files and the code, you will grasp it soon.
Let’s learn about Hot Reload and Restart—the dynamic duo of Flutter development. Hot Reload is the magical button that instantly fixes your app’s mess-ups while Hot Restart is for when you’ve really messed up and need a fresh start. Watch this to know more:
Till now you must have known that Flutter uses Dart as its language. We can think of Flutter as Iron Man’s stunning suit attracting all the attention whereas Dart’s the arc reactor, the hidden power core that keeps him going. Read this blog to know more about why Flutter uses Dart.
Day 2 – Revealing The Mysteries of Dart
Dart is like the distant cousin of Java. They both share that “strong” and “static” typing DNA but Dart throws in some new moves like optional semicolons and an inclination for Fluttering around mobile app development. If you are familiar with Java or some other programming languages, then you will find Dart very similar with some new things added. Go through this tutorial to get familiar with the language:
For diving deeper, check out the Language part of Docs up to Error Handling:
You can practice your concepts on DartPad, the online editor for Dart.
Day 3 and 4 – OOP In Dart
In Dart, Object-Oriented Programming (OOP) is as integral as a knight’s armour in battle. Dart supports OOP through its robust class-based system where everything revolves around classes and objects. Dart’s OOP features inheritance, encapsulation, and polymorphism, allowing developers to create complex interlinked structures with ease.
Now if you are familiar with Classes and Objects in some other language, just go through this Docs to grasp the syntax. If you are new to OOP, go through these videos to grasp what is OOP and why we need it:
After grasping the basics, go through any one of these docs to learn particularly about OOP in Dart:
Learning is incomplete without Application of Concepts. Try to solve the problem 1 and 2 given in this document DART ASSIGNMENT. (Optional) You are highly recommended to do the problem 3 also but not necessary.
Day 5 – Entering The “Upside Down” Of Flutter
Let us create our first app in Flutter. Prepare for an epic adventure where you’ll meet exotic creatures like ‘setState’ and ‘buildContext’. Get ready to dive into the wonderful world of widgets and hot reloads. You don’t need to memorize the code. Just make sure you are understanding most of the code. Just follow this codelab:
Here’s a video to follow along for the same codelab. But it is advised to refer it only when you are having difficulty in codelab:
Day 6 and 7 – Forget Netflix, Try WidgeFlix!
Now when you have built your first app, get to know about the basic widgets more:
The widgets in our app are arranged in a tree form called a widget tree. Get to know more about it:
First get introduced to the very basic stateless and stateful widgets. Even before, get to know what is state? Also, you can check out the blog as well.
Wanna chill a bit? Check out Google’s this playlist—because who doesn’t love binge-watching UI components? It’s like a Netflix series but with excitement about buttons and sliders. You really don’t need to go through all the videos and mug up the code. Just get to know a few of them and use them when you build your app:
We know that’s not enough to quench your thirst for adventure, so let us dive into these codelabs to clear our concepts of creating layouts:
Week II (UI Design and State Management)
If you survived the WidgeFlix, then let us step into week second where we’re diving into the world of UI design, covering everything from navigation, interactivity to animations, theming, responsiveness, and asset management.
Day 1 - App Navigation - Starring Buttons, Screen Drama and Plot Twists
Welcome to Day 1, where your app will navigate like navigating a dream within a dream within a route within a route. By the end, it’ll be switching screens smoother than a plot twist in Inception—because who needs mind-bending movies when your app’s the real master of suspense? Check this out to know what are routes .
-
Flutter Routes & Navigation – Parameters, Named Routes, onGenerateRoute
-
Flutter Tutorial for Beginners #23 - Maps & Routing
Alternatively, check out this blog Navigation and Routing
Or refer to the docs Navigation and routing - Flutter
Let us make our app interactive now. Check out these widgets first:
Further, if you are interested in the workings of these widgets, check this out. Not necessary, but recommended:
Check out these blogs to learn about snackbars and text fields:
- How to display a SnackBar in Flutter: A tutorial with examples - LogRocket Blog
- Flutter TextField - Javatpoint
You can also refer to the documentation for more on interactivity:
Day 2: Colors, Typography, Theming and Assets - Achieving the Visual Poetry
Welcome to Day 2, where we transform our app into the visual spectacle of Avatar’s Pandora. Dive into colors, fonts, and themes so vibrant and immersive, that our design skills might just get a nod of approval from James Cameron himself. Check out this blog to grasp the basics of theming.
Also, check out this video
Refer to the docs for font styles and more. Use themes to share colors and font styles.
Now, let us make our app shine with carefully curated images, videos, and icons. Check out these videos to know more about adding images and videos in our app:
So are you ready to give your app a stunning makeover? Then it is highly recommended to dive into this codelab Flutter Boring to Beautiful and watch the transformation.
Day 3 & 4 - Layouts, Responsiveness, Adaptability and Animations
Let’s get along with Day 3 & 4, where we’re about to turn our app so responsive, that they’ll adapt quicker than a chameleon camouflaging with its surroundings. Let’s stretch those screens and bend those designs—it’s time to make your app as adaptable as Jeff Bezos’ business strategy!
First learn about responsiveness:
Also, learn about some famous animation tools in Flutter:
Prepare for an avalanche of codelabs! If you thought WidgeFlix was intense, wait till you start binge-coding. Follow along this codelabs and its recommended to do all of them. But if it seems overwhelming, try out first and third only.
-
Building Beautiful Transitions with Material Motion for Flutter
-
MDC-103 Flutter: Material Theming with Color, Shape, Elevation, and Type
Day - 5 State Management Using Providers
Welcome to Day 5, where we dive into state management, and fear not because by mastering state management, you’ll tame the chaos and bring order to your app’s wild and unpredictable state. First let us understand what state management is.
Now if you are thinking of the state management solutions Flutter provides, then you are welcome to the great Flutter state management debate—the coding world’s version of arguing whether tea or coffee is better. Provider, Riverpod, Bloc, Getx… it’s like choosing the best book genre. Actually there’s no perfect answer, just endless discussions! To get an overview, checkout Flutter state management tips - Medium
You can explore as per your wish but we’ll move on with using providers for state management in our roadmap.Checkout any one of this video to get basic understanding
Check out this blog too Flutter Provider: What is it, what is it for, and how to use it?
Types of Providers 7 Common Flutter Providers Explained
If you want to dive deep into state management, you can watch this (Not necessary but recommended).
Also, check out this example Simple app state management - Flutter
Day - 6 & 7 Project - Building an E-Commerce App
Today, we’re diving into the thrilling world of online shopping where we will be creating a real e-commerce app with hardcoded product details.
You can read this to learn recommended flutter file structure convention
Here’s the problem statement stating the functions required. Problem Statement (App Dev Roadmap) There’s not much design constraint but it will be great if you keep it as beautiful as possible. You can refer to this design also. Ecommerce Mobile App - UI UX Design
Also, here is the video tutorial to follow along Complete Flutter E-commerce App With provider - Flutter e commerce app
Note: Watching this tutorial is highly discouraged, this is for reference purpose only. Try to write the code yourself and refer to this only when it’s really needed.
Wait, what? Are you exhausted already? Brace yourself, because after this, “Winter Is Coming”. We’re going to dive into storage, networking, backend integration, testing, debugging, deployment… The White Walkers of app development. Get ready to wield your coding skills like Valyrian steel, because this is where the real battle begins!
Week III (Networking)
Welcome to the networking section, where you’ll find out that ‘connection refused’ isn’t just about your social life. In most apps, you’ll need data from other devices, and this week will teach you exactly how to collaborate with people because your code can’t live in splendid isolation forever, and neither can you!
Day - 1 Introduction to protocols
On our first day let us enter the world of protocols, where rules are like the Matrix code—seemingly complex, but once deciphered, you’ll feel like Neo bending reality. Get to know about protocols here
Video explanation: Network protocols
Now you might be getting a hang of how computers “communicate”.
Let us dive deep into http now What are HTTP servers?
Watch till 28:21 timestamp.
Now learn about http methods here:
Day - 2 Dive into API, JSON & Making Requests
Think of APIs as virtual postmen for apps—delivering data packets, exchanging messages, and occasionally getting lost in the digital equivalent of a maze, leaving behind a trail of ‘404: Address Not Found’ signs. Learn more about it - What exactly is an API?
Here is a presentation to give you further insights on How real life applications gather data from around the world?
JSON (JavaScript Object Notation) is like the language that Postman uses to deliver messages between apps and servers. Imagine each JSON object as a letter, where curly braces {} are envelopes containing key-value pairs—like addresses and messages. More about it - What is JSON?
Before learning to handle JSON in flutter, learn about asynchronous programming in flutter.
Learn how to handle JSON in flutter - Parsing complex JSON in Flutter
Now that you have understand all the pieces, you should play around with api requests to get the feel of it. To play around, browse the web for free and accessible api’s or you can find some here. Choose an api, and hit the endpoint using Hoppscotch, fullfilling all the requirements listed on the api doc while making the request, and then observe what you recieve.
Day - 3 Flutter package : Http
Now that you are clear with the basics, it is time to learn how to exactly implement it in your flutter workflow
Explore the Flutter cookbook on networking for an eye-opening experience (Leave the websockets part).
Http package is great to begin with, but there is another package that is preferred dio, because of it’s rich features and advanced capabilities. You can look into it - Dio Note: this roadmap will stick to http for learning purposes
Day - 4 & 5 Learning Implementation
Learn how to put up the data you recieve onto your application in these videos.
Take a look at this Medium article, that dives into the integration of api in flutter.
Now follow this tutorial that describes how to use the JSONPlaceholder in your flutter application
Day - 6 & 7 Weather app project
After tackling the thrilling adventures of Widgeflix, surviving the Avalanche of Codelabs, and after navigating the bustling markets of e-commerce! Now, it’s time to chill with a weather app project. Let’s breeze through this next task and bring some meteorological magic into your app inventory!
You have to complete this task. It is highly recommended you code the project yourself, and when stuck, feel free to take the help of google, but ensure you are not blatantly copying, but learning each part.
Here is model apporach to the task:
Follow from 13:09:54 to 16:32:14
You are advised to go through the above tutorial after you have attempted the task, as it will provide great learning to other aspects such as conventions while working on a real project.
Week IV (Storage & Stepping into Backend)
Day - 1 Intro to storage, Shared Preferences
It is hard to find a real life application that does not store any data on the user’s device. Welcome to the world of storage, where your app learns to remember things, just like you never forget your coffee in the morning!
Read this to take first step into storage in flutter. Note: We will not exactly follow the listed ways to approach storage, spoiler alert! This was just to give a brief intro.
Let’s dive into the basics and get our hands dirty with Shared Preferences, the sticky notes of app storage.
Flutter: shared_preferences package Intro
If you prefer reading refer the shared preferences cookbook
Always refer to the offical docs to dive deep into the functionalities.
This article will fast track you to learn all basic functionalities of shared preferences, now over to coding!
Try to code a simple UI app that makes use of shared preferences to store user prefrences. Think of ways where you can use shared preferences, and try to build it, like saving the theme of the app, or like in the weather app you built before, to store the user preference of Celcius or Fahrenheit. You get the idea, it is your job to paint it. When you move forward, it will help you achieve better idea of where to use which kind of storage.
You can also refer to this sample tutorial:
Day - 2 Flutter Secure Storage, Path Provider
Now we’re stepping up our game. Secure storage is like a vault for sensitive data, and path provider helps your app find a safe place to keep its treasures.
Finding the right path is crucial,whether it’s the entry to the EDM night of Antaragni, or the exact path to store files in your device.
Flutter provides File class which enables to open, close, read, write and delete files for the specified file path. Before saving data to a file, the location of the file has to be known.
Path Provider package allows you to navigate through directories and files.
Note: You are highly recommended to read the supported methods of the file class to tailor the code according to your fit :)
Learn about its implementation in the cookbook.
Flutter Secure Storage: For data that requires protection, just like your favorite snack hidden from your siblings.
Guide to all things secured.
Read this to grow your appreciation for the secure storage.
Day - 3 Local Databasing
Welcome to the arena of local databases! We have broadly 2 types of local storage options, one type are classified as SQL and other NoSql. (No rocket science)
Today you will be learning about the popular NoSql choices.
In one corner, we have ObjectBox, the speed demon with a black belt in data kung fu. And in the other corner, Hive, the lightweight contender that stings like a bee and floats like a… well, a hive, I guess. Let’s dive in!
You can stick with one of the above, and we recommend ObjectBox if you do so
Hive:
- Hive Docs
- Storing local data with hive (and provider) in flutter
- Tutorial for Hive implementation in flutter
ObjectBox
This article sums up our long day!
It goes without saying you are highly recommended to go through the docs of either service.
Day - 4 (SQL Database & Intro to Firebase)
SQL Database: SQLite
SQL is like that reliable old Toyota in your driveway. It’s not flashy, it won’t turn heads, but it’ll get you where you need to go without complaining. It’s been around longer than some of you have been alive (no offense, Gen Z), and it’s not going anywhere anytime soon.
Why use SQLite? Well, it’s like having a tiny, obedient genie living in your app. It’s serverless, requires zero configuration, and is more reliable than your friend who swears they’ll pay you back “next week”. Plus, it’s ACID-compliant, which sounds like a bad trip but is actually a good thing in database land.
If this is your first interaction with SQLite, you can check out the SQLite Tutorial
Now coming over to Flutter specifics,
As always, the go to resources:
Now to give you the feel of its implementation, as always try to implement this instead of other services you used in your previous projects, or you can come up with an application from scratch entirely.
Here are model tutorials in article and video formats
Intro to Firebase
This article will brief you about what is firebase.
You can also check this article, if you want to dig deep into “what” of the firebase
Next we’ll learn the “how” of the firebase
Day - 5 (Firebase Continued)
Learn how to integrate firebase in flutter
Hands on codelab:
We have mentioned many times now, best way to learn (& lowkey keep your interest fueled) to come up with projects from self. Try to code an application with firebase or you can follow this tutorial:
Flutter Tutorial - How To Publish Flutter App On Play Store
Day - 6&7 (Backend)
You must have heard of this term many times in your journey till here. Well the “Day” has arrived, when you finally delve into the world of servers.
Lucky for us, our fellow peeps have beautifully crafted the path for backend in the Web Development Roadmap. Head over to backend week of Web Roadmap and follow along! The roadmap will provide you with a choice among frameworks, and you are free to choose any one. Remember, it is better to learn one technology proficiently, than being flooded with teach stacks and not having proficiency in any one. This article can help you decide what to go forward with.
We have provided 6 days for backend part, because of the overlapping content that is to be skipped like HTTP and API calls
Week V (Backend Contd. & Full Stack Application)
Day - 1,2,3 (backend)
Continue striding in the backend roadmap.
Day - 4 Integration of Backend with Flutter
Node js
How to connect Flutter application to Node.js?
How to Integrate Node.js with Flutter
Go
Django
Connect Flutter Android Application with Django Backend (Hindi)
Django Meets Flutter: Integrating the Backend and Frontend for Effortless App Development
Day - 5,6,7 Building Full stack E-Commerce Application
Remember the e-commerce project we tackled earlier? You know, the one where we dipped our toes into the shallow end with just the frontend? Well, get ready, because now we’re diving headfirst into the deep end with a full-stack e-commerce application.We’re talking about a real, functioning online store with a backend that’s ready to handle all the crazy demands of the digital marketplace.
Project Task: Document
It is highly recommended you code the project yourself, and when stuck, feel free to take the help of google, but ensure you are not blindly copying. Check out this video to for reference:
Week VI (The Final Destination)
Welcome to the final frontier of our app development saga: Testing, Debugging, Performance Optimization, and Deployment! If you thought coding was fun, wait until you meet the unsung heroes of the development process. Imagine spending weeks crafting your masterpiece, only to watch it crash and burn during the production, and to avoid that let’s get started.
Day - 1 Introduction To Testing
Welcome to testing, where your app reveals its true personality—flawed and unpredictable. Think your code is flawless? Testing is here to laugh in your face and show you just how wrong you are. First know more about testing and its types here
- The Complete Guide to Flutter App Testing with Examples
- Flutter Testing For Beginners - The Ultimate Guide
Now follow along this codelab to know some more about it
Day - 2 & 3 Diving Deep Into Testing
Learn about the different tests by referring to the respective blogs and videos.
Unit Tests: The Illusion of Perfection
These are the tiny oasis of control in the vast desert of app development. Here, you isolate a single piece of your code, coddle it, and make sure it behaves exactly how you expect.
Widget Tests: Interactivity Defined
Widget tests are like having a team of perfectionists for your UI. They meticulously check every interactive element of your app, from buttons to sliders, ensuring flawless performance.
Integration Tests: The Great Betrayal
Integration tests are where you naively believe that all your perfectly tested units and widgets will play nice together. Infact, they may or maybe not. Get ready for the chaos!
UI Tests: The Visualisers
UI tests are like app detectives with magnifying glasses, checking every pixel and interaction to catch bugs before users do. So, get ready to inspect every button click and animation with the precision of a hawk on a hunt.
Continuous Integration/Continuous Deployment (CI/CD)
CI/CD is the backbone of modern software development practices. It streamlines the integration and deployment of code changes into production environments. By automating the build, test, and deployment processes, CI/CD ensures that software updates are delivered swiftly and reliably, maintaining the integrity and stability of applications throughout their lifecycle. Further to learn more about CI/CD testing (In general testing), you can refer to the official documentation.
Day - 4 Debugging
Debugging is like being a detective in a digital mystery. When bugs pop up after testing, it’s time to channel your inner Sherlock Holmes. So let us learn more about the techniques and tools for the same.
Now you must have found Flutter Dev Tools as a gamechanger. So lets learn about it and its use.
For UI debugging, have a look at this: Debug properties - Decoding Flutter
Day - 5 Performance Optimisation
Welcome to the race day of app development, where we’re not just tweaking things; we’re strapping a rocket to your code! It’s time to optimize your app’s performance so it runs smoother than a hot knife through butter. Just watch tutorial talk to have a better idea about it.
Refer to this article for more tips Ways to Optimize the Performance of Your Flutter Application
Day - 6 Deployment - Conquering The Final Summit
After scaling the peaks of Widgeflix, navigating the avalanches of codelabs, weathering the storms of e-commerce, and mastering the full-stack wilderness, we finally arrive at the summit of deployment. Here, we’ll prepare your app for its grand entrance into the Stores. Get ready to launch your creation into the digital world.
Note: We will learn to release the app on Android Play Store only. For other platforms, you can refer to the deployment section of docs.
Refer to the video or the article.
So finally, after all the coding marathons and deployment dramas, it’s time to sit back and just relax. And you will be like “The App Is Done” and be chilling like this.
Day - 7 Security And Maintenance
You thought deployment was the finish line? Right, huh? Just Think again! Welcome to data security and maintenance, where there’s no rest because “An App Is Never Done”. Let’s explore how to keep our digital doors securely locked. Go through this articles.
- Best Practices for Securing Your Flutter Mobile App - Leobit
- Data Security in Flutter: Best Practices
Software Maintenance - it is the endless joyride that begins just when you thought you could relax after deployment. It’s like a gift that keeps on giving, whether you asked for it or not. So keep maintaining.
And that, my friend, marks the end of our journey through the highs and lows of app development.
Ending note
Hats off on completing this journey into app development! While our journey together may be done, yours is just beginning. As you explore further into app development, here are a few tips to keep in mind:
- Stay Updated: Technology evolves at tremendous speed. Keep exploring new frameworks, languages, and tools to stay ahead of the curve.
- Collaborate: The best apps are often the result of collaboration. Work with designers, developers, and stakeholders to bring diverse perspectives into your projects.
We tried to keep the roadmap as interesting as possible. We hope you liked it. Happy Coding :)
Contributors
- Karan Keer (+91 93581 52408)
- Saksham Agarwal (+91 91180 52439)