Flutter Roadmap 2023
Hello Everyone, welcome to flutter roadmap please join me as we travel the road to becoming a flutter developer. This article is inlined for those who are keen to start with Flutter. A roadmap for beginners to learn gradually from all necessary resources. So, let’s go!🚀
💫 What is Flutter?
First of all let me explain very briefly what is Flutter.
Flutter is a cross-platform mobile app development framework it is developed by Google it is used to develop native apps for Android, iOS, Windows, Linux, Mac, Google fuchsia, and the web from a single code base it is an open-source framework it is used to develop high performance and high-quality native apps.
Introductory to flutter is in best summarized in below-mentioned videos;
Now let’s see the roadmap of flutter.
🎯 Step 1 Learn Basic Dart
The first step is learning basic Dart. Solid understanding of Dart is required to build quality apps with Flutter. So first, you need to learn basic Dart you can learn Dart from this website.
Here are some topics you need to learn:
· Basic “Hello World!” program
· Conditions and Loops
🧿 Step 2 Learn Basic Flutter
After learning basic Dart you need to learn basic of Flutter learn about layouts widgets in Flutter start by learning layouts widgets like:
· AppBar
· Text
· Button
· Image
· Row
· Column Etc
Here are some code example to create basic widgets:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Learn Basic Flutter',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text(
'AppBar',
style: TextStyle(color: Colors.white),
),
centerTitle: true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 20),
child: SizedBox(
height: 150,
width: 150,
child: Image.asset('assets/img/flutter-icon.png'),
),
),
const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Here is Text',
style: TextStyle(
fontSize: 16,
color: Colors.black,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 10,
),
Text(
'in Row',
),
SizedBox(
width: 10,
),
Icon(Icons.favorite),
],
),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 18, vertical: 16),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Here is Text Field',
),
),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
),
onPressed: () {},
child: const Text(
'Button',
style:
TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
))
],
),
);
}
}Output:
🔗 Step 3 Learn Navigation & Functionalities
After learning basics of Flutter, you need to learn about navigation and functionalities learn about navigation like:
· Create two text fields and Implement functionalities like add and subtract
Here are some code example to implement navigation:
import 'package:flutter/material.dart';
import 'package:learn_basic_flutter/second_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Learn Basic Flutter',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const FirstScreen(),
);
}
}
class FirstScreen extends StatelessWidget {
const FirstScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text(
'First Screen',
style: TextStyle(color: Colors.white),
),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.all(10.0),
child: Text('Navigator.push', style: TextStyle(fontSize: 20)),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
),
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return const SecondScreen();
}));
},
child: const Text(
'Go To Second Screen',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
))
],
),
),
);
}
}Second Screen code example:
import 'package:flutter/material.dart';
class SecondScreen extends StatelessWidget {
const SecondScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.red,
title: const Text(
'Second Screen',
style: TextStyle(color: Colors.white),
),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.all(10.0),
child: Text('Navigator.pop', style: TextStyle(fontSize: 20)),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
),
onPressed: () {
Navigator.pop(context);
},
child: const Text(
'Go To First Screen',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
))
],
),
),
);
}
}Output:
📦 Step 4 Learn Flutter Packages
Flutter supports using shared packages contributed by other Developers to the Flutter and this allows quickly building an app without having to develop everything from scratch. Learns about package like:
· HTTP
· Sqflite
· Etc
Learn about how to use them you can also access all the packages using the pub.dev website.
🌐 Step 5 Learn use API
Data, data and data everything we see in today’s world is just data so how can we get data into our app how can we integrate into our app fetching data from the internet is necessary for most apps luckily Dart and Flutter provide tools such as the HTTP package for this type of work you can also learn it by referring to flutter’s document or here some reference.
📁 Step 6 Learn use Shared Preferences & Sqflite
All mobile applications nowadays revolve around data some of it is stored in cloud and some in local storage. According to its usage to provide offline access to the app it is necessary to store data in a local database. Shared_preferences and Sqflite are used to store data locally learn how to use Shared_preferences and Sqflite. And here some reference you can read.
📊 Step 7 Learn State Management
Managing state in an application is one of the most important and necessary process in the life cycle of an application in flutter state is whatever date you need in order to rebuild your UI at any moment in time when this data change it will trigger redraw the user interface learn about how to use State Management in flutter using:
· Bloc
· GetX
· Provider
· Riverpod
· setState
· Etc
🔥 Step 8 Learn to Use Firebase
Firebase is a backend service it is used to build apps faster learn about how to use firebase and flutter using:
· Etc
🎨 Step 9 Animation & Custom Painters
Flutter is on the rolls nowadays like everything related to UI Flutter makes custom drawing easy too learn about how to use animation and custom painters in flutter.
🔧 Step 10 Learn to use CI/CD (continuous integration and continous deployment)
As we all know making a release to the Apple store & Play store is a grievous task especially if you are working with a cross-platform framework that’s where the CI/CD is coming to help. CI/CD helps accelerate release rates since the time to detect and correct failures in production is shorter. Learn about how to use CI/CD using Github Actions. For more information you can read this articles.
