![](https://private-user-images.githubusercontent.com/62079355/251517455-30c43a63-23b5-42a2-b39b-4ef28d0b1f1e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMjY3NjQsIm5iZiI6MTcyNDMyNjQ2NCwicGF0aCI6Ii82MjA3OTM1NS8yNTE1MTc0NTUtMzBjNDNhNjMtMjNiNS00MmEyLWIzOWItNGVmMjhkMGIxZjFlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIyVDExMzQyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTAxZDk1YTBhYzlmNGI0ZGI3YmY0YjAxMjc4NzAxNTBmZTExMTk1NjZmMjdkZTc1MDMxMDExNmEyNjBlMmEyMzMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.2njm-cjRkXXKGIhmLN6PKekpnzge2MYO8lT6uE6A0wI)
Connect with me on Instagram @ritiksaxenaofficial
This project implements an onboarding screen using the BLoC state management pattern in Flutter. The onboarding screen is typically the first screen that users see when they launch the app for the first time, and it provides an introduction to the app's features and guides users through the initial setup.
![](https://private-user-images.githubusercontent.com/62079355/251508488-ce4dad91-f66a-47de-946d-ee1d37ef68ce.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMjY3NjQsIm5iZiI6MTcyNDMyNjQ2NCwicGF0aCI6Ii82MjA3OTM1NS8yNTE1MDg0ODgtY2U0ZGFkOTEtZjY2YS00N2RlLTk0NmQtZWUxZDM3ZWY2OGNlLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIyVDExMzQyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQ3YWU3YzBhYmUwYzNhYWU0YThlMzFlZjQ0MGNjMjFmYzczZTI1OWZjMTY1NzRjZWUxZTQ5MTdlNTY4OTlkNGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.UGHEI33dCLmWiMpvAEvquPru6CZ_7IlxkRxAIYlyUmU)
- A sleek and user-friendly onboarding screen design.
- Multiple screens/pages with customizable content and illustrations.
- BLoC state management for managing the onboarding flow.
- Seamless navigation between onboarding screens.
- Persistent state management to remember the user's onboarding progress.
- Easy customization and extension for adding new screens.
![](https://private-user-images.githubusercontent.com/62079355/251519582-30aa916d-c616-471b-a9ef-3db18660b8c6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMjY3NjQsIm5iZiI6MTcyNDMyNjQ2NCwicGF0aCI6Ii82MjA3OTM1NS8yNTE1MTk1ODItMzBhYTkxNmQtYzYxNi00NzFiLWE5ZWYtM2RiMTg2NjBiOGM2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIyVDExMzQyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTNmYzFiYWUxYjc4N2U3N2E3YWI0YWM0N2QyODAxNmE2YTBjMzZjZmU5NDQ5NjU4ZGJiNDgzNzFlZWEwMThjNjgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.-AJnur9xCpXyYVMthbaQXo3r1KJCDfWlJyq7fCGAlqQ)
![](https://private-user-images.githubusercontent.com/62079355/251517006-2d3e67e4-84a0-4e90-abde-aa1623bfaf05.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMjY3NjQsIm5iZiI6MTcyNDMyNjQ2NCwicGF0aCI6Ii82MjA3OTM1NS8yNTE1MTcwMDYtMmQzZTY3ZTQtODRhMC00ZTkwLWFiZGUtYWExNjIzYmZhZjA1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIyVDExMzQyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTkzNGViYjdlZTkyMzYxZmU4ZmIwNjZlNzZjNmJmZGI3MDExYzcwYTE1YTUzMWY0ZmViMzczYzg3YjJjZmE0ZjUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.De_mRUPnJapiVVewP3KecbrZPp3w4m0MZ4fbBLK3HGE)
![](https://private-user-images.githubusercontent.com/62079355/251516535-dc3223fe-d8de-4006-97d4-a5a7228ca142.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMjY3NjQsIm5iZiI6MTcyNDMyNjQ2NCwicGF0aCI6Ii82MjA3OTM1NS8yNTE1MTY1MzUtZGMzMjIzZmUtZDhkZS00MDA2LTk3ZDQtYTVhNzIyOGNhMTQyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIyVDExMzQyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM3MzlmOGUyMTYwYjI4OTYxY2M2YTMzMTljNDRmMjU2ZDYwYTNhZjRmY2RiNzE3MjE5MGU4MjVhZjhhOTM2OTgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.e7HBUcSUM3NciZyM0X91r-QjD_MoVimS-6FO5ZL19ks)
![](https://private-user-images.githubusercontent.com/62079355/251549214-c3227396-9127-456f-9e6d-7c291899f330.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQzMjY3NjQsIm5iZiI6MTcyNDMyNjQ2NCwicGF0aCI6Ii82MjA3OTM1NS8yNTE1NDkyMTQtYzMyMjczOTYtOTEyNy00NTZmLTllNmQtN2MyOTE4OTlmMzMwLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIyVDExMzQyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE5NDg2YTQwZDkzN2QyODI2ZjcyOWZjYTM2ZWRjMWU2M2MxN2JkMmE1MTlmOGY5ZGY1N2E2NzhkOTQyNTQ5ZmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.kX7hQSP4xsHcPDPnA_PO2_IxeTnT8f73KfUzNMR0yHQ)
The project follows a recommended folder structure for better organization and maintainability:
lib/ |- bloc/ | |- onboarding_bloc.dart | |- onboarding_events.dart | |- onboarding_states.dart | |- screens/ | |- login.dart | |- onboarding.dart | |- main.dart
bloc/: Contains the BLoC implementation for managing the onboarding flow.
screens/: Holds the main onboarding screen widget that orchestrates the flow.
The onboarding screen uses the BLoC (Business Logic Component) pattern for state management. It separates the UI from business logic, making the code more maintainable and testable.
The BLoC classes used in this project are:
OnboardingBloc: Manages the state and handles events related to the onboarding flow.
OnboardingEvent: Represents the different events that can occur during the onboarding process.
OnboardingState: Defines the various states that the onboarding screen can be in.
The OnboardingBloc listens for events, updates the state accordingly, and emits the updated state to the UI. The UI components subscribe to the state changes and update their appearance based on the current state.
If you like this repository, do and
the repo for more amazing stuff coming soon.