The task involves the development of a rudimentary Flutter application. The application should display the text "Hello World!" centrally on the screen. Upon interaction with the screen, the application is expected to dynamically change the background color to a color selected at random. As a developer, I am permitted to incorporate any additional functionality into the application that I deem necessary. Please note that the background color must be changed without the use of any external libraries.
App should be developed using the latest stable version of Flutter. The application code should use linting from Solid package. Code base should follow DRY and KISS principles.
- First how to generate a random color in Flutter.
import 'dart:math';
// generate random color using Random class and HSV color model
Color randomColor() {
return Color((Random().nextDouble() * 0xFFFFFF).toInt() << 0)
.withOpacity(1.0);
}
But if text color is white and background color is white, the text will be invisible. So we should change color of the text if the background color is too light. We can use brightness
property of the Color
class to check if the color is too light or too dark. If the color is too light we should change the text color to black.
Color textColor(Color color) {
return color.computeLuminance() > 0.5 ? Colors.black : Colors.white;
}
- Okay now we have algorithm to generate random color. But how to change bg color of the application by tapping on the any part of the screen. Solution is very simple. We should use
Stack
where first child isGestureDetector
withContainer
and second child isText
. - Now we have to change the color of the
Container
by tapping on the screen. We can usesetState
to change the color of theContainer
by tapping on the screen.
So.... But this looks so stinky. We can use AnimatedContainer
to change the color of the Container
with animation.
But this is very simple. And for make this task more interesting I will use Cubit
from bloc
for handle the locale state of the application.
Application support this locales:
- English
- Español
- Ukrainian
- French
- Italian
For add localization to the application I have to use flutter_localizations
package. And follow the documentation to add localization to the application.
English | Español | Ukrainian | French | Italian |
---|---|---|---|---|
- Clone the repository
git clone https://github.com/hikionori/solid_test.git
- Go to the project directory
cd solid_test
- Get the dependencies
flutter pub get
- Run the application
flutter run