{"id":51,"date":"2024-01-11T16:57:03","date_gmt":"2024-01-11T19:57:03","guid":{"rendered":"https:\/\/renatokuroe.com.br\/?p=51"},"modified":"2024-01-11T17:03:44","modified_gmt":"2024-01-11T20:03:44","slug":"how-to-use-bloc-architecture","status":"publish","type":"post","link":"https:\/\/renatokuroe.com.br\/?p=51","title":{"rendered":"How to use BLoC Architecture?"},"content":{"rendered":"\n

This example assumes that you are using the flutter_bloc<\/code> package, which is a popular package for managing state in Flutter applications.<\/p>\n\n\n\n

First, make sure to add the flutter_bloc<\/code> package to your pubspec.yaml<\/code> file:<\/p>\n\n\n\n

dependencies:\n  flutter:\n    sdk: flutter\n  flutter_bloc: ^7.0.0<\/code><\/pre>\n\n\n\n
Then, create a new file called my_bloc.dart<\/code> and add the following code:<\/p>\n\n\n\n
import 'package:flutter_bloc\/flutter_bloc.dart';\n\n\/\/ Events\nabstract class MyEvent {}\n\nclass IncrementEvent extends MyEvent {}\n\nclass DecrementEvent extends MyEvent {}\n\n\/\/ States\nclass MyState {\n  final int counter;\n\n  MyState(this.counter);\n}\n\n\/\/ BLoC\nclass MyBloc extends Bloc<MyEvent, MyState> {\n  MyBloc() : super(MyState(0));\n\n  @override\n  Stream<MyState> mapEventToState(MyEvent event) async* {\n    if (event is IncrementEvent) {\n      yield MyState(state.counter + 1);\n    } else if (event is DecrementEvent) {\n      yield MyState(state.counter - 1);\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
In this example:<\/p>\n\n\n\n
    \n
  • We have two events (IncrementEvent<\/code> and DecrementEvent<\/code>) representing actions that can trigger state changes.<\/li>\n\n\n\n
  • We have a simple state (MyState<\/code>) with a counter value.<\/li>\n\n\n\n
  • The MyBloc<\/code> class extends Bloc<MyEvent, MyState><\/code> and overrides the mapEventToState<\/code> method to handle events and emit new states accordingly.<\/li>\n<\/ul>\n\n\n\n
    To use this BLoC in your Flutter widget, you would typically wrap your widget with a BlocProvider<\/code> and access the BLoC using BlocBuilder<\/code> or BlocListener<\/code>. Here’s a simple example:<\/p>\n\n\n\n
    import 'package:flutter\/material.dart';\nimport 'package:flutter_bloc\/flutter_bloc.dart';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: BlocProvider(\n        create: (context) => MyBloc(),\n        child: MyHomePage(),\n      ),\n    );\n  }\n}\n\nclass MyHomePage extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('BLoC Example'),\n      ),\n      body: BlocBuilder<MyBloc, MyState>(\n        builder: (context, state) {\n          return Center(\n            child: Column(\n              mainAxisAlignment: MainAxisAlignment.center,\n              children: [\n                Text('Counter: ${state.counter}'),\n                SizedBox(height: 20),\n                ElevatedButton(\n                  onPressed: () {\n                    context.read<MyBloc>().add(IncrementEvent());\n                  },\n                  child: Text('Increment'),\n                ),\n                ElevatedButton(\n                  onPressed: () {\n                    context.read<MyBloc>().add(DecrementEvent());\n                  },\n                  child: Text('Decrement'),\n                ),\n              ],\n            ),\n          );\n        },\n      ),\n    );\n  }\n}<\/code><\/pre>\n\n\n\n
    This example sets up a simple Flutter app with a BLoC managing the state. The UI updates based on the counter value in the BLoC. The Increment<\/code> and Decrement<\/code> buttons trigger the corresponding events, updating the state and causing the UI to re-render.<\/p>\n","protected":false},"excerpt":{"rendered":"
    This example assumes that you are using the flutter_bloc package, which is a popular package for managing state in Flutter applications. First, make sure to add the flutter_bloc package to your pubspec.yaml file: Then, create a new file called my_bloc.dart and add the following code: In this example: To use this BLoC in your Flutter…<\/p>\n","protected":false},"author":1,"featured_media":54,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/renatokuroe.com.br\/index.php?rest_route=\/wp\/v2\/posts\/51"}],"collection":[{"href":"https:\/\/renatokuroe.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/renatokuroe.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/renatokuroe.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/renatokuroe.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=51"}],"version-history":[{"count":1,"href":"https:\/\/renatokuroe.com.br\/index.php?rest_route=\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":52,"href":"https:\/\/renatokuroe.com.br\/index.php?rest_route=\/wp\/v2\/posts\/51\/revisions\/52"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/renatokuroe.com.br\/index.php?rest_route=\/wp\/v2\/media\/54"}],"wp:attachment":[{"href":"https:\/\/renatokuroe.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/renatokuroe.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/renatokuroe.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}