Flutter Complete 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 कैसे करते हैं?
A:

Flutter SDK download करें।

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

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

Android Studio या VS Code setup करें।

Emulator / Real device configure करें।

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

2️⃣ Dart Programming Basics

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

Q5. Dart में Variable कैसे declare करते हैं?


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

Q6. Dart में Function कैसे बनाते हैं?


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

Q7. Dart में Class और Object कैसे बनाते हैं?


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: Flutter app का entry point file।

Q10. StatelessWidget vs StatefulWidget

StatelessWidget: UI static है।
StatefulWidget: UI dynamically change होती है।

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 कैसे देते हैं?


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

5️⃣ State Management

Q14. setState() क्या है?
A: UI को update करने के लिए state बदलते हैं।


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 Example


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

Q17. Named Routes Example


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 Example


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️⃣ Projects


Project 1: Simple Counter App

Project 2: Todo App with Provider

Project 3: News App with API (http)

Project 4: Firebase Authentication App

Project 5: CRUD App with Firestore

Flutter Complete Tutorial Hindi – Beginner to Advanced


Blog by LearnWithRehan | Author: Rehan Khan