Wave Clock is a Flutter clock designed for Lenovo Smart Display device built-in with Google Assistant. It is created for the Flutter Clock Challenge.
The clock uses [ClockCustomizer] and [ClockModel] which are provided by Flutter team to get the following simulated data:
- Current Location
- Low and High Temperatures
- Light and Dark Themes
- 12-Hour and 24-Hour Format
- Weather Conditions: Cloudy, Foggy, Rainy, Snowy, Sunny, Thunderstorm and Windy
- Units: Celsius and Fahrenheit
The clock uses the animated wave as a visual indicator to show the current hour of the day with the help of the clock marker. At the bottom, it started off as 0000 hours or 1AM. At the top, it ended off as 2400 hours or 12AM.
At the start of every hour, the animated wave will increase its height and move up to the next hour slot. When the current time resets to 0000 hours, the animated wave will reset to the bottom.
The color of the animated wave will change according to the weather condition and the time of the day. If the current time is night and the weather condition is cloudy, the clock will show night cloudy icon and the color will change to dark blue color.
The clock can show the current time in 12-hour or 24-hour format and show the temperatures in celsius and fahrenheit. The clock has two theme modes - light theme and dark theme. The text and icon in the clock will change according to the selected theme.
The user interface design of the Wave Clock consists of:
- WaveClockApp: The root of the application.
- Clock: The main clock widget which holds all the related widgets.
- DigitColumn: The widget to represent a single digit integer.
- ClockMarker: The widget is the hourly time marker (i.e. 1300 hrs and 1PM) to show the current wave level.
- Wave: The widget is the animated wave to indicate the current hour of the day and weather condition using color.
- WaveClipper: The custom clipper to create wave animation.
- ClockCustomizer: The widget is provided by Flutter team to provide simulated data from the Lenovo Smart Display.
The model classes of the Wave Clock consists of:
- WaveTime: The model class to provide formatted current time in right digits and formats.
- Weather: The model class to hold the icon, text and wave colors for the clock.
- ClockModel: The model class to hold the simulated data from Lenovo Smart Display.
The utility classes of the Wave Clock consists of:
- Utils: The utility class to get the required data based on the respective user interface and datetime logic.
The widget and unit testing test cases of the Wave Clock are created.
Wave Clock is working well in Flutter iOS, Android and Chrome Browser.
- intl: This package is used for Date formatting.
- weather_icons: This package is used for display weather icons based on simulated weather conditions.
- flutter_clock_helper: This package is used for customizing the clock based on simulated data.
- Bungee: This font is release under Google SIL Open Font License and used for display all the texts in the clock.
Go to wave_clock folder, type in the Terminal:
flutter create . && flutter pub get && flutter run