Refactoring and the Implementation in Flutter

Ardian Ghifari
4 min readMar 29, 2021

Bruno Mars once said that the mess he made in a relationship can haunt him everytime he closes his eyes. It actually relates with many programmers, but instead of relationship (which many of us lack), it is code. The mess a programmer makes in his code can sometimes cost him his spare time, even his weekend.

Imagine you manage to finish all your tasks in Thursday so that you can breath some fresh air in Bandung. Life is going good for you until one of your team members calls you and asks you many things obvious for you in your code but not for him. Unfortunately, you don’t bring your laptop with you. You have to delay enjoying your weekend for an hour to explain your code to him. Even worse, you realize all of team members now depend on your code and you have to refactor your code. You have to return from Bandung and get to your laptop. I’m sure we all agree that won’t be a good weekend. How can you avoid it? Let’s take further look on refactoring.

Principles in Refactoring

Before we step into principles, we should understand the definition of refactoring. Accoring to the book Refactoring: Improving the Design of Existing Code, refactoring is a change made to the internal structure of software to make it easier to understand and cheaper to modify without changing its observable behavior, while refactor is to restructure software by applying a series of refactorings without changing its observable behavior.

The author of the book underlines two points in his definitions. First, the purpose of refactoring is to make the software easier to understand and modify. You can make as many changes as you wish in the code, but only changes that make the code easier to understand that can be called as refactoring. Second, refactoring does not change the observable behavior of the software. The software still carries out the same function that it did before even its users can’t tell that things have changed.

There are three most common times to refactor. The first time is when you add function. The reason to refactor in this time is to help you understand some code you need to modify. The second time is when you need to fix a bug. It is very common that you can understand the code more when fixing a bug. As you look at the code trying to understand it, you refactor to help improve your understanding. The third time is when you do a code review. Usually, when you review your code or your partner’s code, you come up with ideas to improve the code. Instead of just imagining it, you can refactor.

However, there are two times that you shouldn’t refactor. The first time is when you should rewrite from scratch instead. A sign of the need to rewrite is when the current code just does not work. You may discover this only by trying to test it and discovering that the code is so full of bugs that you cannot stablilize it. Remember, code has to work mostly correctly before you refactor. The second time is when your are close to deadline. At that point, the productivity gain from refactoring would appear after the deadline and thus be too late.

Refactoring in Flutter

During this semester, I work on a project using Flutter. Flutter can be used to implement the frontend side of an android application. As I am using VS Code to code Flutter, I will explain using tool in VS Code. Although the default application to code Flutter is Android Studio, VS Code is more light-weight for daily use. These are steps to refactor code in Flutter using VS Code:

  1. Install VS Code. If you haven’t, you can download from its website
  2. Set up Flutter and Dart plugin on VS Code. If you haven’t, go to the view option in VS Code menu bar,

click Command Palette, type install in the search bar,

choose Extensions: Install Extensions, type flutter in the install extension search bar,

and install the Flutter plugin.

3. Right-click (or multi-touch in MacOS) on the code window and choose the options based on your need (you may format the code to Flutter standard or refactor)

In conclusion, there are times when you need and don’t need to refactor your code, but in the end, refactoring greatly helps your teammates. I hope my article can help you understand refactoring and its implementation in Flutter. Thank you for reading my article.

Reference:

FOWLER, M., Refactoring: Improving the Design of Existing Code.

https://flutter.dev/docs/development/tools/formatting

--

--