Chapter 4: Installing Bloc Plugin in VS Code & Android Studio

Hey buddy! 👋
Welcome back to our Flutter Bloc learning journey — glad you’re sticking with it! So far, we’ve learned about Bloc, Equatable, and how events and states work. You’ve already started building a stronger structure for your app.

But let me ask you a question...

Have you ever felt tired of writing the same files again and again when setting up a new Bloc?
Let’s be honest — creating events, states, and the Bloc class manually can be a bit boring sometimes, right?

Well, that’s where today’s chapter comes in. I want to show you how to make your life way easier by using the Bloc plugin — both for VS Code and Android Studio. Ready? Let’s do it, together!

🚀 Why Use the Bloc Plugin?

The Bloc plugin helps you:

• Generate Bloc files (events, states, bloc) automatically.
• Reduce boilerplate code.
• Save time and focus more on logic, less on setup.
• Stay consistent in structure across your app.

It's like having a little assistant right in your IDE! 😄

🧩 Install Bloc Plugin in VS Code

Let’s start with VS Code. If you’re using it as your main Flutter editor, here’s how to add the Bloc plugin:

✅ Step-by-step:

1. Open VS Code.
2. Go to the Extensions tab (or press Ctrl + Shift + X).
3. Search for “Bloc” or “Bloc Extension”.
4. Find the one by Felix Angelov (yes, the creator of Bloc 😎).
5. Click Install.

Done! 🎉 You now have the Bloc extension set up.

👨‍💻 How to Use It

Once installed:

• Open your terminal in VS Code.
• Run this command to generate a Bloc:

flutter pub run bloc_generator:bloc

But here's the cooler way 👇
With the plugin, just right-click on a folder in your project and choose:

Bloc: New Bloc

Then:

• Give it a name like Login

• It will generate:

  • login_bloc.dart
  • login_event.dart
  • login_state.dart

No need to create those manually. How awesome is that?

🧩 Install Bloc Plugin in Android Studio

If you prefer Android Studio, you’re covered too. Let’s get the plugin installed.

✅ Steps:

1. Open Android Studio.
2. Click on Preferences (or Settings on Windows).
3. Navigate to Plugins.
4. Search for Bloc or Flutter Bloc Plugin.
5. Click Install, then Restart IDE.

Boom 💥! You're set.

🧪 How to Use It

Now, whenever you’re inside a Flutter project:

• Right-click on the lib folder.
• You’ll see the option to Create Bloc, Cubit, or Feature Folder.
• Name your bloc.
• The plugin will generate the full structure for you instantly!

🧠 Let’s Reflect

Here’s a question for you:

If you save 10 minutes every time you create a Bloc, and you build 15 Blocs in your app, how much time did you just save?

That’s right — 150 minutes. Over 2 hours saved just by using this plugin. Imagine what you could do with that extra time… maybe build animations, try out a new UI package, or drink coffee and chill ☕.

📌 Your Task

Now it’s your turn:

1. Install the Bloc plugin in your IDE (VS Code or Android Studio).
2. Create a new Bloc using the plugin (try counter_bloc if you want).
3. Open the files and see how everything is generated for you.
4. Modify the bloc a bit — maybe add a reset event or custom state.

Bonus:
Take a screenshot of your generated Bloc folder and share it on LinkedIn with the tag #FlutterBlocJourney. Let’s inspire others to code smarter!

💡 Recap

Today, you learned:

• What the Bloc plugin is.
• How to install it in VS Code and Android Studio.
• How it saves time and improves your workflow.
• That automation = more time to build cool things!

You’re becoming a more efficient Flutter dev every day — proud of you!

👋 What’s Coming Next?

In Chapter 5, we’re going to create our first real-world feature using Bloc. You’ll see how everything connects — from UI, to events, to states — just like a complete app flow.

So stay tuned, and until then, go automate your bloc files and give yourself a high five! 🙌