Create a Stopwatch App with Flutter

Flutter - Beautiful native apps in record time

I’ve been learning Flutter and Dart language recently and they really impressed me. Flutter is greatly inspired by React and many concepts are already familiar: stateful/stateless, render function, component hierarchy, etc. As for Dart language which backs Flutter, it inherits numerous of the best features from other languages while keeping off from the bad things, so if you already know python, JavaScript, C++, you can pick up Dart very quickly.

Okay, let’s go back to the main topic of this article: creating a stopwatch app. There are some posts about how to build a stopwatch (like this), but I would like to share an alternative approach.

The example in this post used Android Studio. If you haven’t done so, please follow the “Get started” part in the Flutter docs to setup Flutter and Android Studio.

Continue reading

Typing React (3) Redux

In previous articles we have already explained how to use TypeScript in regular React and with Material-UI. In this article I will show the most important and difficult part: redux.

Previous articles can be found here:

The packages used in this articles are:

$ npm install --save redux react-redux typesafe-actions \
              rxjs redux-observable lodash reselect \
              @types/react-redux

The common and recommended way of using redux is with the combination of redux + typesafe-actions + redux-observable. The configuration is a bit complicated so I will explain piece by piece.

Continue reading

Typing React (1) – Basic

TypeScript has been increasingly popular. The typing system helps eliminate most of the coding errors at compile time. Generally, TypeScript costs you a significant amount of time on coding and typing, but later on i will save you much more time on debugging.

This series attempts to facilitate the painful efforts of typing, especially when you are not quite familiar with TypeScript. Thus we will focus on typing and nothing else – anything not specifically related to TypeScript, such as the usage of redux, will be ignored.

The demo project for this series can be downloaded at my GitHub: https://github.com/charlee/todolist.

Continue reading