Commit 5504309b authored by Xoeseko's avatar Xoeseko
Browse files

Code formatting and completed README

parent 71e5a534
......@@ -2,6 +2,8 @@
This is a submission for the flutter clock challenge that allows you to see time actually ripple.
The actual code is available under wave_clock.
<img src='wave_clock/demo.gif' width='350'>
<img src='wave_clock/screenshot.png' width='350'>
......@@ -9,3 +11,9 @@ This is a submission for the flutter clock challenge that allows you to see time
<img src='wave_clock/screenshot2.png' width='350'>
<img src='wave_clock/screenshot3.png' width='350'>
Acknowledgements:
Thanks to the community of font deisgners in particular [Fontfabric](http://fontfabric.com) for their Mont font without which this design would have not been possible either.
Thanks to flutter's vast library of which I only scratched the surface I was able to develop this clock.
\ No newline at end of file
......@@ -7,7 +7,7 @@ class CutoutPainter extends CustomPainter {
text: text,
style: style,
),
textDirection: TextDirection.ltr,
textDirection: TextDirection.ltr,
);
_textPainter.layout();
}
......@@ -17,13 +17,14 @@ class CutoutPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final textOffset = size.center(Offset.zero) - _textPainter.size.center(Offset.zero);
final textOffset =
size.center(Offset.zero) - _textPainter.size.center(Offset.zero);
// This does the trick for the rectangle to be the same size as the given canvas
final boxRect = Rect.fromLTWH(0, 0, size.width, size.height);
final boxPaint = Paint()
..color = Colors.black
..blendMode=BlendMode.srcOut;
..color = Colors.black
..blendMode = BlendMode.srcOut;
canvas.saveLayer(boxRect, Paint());
......@@ -33,7 +34,7 @@ class CutoutPainter extends CustomPainter {
canvas.restore();
}
@override
@override
bool shouldRepaint(CutoutPainter oldDelegate) {
return text != oldDelegate.text;
}
......
......@@ -6,11 +6,11 @@ import 'cutout.dart';
class TimeWave extends StatelessWidget {
final initDurations = [35000, 19440, 6000];
final initGradients = [
[Colors.white, Colors.white],
[Colors.white, Colors.grey[700]],
[Colors.pink[700], Color(0xFFB52D44)]
];
final height;
[Colors.white, Colors.white],
[Colors.white, Colors.grey[700]],
[Colors.pink[700], Color(0xFFB52D44)]
];
final height;
final maxTime;
final timePassed;
......@@ -19,59 +19,53 @@ class TimeWave extends StatelessWidget {
final displayedTime;
TimeWave({
@required this.displayedTime,
@required this.height,
@required this.timePassed,
@required this.maxTime,
@required this.initStrokeWidth
});
TimeWave(
{@required this.displayedTime,
@required this.height,
@required this.timePassed,
@required this.maxTime,
@required this.initStrokeWidth});
@override
Widget build(context){
@override
Widget build(context) {
return Stack(
fit: StackFit.expand,
alignment: Alignment.center,
children: <Widget>[
Center(
child: WaveWidget(
config: CustomConfig(
durations: initDurations,
gradients: initGradients,
heightPercentages: computeRelativeHeights(timePassed, initGradients.length),
gradientBegin: Alignment.bottomLeft,
gradientEnd: Alignment.topRight,
),
waveAmplitude: 0,
backgroundColor: Colors.black,
size: Size(double.infinity, height)
),
),
Container(
child: CustomPaint(
painter: CutoutPainter(text: displayedTime, style: DefaultTextStyle.of(context).style)
)
),
Center(
child: Text(displayedTime,
style: TextStyle(
foreground: Paint()
..color = Colors.white
..style = PaintingStyle.stroke
..strokeWidth = initStrokeWidth
))
child: WaveWidget(
config: CustomConfig(
durations: initDurations,
gradients: initGradients,
heightPercentages:
computeRelativeHeights(timePassed, initGradients.length),
gradientBegin: Alignment.bottomLeft,
gradientEnd: Alignment.topRight,
),
waveAmplitude: 0,
backgroundColor: Colors.black,
size: Size(double.infinity, height)),
),
Container(
child: CustomPaint(
painter: CutoutPainter(
text: displayedTime,
style: DefaultTextStyle.of(context).style))),
Center(
child: Text(displayedTime,
style: TextStyle(
foreground: Paint()
..color = Colors.white
..style = PaintingStyle.stroke
..strokeWidth = initStrokeWidth))),
],
);
}
List<double> computeRelativeHeights(timePassed, nbWaves) {
double relativeTime = timePassed / maxTime;
double baseHeight = 1 - relativeTime;
return [baseHeight-0.1, baseHeight-0.05, baseHeight];
return [baseHeight - 0.1, baseHeight - 0.05, baseHeight];
}
}
\ No newline at end of file
}
......@@ -25,6 +25,7 @@ final _darkTheme = {
_Element.text: Colors.white,
_Element.shadow: Color(0xFF174EA6),
};
class DigitalClock extends StatefulWidget {
const DigitalClock(this.model);
......@@ -74,7 +75,7 @@ class _DigitalClockState extends State<DigitalClock> {
void _updateTime() {
setState(() {
_dateTime = DateTime.now();
decimalSeconds = _dateTime.second + _dateTime.millisecond/1000;
decimalSeconds = _dateTime.second + _dateTime.millisecond / 1000;
_timer = Timer(
Duration(milliseconds: 15) -
Duration(milliseconds: _dateTime.microsecond),
......@@ -93,9 +94,9 @@ class _DigitalClockState extends State<DigitalClock> {
final minute = DateFormat('mm').format(_dateTime);
final _fontSize = MediaQuery.of(context).size.width / 3.5;
final defaultStyle = TextStyle(
fontFamily: 'Mont', fontSize: _fontSize,
// letterSpacing: _fontSize / 30
);
fontFamily: 'Mont',
fontSize: _fontSize,
);
return Container(
color: colors[_Element.background],
......@@ -112,20 +113,20 @@ class _DigitalClockState extends State<DigitalClock> {
children: [
Expanded(
child: TimeWave(
displayedTime: hour,
timePassed: double.parse(minute),
maxTime: 60,
initStrokeWidth: _fontSize / 40,
height: _fontSize,)),
displayedTime: hour,
timePassed: double.parse(minute),
maxTime: 60,
initStrokeWidth: _fontSize / 40,
height: _fontSize,
)),
Expanded(
child: TimeWave(
displayedTime: minute,
height: _fontSize,
timePassed: decimalSeconds,
initStrokeWidth: _fontSize / 40,
maxTime: 60,
)
),
displayedTime: minute,
height: _fontSize,
timePassed: decimalSeconds,
initStrokeWidth: _fontSize / 40,
maxTime: 60,
)),
])),
)
],
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment