A real-time background color changer using Flutter Web and Dart Frog. Test the live app here.
Colorfy is a real-time background color changer that allows multiple clients to connect and go on a color war with each other. The application is built using Flutter Web, a framework for building web applications using Dart programming language, and Dart Frog, a backend solution provided by VeryGoodVentures Flutter Software Company.
The Colorfy application allows clients to connect to a TCP server managed by the Dart Frog backend. Clients are assigned ranks based on the order they connect, with the first client receiving rank 0, the second client receiving rank 1, and so on. Clients can then send commands to the server to change the background color of all clients with a lower rank than themselves. The Dart Frog server manages these requests and ensures that higher-ranked clients cannot execute commands sent by lower-ranked clients.
One of the challenges faced during the development of this project was implementing the rank upgrade between clients. The challenge lied in how to know that a client had disconnected and availing this rank for the clients to determine whether an upgrade was necessary. This was overcome by using broadcast bloc package to provide real-time notifications and synchronization of data between the server and all clients involved.
To use the application, launch a web browser and access it here. The application is deployed on Firebase for ease of use.
- Clone the repository using git clone
git clone https://github.com/root458/neglected-client.git- Ensure that Flutter is installed on your system. If not, follow the instructions here.
- Navigate to the project directory. Run:
flutter pub getflutter run --flavor development --target lib/main_development.dart -d chromeThis runs the application with the localhost server. Ensure you have installed and started the server locally by following the instructions here, for this to work.
Run against the production server using this command.
flutter run --flavor production --target lib/main_production.dart -d chromeThis launches the application for you.
- The app automatically connects to the server when it launches.
- Tap any of the colors and watch the change. The server delivers your rank after your first color change.
- Watch the changes on your friends' instances which have lower ranks. If the client is the highest-ranked client, the background color will change for all clients with a lower rank than themselves. If a higher-ranked client disconnects, the server will notify all clients with a lower rank, allowing them to upgrade their rank by pressing the "Upgrade" button. Watch out for this notification when a button appears and vigorously shakes.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.