Image for post
Image for post

So over the past 2 weeks I have been working on an Android app in my free time. It started out as a way for me to use as many of Flutter’s features as I can and see how it all works out. I wanted a project that will allow me apply the BLoC pattern extensively, use platform channels, overlays, databases, shared preferences and also apply animations. The best idea that came to me was to build an Audio player in Android.

I began building the app when I stumbled on a design by Johny Vino and decided to replicate some parts it. It is not a faithful replication however it is close enough for my intentions. Sometime in the near future I will be doing an app that is faithful to the design. …

Image for post
Image for post

So you have this beautiful app idea in your head and you decided to build it in everyone’s new favorite cross-platform mobile app development tool: Flutter. You also realize that some of the widgets within flutter will not serve the purpose you want so you decide to design your own custom widgets using the CustomPaint class in Flutter. Then the next important question comes up: how do you test it?

In this post, I will be looking at using what is called Golden Image Files to test CustomPaint widgets. …

Image for post
Image for post

The full code for the app can be found here. Other parts of the series can be found below:

Part I

Part II

Part III

Some Helping Hand

It’s time to put a hand on that clock. There are probably several ways to go about this. We could make each hand into its own widget in order to be able to handle them separately. Or we could create one clock hand widget and update the hands accordingly. We will be going the later route.

Create a new file called hand_hour.dart. Add the following code:

import 'dart:math';

import 'package:flutter/material.dart';

class HourHandPainter extends CustomPainter{
final Paint hourHandPaint;
int hours;
int minutes;

HourHandPainter({this.hours, this.minutes}):hourHandPaint= new Paint(){
hourHandPaint.color= Colors.black87; PaintingStyle.fill;

void paint(Canvas canvas, Size size) {
final radius = size.width/2;
// To draw hour hand;

canvas.translate(radius, radius);

//checks if hour is greater than 12 before calculating rotation
2*PI*((this.hours-12)/12 + (this.minutes/720)):
2*PI*((this.hours/12)+ (this.minutes/720))

Path path= new Path();

//heart shape head for the hour hand
path.moveTo(0.0, -radius+15.0);
path.quadraticBezierTo(-3.5, -radius + 25.0, -15.0, -radius+radius/4);
path.quadraticBezierTo(-20.0, -radius+radius/3, -7.5, -radius+radius/3);
path.lineTo(0.0, -radius+radius/4);
path.lineTo(7.5, -radius+radius/3);
path.quadraticBezierTo(20.0, -radius+radius/3, 15.0, -radius+radius/4);
path.quadraticBezierTo(3.5, -radius + 25.0, 0.0, -radius+15.0);

//hour hand stem
path.moveTo(-1.0, -radius+radius/4);
path.lineTo(-5.0, -radius+radius/2);
path.lineTo(-2.0, 0.0);
path.lineTo(2.0, 0.0);
path.lineTo(5.0, -radius+radius/2);
path.lineTo(1.0, …


Philip Okonkwo

Software Development, Movies, History

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store