How to Use Getx and BLoC Together

Here, we will learn how to use Getx and BLoC together for our dummy flutter app.

We will use Getx for routing and BLoC for state management.

The real magic happens here

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return  BlocProvider(
      create: (_)=>CounterBlocs(),
      child:  GetMaterialApp(
          getPages: [
            GetPage(name: "/second", page: ()=>SecondPage()),
          ],
        home: HomePage(),
      ),
    );
  }
}

The above code uses BlocProvider as wrapper for state management. Inside it we inject our bloc (CounterBlocs) and then in the child we use GetMaterialApp()

Since we are using BlocProvider, in the root of our app, our app’s blocs (events and states) would be available throughout the app every where.

That’s the first part of the puzzle.

The second part of the puzzle is routing. If you see carefully, you will see we are assigning GetMaterialApp() as a child in the BlocProvider.

Since we are using GetMaterialApp, we would be able to use routes inside the it, as well as dedicated classes for routing.

Complete code for main.dart

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return  BlocProvider(
      create: (_)=>CounterBlocs(),
      child:  GetMaterialApp(
          getPages: [
            GetPage(name: "/second", page: ()=>SecondPage()),
          ],
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BlocBuilder<CounterBlocs, CounterStates>(
          builder: (context, state){
            return  Column(
              //crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  state.counter.toString(), style: const TextStyle(
                    fontSize: 30
                ),
                )    ,
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ElevatedButton(
                        onPressed:
                            ()=>BlocProvider.of<CounterBlocs>(context).add(Increment()),
                        child: const Icon(Icons.add)
                    ),

                    const SizedBox(width: 10,),

                    ElevatedButton(
                        onPressed:
                            ()=>BlocProvider.of<CounterBlocs>(context).add(Decrement()),
                        child: const Icon(Icons.remove)
                    )
                  ],
                ),
                const SizedBox(height: 10,),
                InkWell(
                  onTap: () {
                   /* Navigator.push(context,
                        MaterialPageRoute(
                            builder: (context) => const SecondPage()));*/
                    Get.toNamed("/second");
                  },
                  child: Container(
                    width: 138,
                    height: 35,

                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5),
                      color: Colors.grey,
                    ),
                    child: const Center(child: Text("click", style: TextStyle(color: Colors.white),)),
                  ),

                )
              ],
            );

          }
      ),
    );
  }
}

See in the code, we use BlocProvider.of<CounterBlocs>(context) to find our blocs and related states, which also means BLoc and Getx coexist well.

Code for secondpage.dart

class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar:  AppBar(
        leading: IconButton(
          onPressed: ()=>Get.back()/*()=>Navigator.pop(context)*/,
          icon:BackButton()
        ),
      ),
      body: BackgroundDecoration(
        child: Center(child: Text(
          '${BlocProvider.of<CounterBlocs>(context).state.counter.toString()} times',
          style: TextStyle(
            color: Colors.white,
            fontSize: 30
          ),
        )),
      ),
    );
  }
}

The above dummy app is based on Counter Bloc app. Go to the link to get counter bloc app codes

Getx App

BLoC App