Update Flutter and Bloc Interactions Overview authored by Spencer Hooper's avatar Spencer Hooper
# General
**Flutter** and it's [Widgets](Flutter Widgets) make up the structure and visual aspects of the UI. It uses [Repositories](Repository) and Requests and Responses to interact with the Server to populate the page.
**Bloc** refers to the [Events](Events) and [States](States) that control what appears on pages in the UI. It uses a [Bloc](Blocs) page to control the relationships between events and states. Each Dart page will have a corresponding Event, State, and Bloc file.
[Bloc Widgets](Bloc Widgets) are how the actual interactions happen, that is, they are widgets within the Flutter UI that allow for the use of Repositories and Blocs in order to populate the page with data from the backend.
On the Dart page, when the UI requires information from the backend, an **Event** is dispatched to the **Bloc**. The Bloc then creates a **Request** and passes it to a **Repository**. The Repository then communicates with the [Restful Server](Restful Server) which uses [Controllers](Server Components#controllers) to accomplish the task for the request.
As an example, the following code requests information about the majors and crews when creating a player:
```dart
BlocProvider<GetMajorsAndCrewsBloc>(
create: (context) => GetMajorsAndCrewsBloc(
MajorsRepository: context.read<MajorsRepository>(),
CrewsRepository: context.read<CrewsRepository>(),
)..add(SendCreateMajorsCrewEvent(0, 0))),
```
The `add(SendCreateMajorsCrewEvent(0, 0))` statement creates a `SendCreateMajorsCrewEvent` object and dispatches it to the bloc. This event triggers the `on<SendCreateMajorsCrewEvent>((event, emit) async` event listener in the `get_majors_and_crews_bloc.dart` page. Upon receiving this event, the bloc creates a request using the information in the event and passes that to the repository. The repository then returns a response containing the requested information. Lastly, the bloc emits a new state containing the response. The UI page then receives the state change, extracts the response, and uses the data to construct the page according to its needs.
For more information about the `BlocProvider` widget, please refer to the [Bloc Widgets](Bloc Widgets#user-content-blocprovider) page.
\ No newline at end of file