9 Flutter Productivity Hacks to Supercharge Your Apps

Struggling to create Flutter apps? Try these tips from DK’s Flutter dev!

The more time you spend working with a programming language, the more you’ll learn new tricks that can boost productivity. At DKatalis, we are using Flutter and Dart as our main SDK and programming language.

So, here are some tried-and-true productivity tips for fellow Flutter developers out there!

1. Hot Reload & Hot Restart

Reload for appearance, and restart for the state.

Hot reload is an amazing feature that is part of Flutter, which makes a very difference with frameworks. It works by injecting updated source code files into the Dart virtual machine. When the machine detects the changes, it will rebuild the flutter tree and update the view.

Hot reload: Immediately reflect and rebuild the UI.

Hot restart: Clears the memory (e.g. state management, things in memory) and reloads the application.

Full Restart: Kills the app completely application and re-runs the application.

2. Packages

We use packages because we don’t want to reinvent the wheel and bring our app to production quicker. But some of the packages are maybe outdated or too bloated.

If you are sure that some packages will add a lot of value to your application, are not outdated, and are not overly bloated, you should use and implement them. Otherwise, if you can build it on your own, go ahead and do it. There’s no need to use packages that may include things you don’t need.

Here’s a tip: use packages to make your application much richer but not at the expense of making it really slow, outdated, or some other negative consequences.

3. Use Icons

Use simple icons to make your app’s UI more crisp and attractive, and to give pictorial clarity to users. It also brings a level of uniqueness to your application and makes it stands out.

You can use icon fonts, or import your own icon for a more personal touch (SVG, etc.)

4. Use Snippets and Plugins

Writing the same thing over and over again can be exhausting and inefficient. Using snippets and plugins can save you some keystrokes and boost productivity!

In short, code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional statements.

For example, if you want to create a stateful widget, simply type in stful, or stless for the stateless widget. Another one is when you want to wrap your widget with a container, click the “light bulb” icon.

You can also create your own snippets easily!

5. Avoid Over-Engineering Your Apps

Complexity blocks productivity, which kills creativity.

Try to avoid over-engineering your apps. Simple doesn’t mean weak, complex doesn’t mean strong either. For example, if you’re building a “Hello World” application, you don’t need the bloc pattern.

If a stateless or stateful widget is sufficient enough to get your app up and running, just use that. Users don’t care how complex your application is, they care about how good your application is, looks good, and its performance.

6. Use Small Widgets

Keep in mind that everything in Flutter is a widget.

Split your widgets into many small widgets, so, if you need to rerender/refresh, only that particular widget will get affected, not the whole widget/widget tree. Splitting your widget also makes it reusable on other screens, well structured, and easily maintained.

7. Test on Physical Device

A physical device provides a real environment.

A real environment means you could test it with scenarios like when there’s an incoming calls/notifications, using the hardware (GPS, network, Bluetooth, etc.). A physical device performs better and faster than an emulator because it runs the app at a real speed that the user would experience.

By testing your app on real devices, developers can see the exact behavior of the app which users will see on their devices. It will also help the developer in finding unexpected behaviors in the app, and can also improve the user experience.

There’s just no way around this. Eventually, users are going to use your application on their devices.

8. Use Flutter Dev Tools

DevTools is a suite of performance and debugging tools for Dart and Flutter.

Like F12 for web browsers, with DevTools you can:

• Inspect the UI layout and state of a Flutter app.
• Diagnose UI jank performance issues in a Flutter app.
• CPU profiling for a Flutter or Dart app.
• Network profiling for a Flutter app.
• Source-level debugging of a Flutter or Dart app.
• Debug memory issues in a Flutter or Dart command-line app.
• View general log and diagnostics information about a running Flutter or Dart command-line app.
• Analyze code and app size.

9. Start Simple and Small and Always build

Instead of doing everything all at once, do it step by step. Start by creating a simple and small UI, publish it, get feedback, enhance it, and repeat.

Hone your Flutter and Dart skills through projects. It doesn’t have to be related to work, you can explore any open-source projects, or even initiate one.

Building a Flutter application is what makes you the best at Flutter. Just start simple and small, no need to build anything too complicated.

Enjoy these tips or have other hacks that you find extremely helpful? Let‘s share them with fellow Flutter devs in the comment!

Or better, join us in creating out-of-the-box digital solutions powered by Flutter and Dart!