DEV Community: AbhishekDoshi26

Bloc Pattern in Flutter | Part 1💙

AbhishekDoshi26 — Mon, 21 Dec 2020 16:50:50 +0000

Bloc Pattern in Flutter | Part 1💙

Do you feel Bloc is tough? Me too!

Let’s make it easy then!😍

In this article, we will check out how to use Bloc in Flutter using flutter_bloc package with an example.

Package Link: flutter_bloc | Flutter Package (pub.dev)

So Bloc basically uses the concept of Inherited Widget. We can implement Bloc using Stream and Sink but, we already have a package **flutter_bloc **which is a wrapper of Stream and Sink.

Before we start bloc, there are two concepts that needs to be clear:

Events: Events are basically the functionalities of the app. Let’s say for our basic Counter app, Increment is a functionality and hence, one of our event is Increment.
States: *State is the information that can be read synchronously when the widget is built and might change during the lifetime of the widget. Or, in simple words, we can say that the State is something that our app is, before and after the event. **Hence, in our Counter example, the app before increment and after increment is State. Also, we can say that we have a state while it’s incrementing.*

In BLOC, we give Event **as **input **to BLOC. Then we do the **processing/business logic in the Bloc and provide State **as **output.

In a Bloc, there will be 3 main files:

bloc file: This file contains the main Business Logic
events file: This file states all the events that are present in your app.
state file: This file contains all the states that your app undergoes.

Let’s start with the coding!

We will re-write the basic Counter App using BLOC!

Step 1: Import flutter_bloc in pubspec.yaml

flutter_bloc: ^6.1.1

Step 2: Create a folder named bloc and create 2 files in it. Here, we will name them as counter_bloc andcounter_event . As we don’t have multiple states, we won’t create counter_state .

This is how the project structure will look like. You can name your files according to your comfort.

Step 3: **Let’s first create the basic UI and functionality of our app by scratch without Bloc. Here’s the main.dart and home.dart files:
**main.dart:

import 'package:bloc_counter_example/home.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](http://twitter.com/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

home.dart

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  [@override](http://twitter.com/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int counter = 0;

[@override](http://twitter.com/override)
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () => setState(() {
          counter++;
        }),
      ),
      appBar: AppBar(
        title: Text('Bloc Counter Example'),
      ),
      body: Center(
        child: Text(
          '$counter',
          style: TextStyle(fontSize: 50.0),
        ),
      ),
    );
  }
}

So this is the basic application (Counter Application) that we created from scratch. Now, let’s work on our BLOC.

**Step 4: **Let’s create our events. As this is a simple example, we just have 1 event i.e. **Increment **and we don’t even need to pass any parameters. So we will use enum in this case. So, our counter_event.dart will look like this:

enum CounterEvent { increment }

Step 5: Now, let’s work on our bloc file i.e. counter_bloc.dart .
In this file, we need to specify our business logic. We have to create a class that extends Bloc class. Let me show you how it will look:

import 'dart:async';
import 'package:bloc/bloc.dart';
import 'counter_event.dart';

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0);

[@override](http://twitter.com/override)
  Stream<int> mapEventToState(CounterEvent event) async* {
    switch (event) {
      case CounterEvent.increment:
        yield state + 1;
        break;
      default:
        break;
    }
  }
}

So, the above code is our counter_bloc.dart . This is the main core of our application that will increment the counter. Let’s break this code and understand:

class CounterBloc extends Bloc
Here, **CounterEvent **is our event i.e. enum that we created in counter_event.dart and **int **is the state because we are simply incrementing an integer variable. If your application is complex, instead of int, you can specify your State class.
**CounterBloc() : super(0);
**So, this is basically the constructor of CounterBloc() class where we pass an initial value i.e. 0 in our case to the parent class i.e. Bloc class because our CounterBloc extends Bloc.
Then we need to implement one method named mapEventToState . This method basically maps our input events with the corresponding output states.
*Stream mapEventToState(CounterEvent event) async
*This method takes Event as input and returns a Stream of state and hence we need to make it async. Now, if you have custom state file, you have to replace **int **with your state class.
Now, we check for the events. If it’s CounterEvent.increment, we need to increment the value. yield adds a value to the output stream of the surrounding async* function. It's like return, but doesn't terminate the function.

switch (event) {
case CounterEvent.increment:
yield state + 1;
break;
default:
break;
}

Here, we complete our counter_bloc.dart file implementation!

So, our BLOC is ready! Now we just need to integrate it with our UI i.e. main.dart and home.dart files

I hope it was pretty clear till here! Don’t bang your laptop, we are just a few lines of code away 😉

**Step 6: **Open main.dart file and wrap the child of MaterialApp with BlocProvider. Your file will look like this:

import 'package:bloc_counter_example/bloc/counter_bloc.dart';
import 'package:bloc_counter_example/home.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

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

class MyApp extends StatelessWidget {
  [@override](http://twitter.com/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider<CounterBloc>(
        create: (context) => CounterBloc(),
        child: MyHomePage(),
      ),
    );
  }
}

So, basically BlocProvider will provide the access to Bloc throughout the Widget Tree.

BlocProvider<CounterBloc>(
        create: (context) => CounterBloc(),
        child: MyHomePage(),
      ),

Here, CounterBloc is our bloc class that we created in previous step. We need to provide which bloc is to be created (here CounterBloc()) and the child where the bloc should be accessible. Yep! That’s it for main.dart file. Let’s now move to home.dart 😍

Step 7: **Open home.dart file and create an instance of **CounterBloc()

CounterBloc _counterBloc;

Now, inside our build method, let’s instantiate our _counterBloc variable.

_counterBloc = BlocProvider.of<CounterBloc>(context);

What does the above statement does??? It actually gives you access to the CounterBloc that we created. Now, using _counterBloc we can access our event and state.

Step 8: **Now, wrap the Text() widget (where we display the count) with **BlocBuilder

body: Center(
        child: BlocBuilder<CounterBloc, int>(
          builder: (context, state) {
            return Text(
              '$state',
              style: TextStyle(fontSize: 50.0),
            );
          },
        ),
      ),

Here, the state variable that we can see, has access to the states. In this case, state is just an integer value which will get incremented. So we can directly display the state. Now, let’s change our Floating Action Button onPressed() method!

**Step 9: **In onPressed for Floating Action Button, we need to add the event to the bloc. Syntax:

onPressed: () => _counterBloc.add(CounterEvent.increment),

This is how your home.dart file will look now:

import 'package:bloc_counter_example/bloc/counter_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'bloc/counter_event.dart';

class MyHomePage extends StatefulWidget {
  [@override](http://twitter.com/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  CounterBloc _counterBloc;

[@override](http://twitter.com/override)
  void dispose() {
    _counterBloc.close();
    super.dispose();
  }

[@override](http://twitter.com/override)
  Widget build(BuildContext context) {
    _counterBloc = BlocProvider.of<CounterBloc>(context);
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () => _counterBloc.add(CounterEvent.increment),
      ),
      appBar: AppBar(
        title: Text('Bloc Counter Example'),
      ),
      body: Center(
        child: BlocBuilder<CounterBloc, int>(
          builder: (context, state) {
            return Text(
              '$state',
              style: TextStyle(fontSize: 50.0),
            );
          },
        ),
      ),
    );
  }
}

And done!!!!!!!!!!!!!

We just implemented Bloc in our basic Counter Application💙

In the next article, we will take a complex application with multiple states and implement it using Bloc.

Hope you enjoyed this article!

GitHub Repository: AbhishekDoshi26/bloc_counter_example (github.com)

If you loved it, you can **Buy Me A Coffee!**

Don’t forget to connect with me on:

**Instagram**
**Twitter**
**LinkedIn**
**GitHub**

Don’t stop, until you are breathing!💙

- Abhishek Doshi

Flutter Valsad

AbhishekDoshi26 — Fri, 06 Nov 2020 07:00:11 +0000

Flutter Valsad is here 🥁🥁

For more updates follow us on :
Instagram: https://www.instagram.com/flutter_valsad
Twitter: https://twitter.com/flutter_valsad

💙💙

How to publish your first Flutter Package!

AbhishekDoshi26 — Thu, 15 Oct 2020 16:33:25 +0000

Using Flutter Packages since long?
Do you wish to contribute back?
Do you wish to publish your own package and help the community?
But don't know how?
No worries. I have your back.
In this blog, I will get you through each and every step of how to publish your own Flutter Package on the official Flutter Website pub.dev

Pre-Requisites :

Passion For Helping
Understanding of Flutter
Git

So let's get our hands dirty!! 👏👏

A flutter package always has a class which returns a widget.
Also, the class must not have any hard-coded values.
All the functionalities which you want to provide to the user, create it as a property (variable) and create a constructor to get the value.

For example:
If you want the user to set the height of the container, create a property named double height. Add in the constructor & then pass it to the height property of the Container.

class <class_name>{
     double height;
     class_name({this.height});
     .
     .
     .
     .
     Container(
        height:height,
        .
        .
        .
     ),
}

Once the code is created, use it in an application to test it and get a better understanding.

So, let's start through the steps of how to publish the package!! 🎉💙

Step 1: Start by creating new flutter package!!

Open Android Studio
Click on Create new Flutter Project
Click on New Flutter Package

Step 2: Give the name of the project as the one you want your package to be named. Thus, the name of your project will be your package name.

Step 3: Put the project on Github. Keep the repo public.

Step 4: This is the most Important Step!!
Edit the Pubspec.YAML file.

Add Description for the package (Minimum 20 words). This costs you points on pub.dev after publishing.
Remove author as it is not used now.
Add homepage. HomePage can be your own website or you can also give the Github Profile Page link.
Add repository. Don't do mistake in this!! If the link get's wrong, issues link on the pub.dev will not be generated. Here's an example:

Correct Link: https://github.com/AbhishekDoshi26/contactus
Wrong Link: https://github.com/AbhishekDoshi26/contactus.git

Add Version Number. Whenever you update your package code, version number has to be changed.

Step 5: Write the code in the dart file. Here's an example of the code of a package named contactus

Step 6: Create Documentation. For Documentation, you need to use /// to provide the documentation for a particular property/method/class,etc. /// will create documentaion and // will be comment.

class ContactUs extends StatelessWidget {
  ///Logo of the Company/individual
  final ImageProvider logo;

Also, after creating manual documentations to your classes, let's created the predefined documentation. Open Command Prompt in the package location and run dartdoc command in terminal on your package location.

Step 7: Open the CHANGELOG.md file and write the version number, publishing date and description in the file. Here's an example for the same:

## [1.0.0] - 16/04/2020.
Added Icons for all the social networks

Step 8: Create a file LICENSE.txt & add any license such as MIT License. You can get template of any license from the internet. You can refer the MIT License of contactus package.

Step 8: Create an Example.

Inside the package folder itself, create a new flutter project, named as example. (Don't change the name. Name has to be compulsory example as it will be used in pub.dev)
To use the package in the example, without publishing, add in the pubspec.yaml the following line:

package_name:
    path: Complete path of the package on your computer.

Here's the code snippet of how you can use contactus package or your own package in the example:

import 'package:contactus/contactus.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        bottomNavigationBar: ContactUsBottomAppBar(
          companyName: 'Abhishek Doshi',
          textColor: Colors.white,
          backgroundColor: Colors.teal.shade300,
          email: 'adoshi26.ad@gmail.com',
        ),
        backgroundColor: Colors.teal,
        body: Container(),
      ),
    );
  }
}

Step 9: Push all to the Github Repository

Step 10: Open Command Prompt on the repo location. Now run the following command:
flutter pub publish --dry-run
If any suggestions or warnings are encountered, do the required changes.

Step 11: If everything is perfect, run the following command to publish the package.
flutter pub publish

Tadaaaaaaaaaaaaaa!!!!!!!!🌟🎉👏 Your package has been published!!

Now, whenever you change anything in the code/any file of the package/example, you need to update the following files:

pubspec.yaml (Version Number)
CHANGELOG.md (Add new version, date & description)

Don't stop until you are breathing!!!
-Abhishek Doshi

Contribute to your 1st Hacktober Fest

AbhishekDoshi26 — Thu, 15 Oct 2020 16:06:28 +0000

Is this your 1st Hacktoberfest? Don't worry! I have your back.
Here are the steps for generating your 1st legit pull request!

You need to register yourself at Hacktober Fest Website
After you register yourself, go to Github
Now, in the search box, you can search for Hacktober Fest label. There will come a list of Repositories/Issues in the result.
If you don't find that interesting, you can simply go in Explore and checkout various repositories.
If that repository has a Hacktober Fest topic, congrats, you got a repo for contribution.
Now, as you have repository, let's start contribution!

- Fork this repo to your account.
- Clone the repo to your pc.
- Now, make changes or do your contributions to the cloned repo.
- After you have done your contributions, commit the changes and push the commit to your repo.
- Now, go to your repo on github website and generate a **Pull Request**
- Go to [Hacktober Fest Profile Page] (http://hacktoberfest.digitalocean.com/profile) and you will see the PR generated there.
- Now, you need to wait for the Review period to end. 
- If your PR gets merged, congrats, you have got 1 PR counted for Hacktober Fest!!

Happy Open Sourcing!!

DEV Community: AbhishekDoshi26

Bloc Pattern in Flutter | Part 1💙

Bloc Pattern in Flutter | Part 1💙

Do you feel Bloc is tough? Me too!

Let’s make it easy then!😍

Let’s start with the coding!

Don’t forget to connect with me on:

Don’t stop, until you are breathing!💙

- Abhishek Doshi

Flutter Valsad

How to publish your first Flutter Package!

So let's get our hands dirty!! 👏👏

Contribute to your 1st Hacktober Fest