LearnFlutterWithMe

A new Flutter project dedicated to learning Flutter step-by-step by following a structured path, completing tasks, and integrating various Flutter concepts and packages.

Getting Started

This project is a starting point for learning Flutter development. It contains multiple code examples, tutorials, and tasks that cover various Flutter topics, such as:

• Folder structure
• Responsive layouts
• State management with BLoC and GetX
• Networking and API integration
• Routing and navigation
• Firebase integration
• Theme management
• Shared preferences

Table of Contents

• Learning Path
  • 1. Folder Structure
  • 2. Responsive Layout
  • 3. RxDart in Flutter
  • 4. BLoC Pattern
    • Task 1: Movie App
  • 5. GetX
    • Task 2: Shopping App
  • 6. Public and Protected Routing
  • 7. Auto Route
  • 8. Firebase Integration
    • 8.1. Authentication
    • 8.2. Storage
  • 9. Shared Preferences
    • Task 3: Blog App
• How to Use This Project
• Final Project: Travel App
• Contributing

---

Learning Path

This project follows a structured learning path. Each section focuses on a specific Flutter concept with tasks and references to deepen understanding.

1. Folder Structure

Understanding the proper folder structure is crucial for scaling Flutter applications.

• References:
  • Flutter Project Structure | Live Discussion

2. Responsive Layout

Learn how to make Flutter apps responsive across different screen sizes and orientations.

• References:
  • Flutter Responsive Design Tutorial - 1
  • Flutter Responsive Design Guide

3. RxDart in Flutter

RxDart extends the capabilities of Dart Streams and StreamControllers.

• References:
  • RxDart Explained - The Flutter Way

4. BLoC Pattern

Implement the BLoC (Business Logic Component) pattern for state management.

• References:
  • The Best Flutter Bloc Complete Course

Task 1: Movie App

Points to Remember:

1. Use the BLoC pattern to integrate data inside the app.
2. Use a proper folder structure.
3. Create light and dark themes managed by a button in the sidebar.
4. Use TMDB (The Movie Database) API for movie data.
5. Handle network connectivity; show a message when offline and update when back online.
6. Handle network connection using network streams.
7. Create two screens:
   • Movies card by category list.
   • Particular movie details.

• References:
  • Flutter Movie App - BLoC, RxDart, JSON API (Part 1)
  • Flutter Movie App - BLoC, RxDart, JSON API (Part 2 Detail Page)

5. GetX

GetX is a fast, stable, and lightweight state management library in Flutter.

• References:
  • Introduction to GetX | Flutter Made Easy
  • GetX State Management Tutorial with Flutter
  • GetX State Management with Flutter | GetBuilder, GetX and Obx

Task 2: Shopping App

Create a shopping app with two pages.

1. Products Screen:

• Show a loader while fetching data.
• Update the cart instantly when "Add to Cart" is clicked.

2. Cart Screen

• Display items added to the cart.

• References:

  • REST API with GetX | Flutter Tutorial | Shopping App

Note: Creating tutorials for this task is mandatory.

6. Public and Protected Routing

Learn how to handle public and protected routes in Flutter.

• References:
  • Flutter Web Routing Public and Protected Routes

7. Auto Route

Implement nested routing using the Auto Route package.

• References:
  • Flutter Bottom Navigation with Nested Routing (Auto Route)

8. Firebase Integration

Integrate Firebase services into your Flutter app.

8.1. Authentication

Implement Google Sign-In for Android, iOS, and Web.

• References:
  • Google SignIn with Flutter | Android, iOS and Web Tutorial

8.2. Storage

Use Firebase Storage for storing and retrieving data.

• References:
  • Implementing Firebase in Flutter
  • Flutter Firebase Basic Task Manager

9. Shared Preferences

Store data locally using Shared Preferences.

• References:
  • Shared Preferences in Flutter

Task 3: Blog App

Points to Remember:

1. Create login and signup pages; connect and save data in Firebase Storage.
2. Integrate Google Sign-In with a dedicated button.
3. Save user data in Firebase; if the user is new, or show an "existing member" alert message.
4. After login, save user data in Shared Preferences; don't show the login screen until the user logs out.
5. Create a blog form with fields: title, description, category, tags, image URL.
6. Create two screens:
   • All blogs.
   • Logged-in user's blogs with a "Create Blog" button.
   • Show home screen blogs as per category.
7. Handle routing and navigation using GetX.
8. Make the app web and mobile responsive.

• References:
  • Build Flutter Blog App From Scratch | Flutter Tutorial For Beginners

---

How to Use This Project

The main.dart file is structured to allow you to run different parts of the project by uncommenting specific sections of code. Each section corresponds to a particular learning topic or task.

Example:

//-------------------------------------------------------------------- Enable for BLOC FORM VALIDATION (EP-3) --------------------------------------------------------------
// void main() {
//   runApp(MyApp());
// }
//
// class MyApp extends StatefulWidget {
//   const MyApp({super.key});
//
//   @override
//   State<MyApp> createState() => _MyAppState();
// }
//
// class _MyAppState extends State<MyApp> {
//   @override
//   Widget build(BuildContext context) {
//     return const MaterialApp(
//       debugShowCheckedModeBanner: false,
//       home: WelcomeScreen(),
//     );
//   }
//}

To run the BLOC FORM VALIDATION example:

1. Uncomment the code under the ENABLE FOR BLOC FORM VALIDATION (EP-3) section.
2. Comment out other sections to avoid conflicts.
3. Run the app using flutter run.

Similarly, you can run other examples:

• Responsive Layout:

// ------------------------------------------------ ENABLE FOR RESPONSIVE LAYOUT ------------------------------------------

// void main() {
//   runApp(MyApp());
// }

// class MyApp extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       home: LayoutOne(),
//     );
//  

 }
// }

Final Project: Travel App

By the end of the course, you’ll build a Travel App with features like:

• Firebase authentication

• Firebase Firestore for data

• Payment gateway integration

• Advanced state management with GetX or BLoC

• References:

  • Flutter Travel App UI Tutorial

---

Contributing

Contributions are always welcome! Please follow the contributing guidelines.