Flutter Full Roadmap Hindi – Beginner to Advanced

Blog by LearnWithRehan | Author: Rehan Khan

---

1️⃣ Environment Setup (Flutter Installation)

Q1. Flutter क्या है?
A: Flutter Google का UI toolkit है, जो single codebase से Android, iOS, Web और Desktop apps बनाता है।

Q2. Flutter install कैसे करें?

• Flutter SDK डाउनलोड करें।

• Path variable में Flutter SDK add करें।

• Terminal में flutter doctor run करें।

• Android Studio या VS Code install करें।

• Emulator या real device configure करें।

Q3. Flutter doctor क्या करता है?
A: यह आपके system setup और missing dependencies check करता है।

---

2️⃣ Dart Programming Basics

Q4. Dart क्या है?
A: Dart Flutter की programming language है।

Q5. Variable Declaration

int age = 25;
String name = "Rehan";
bool isFlutter = true;

Q6. Function Example

int add(int a, int b) {
  return a + b;
}

Q7. Class & Object Example

class Person {
  String name;
  int age;
  Person(this.name, this.age);
}

void main() {
  var p = Person("Rehan", 25);
  print(p.name);
}

---

3️⃣ Flutter Basics

Q8. Flutter Project Create करना

flutter create my_app
cd my_app
flutter run

Q9. main.dart क्या है?
A: App का entry point file।

Q10. StatelessWidget vs StatefulWidget

• StatelessWidget: Static UI

• StatefulWidget: Dynamic UI

Example:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Hello Flutter");
  }
}

---

4️⃣ Layouts & UI Widgets

Q11. Common Widgets: Text, Image, Icon, Button, Container, Row, Column, Stack

Q12. Layout Example

Column(
  children: [
    Text("Hello"),
    Row(
      children: [
        Icon(Icons.star),
        Icon(Icons.star),
      ],
    ),
  ],
)

Q13. Padding & Margin Example

Container(
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(20),
  child: Text("Hello Padding Margin"),
)

---

5️⃣ State Management

Q14. setState() Example

int counter = 0;
ElevatedButton(
  onPressed: () {
    setState(() {
      counter++;
    });
  },
  child: Text("Increment"),
)

Q15. Provider Example

class Counter with ChangeNotifier {
  int value = 0;
  void increment() {
    value++;
    notifyListeners();
  }
}

---

6️⃣ Navigation

Q16. Simple Navigation

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

Q17. Named Routes

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/second': (context) => SecondPage(),
  },
)

---

7️⃣ Networking & APIs

Q18. HTTP GET Example

import 'package:http/http.dart' as http;

var response = await http.get(Uri.parse("https://jsonplaceholder.typicode.com/posts"));
print(response.body);

Q19. JSON Parsing

import 'dart:convert';
var data = jsonDecode(response.body);
print(data[0]['title']);

---

8️⃣ Firebase Integration

Q20. Firebase Auth Example

FirebaseAuth.instance.signInWithEmailAndPassword(
  email: "test@gmail.com",
  password: "123456"
);

Q21. Firestore Example

FirebaseFirestore.instance.collection('users').add({
  'name': 'Rehan',
  'age': 25,
});

---

9️⃣ Animations

Q22. AnimatedContainer Example

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: selected ? 200 : 100,
  height: selected ? 200 : 100,
  color: selected ? Colors.red : Colors.blue,
)

Q23. Hero Animation Example

Hero(
  tag: 'hero-tag',
  child: Image.asset('assets/image.png'),
)

---

10️⃣ Mini & Advanced Projects

Mini Projects:

1. Counter App (setState practice)

2. Todo App (Provider)

3. News App (API Integration)

Intermediate Projects:
4. Firebase Auth App (Login/Register)
5. CRUD App (Firestore database)

Advanced Projects:
6. Chat App
7. E-commerce App
8. Multi-screen App with Animation & API

---

11️⃣ Testing & Deployment

• Types: Unit, Widget, Integration

• Deployment:

  • Android APK / Play Store

  • iOS IPA / App Store

  • Web build

---

12️⃣ Learning Tips

1. Theory + Example साथ practice करें।

2. Small Projects → Intermediate → Large Projects।

3. Daily 1–2 hours coding करें।

4. GitHub पर code push करें।

5. StackOverflow और official docs regularly पढ़ें।

---

Footer (Normal Text Version)

Blog by Rehan Khan | Follow me on GitHub, YouTube, Instagram, Facebook - LearnWithRehan

• GitHub: https://github.com/LearnWithRehan

• YouTube: https://www.youtube.com/@Learnwithrehan86147/

• Instagram: https://www.instagram.com/learnwithrehan86147/

• Facebook: https://www.facebook.com/people/Learnwith-Rehan/61572192551355/