File structure

The general file structure of our Flutter templates is as follows:

root ├── android ├── ios ├── lib │ ├── core │ │ ├── model │ │ │ ├── user.dart │ │ │ ├── contact_model.dart │ │ │ ├── ... (other core models) │ │ ├── ui │ │ │ ├── av_chat │ │ │ │ ├── video_call │ │ │ │ │ ├── video_call_screen.dart │ │ │ │ │ ├── video_call_handler.dart │ │ │ │ ├── voice_call │ │ │ │ │ ├── voice_call_screen.dart │ │ │ │ │ ├── voice_call_handler.dart │ │ │ │ ├── ... (other audio-video chat sub modules) │ │ │ ├── chat │ │ │ │ ├── api │ │ │ │ ├── chat │ │ │ │ ├── conversation │ │ │ │ ├── create_group │ │ │ │ ├── player_widget.dart │ │ │ │ ├── friend_widget.dart │ │ │ │ ├── group_conversation_tile.dart │ │ │ ├── full_screen_image_viewer │ │ │ │ ├── full_screen_image_viewer.dart │ │ │ ├── full_screen_video_viewer │ │ │ │ ├── full_screen_video_viewer.dart │ │ │ ├── loading │ │ ├── utils │ │ │ ├── user_report │ │ │ │ ├── api │ │ │ ├── ads │ │ │ │ ├── ads_utils.dart │ │ │ ├── social_comments │ │ │ │ ├── api │ │ │ │ ├── comments │ │ │ ├── helper.dart │ ├── <your-insta-flutter-app> │ │ ├── model │ │ │ ├── ...<app-specific-models>.dart │ │ ├── ui │ │ │ ├── auth │ │ │ │ ├── api │ │ │ │ ├── launcher │ │ │ │ │ ├── launcher_screen.dart │ │ │ │ ├── phone_auth │ │ │ │ │ ├── code_input.dart │ │ │ │ │ ├── number_input.dart │ │ │ │ ├── login │ │ │ │ ├── onboarding │ │ │ │ ├── ..(other auth blocs) │ │ │ ├── contacts │ │ │ │ ├── api │ │ │ │ ├── discover_people │ │ │ ├── container │ │ │ ├── profile │ │ │ │ ├── api │ │ │ │ ├── account_details │ │ │ │ ├── settings │ │ │ ├── noftifications │ │ │ ├── data │ │ │ │ ├── data_source.dart │ │ │ ├── ui_kit.dart │ │ ├── <your-flutter-app>_module │ │ │ ├── api │ │ │ ├── ...(other-app-specific-screens-and-blocs) │ │ ├── services │ │ │ ├── local_database.dart │ │ │ ├── local_database.g.dart │ │ ├── <your-intaflutter-app>_app_config.dart │ │ ├── main.dart // app-specific main.dart file │ ├── main.dart // generic main.dart file └────── constants.dart

Color Key:

BLoC structure
API Template
Cubit

BLoC Structure

Every directory labeled red follows the BLoC pattern, where each of them consist of the below files

bloc_module/
├──<module>_screen.dart
├──<module>_event.dart
├──<module>_state.dart
└──<module>_bloc.dart

Important Note:

The BLoC pattern separates the presentation layer from the business logic:

_bloc.dart: Contains the main business logic
_event.dart: Defines the events
_state.dart: Manages the states
_screen.dart: Handles the UI

API Template Structure

api/
├── custom_backend
│   ├── <module>_custom_backend.dart
├── firebase
│   ├── <module>_firebase.dart
├── local
│   ├── <module>_local_data.dart
├── <module>_api_manager.dart
├── <module>_repository.dart
└── <other>_data_factory.dart

Implementing your own backend:

For implementing your own backend system use api/custom_backend/<module>_custom_backend.dart

We've provided an implementation for Firebase at api/firebase/<module>_firebase.dart, which you can use as a reference for developing your custom backend solution.

Updating the API Manager:

In api/api_manager.dart, update the following after implementing your own backend:

var userReportingApiManager = UserReportingCustomBackend(); // choose your preferred implementation

// var userReportingApiManager = UserReportingFireStoreUtils(); - comment this line