Fantastic Flutter Tips And Tricks I Have Found Helpful

Collection of tips and tricks to boost productivity

Pinkesh Darji
Dec 5, 2019 · 7 min read

I used to travel from long and bumpy roads with many signals on the road every day to reach the office. It was taking around 45 minutes to reach. One of my friends at the office lives in the same area as mine and also leaves for office at the same time but he always used to reach 5–10 minutes before me. 🙁 I thought he would be driving fast enough but when I actually asked him, He revealed the reason and I was surprised 😯. He told there is a new road opened which avoids most of the signals. And that saved my few minutes every day on commute.

We as a developer can also save some time and boost productivity by knowing some tips and tricks. I have written this article to list down some tips and tricks that I have found during Flutter development. You might already know some of these 🕶 but I will keep on adding new and interesting ones at the top as I find it. You can also contribute by writing the tips you know in response so other people can also benefit from it.

#① - Flutter logs

Credits: https://giphy.com/

I know we get to see Flutter logs by default but this is something different. There is also a command to log the output of the running flutter app. It’s called simple ’flutter logs’. Just open the terminal and hit this command.

At this point, you must ask me a question. I am giving you time to think of that question before you read further.

🤔

🤔

🤔

Ok, You give it a thought. Thanks.

The question must be why?? Why we should use this command?

The main advantage of using this command is that you can fire it in multiple terminal windows/tabs in Android studio. This gives us the ability to look back in the history of the log output of the previous app runs 😲

In the very first tab, you hit the ‘flutter logs’ command and run the app. You can see all the log output in the first tab. Then you make some changes(probably print() or debugPrint() statement) and run ‘flutter logs’ in another tab and run the app again. This trick can help you see the state of logs of the previous app run whereas normal logging will always replace old logs with the new ones.

#② - Slower animation

Credits: https://giphy.com/

If you are working with any kind of animation in Flutter then you must be aware of this. As its name suggests it slows the animation which can help you to figure out any issues. Complex Animation on slow mode reveals secrets behind it. It allows to you think of animation in slow mode before even implementing it.

To see slow mode in action quickly do the hot reload with any Implicitly Animated Widgets after changing some of its properties.

#③ - Extract widget

Credits: https://giphy.com/

Writing a large widget tree is difficult to read/understand and can create issues in the performance of the app too. Its always better to split the widget tree in the stateless widgets. More info can be found here.

I am going to show you a quick way to do this.

And the shortcut is Ctrl + Alt + W(PC) | ⌃ + ⌥ + W(Mac)

#④ - Inspect Widget

Credits: https://giphy.com/

If you are coming from a web development background then you probably knowing ‘🔎Inspect element’ where you can see all the properties applied to any HTML tag. This is the same feature with some limitations that brings joy to mobile development.

The problem is that sometimes it becomes difficult to find any widget in dart file even if it is properly structured. You can use the Flutter Widget Inspector to locate any widget on the screen and see all the applied properties. You can not modify the properties at runtime as of now, It is very useful though. Maybe we expect that in the future.

#- Reformat Dart code on save

Credits: https://giphy.com/

Your dart code can become a huge Bracket puzzle and also an unreadable one if it's not properly formatted. I call it a Bracket puzzle because it may be a little confusing to find the bracket you forgot to write in unreadable code.

We are talking about converting this

Center(child: AnimatedContainer(duration: Duration(milliseconds: 100), height: 300, width: 20, decoration: BoxDecoration(color: Colors.deepPurple),),

To —- — -— — ⬇️ — — — — This

Center(  
child: AnimatedContainer(
duration: Duration(milliseconds: 100),
height: 300,
width: 20,
decoration: BoxDecoration(color: Colors.deepPurple),
),

There is a handy shortcut available for this. It’s Ctrl + Alt + R(PC) | ⌃ + ⌥ + R(Mac) in Android Studio but who likes to do this every time when you write code??

There is one option called ‘Format code on Save’ in the Android studio’s settings page which reformats code when you save. Isn’t it exciting?

Here are steps to enable it in Android studio.

#- Live code snippet

A lot of boilerplate code can be written by installing plugins that generate code for you when typing a specific keyword defined by plugins.

For example typing below the whole line by yourself…

import 'package:flutter/material.dart';

If you installed the plugin like this https://github.com/georgeherby/flutter-snippets you may just have to write ‘im’ and then you get a selection to have code for.

This was just a simple example. It becomes really helpful when you don’t remember the exact syntax to get started with any widget. For example, starting to write a stateful widget with such plugins is time-saving instead of writing on your own.

#⑦ - Spread operators

Dart 2.3 Introduced very useful features and one of them I like is Spread operators. It allows us to write UI as Code meaning, with spread operator you can write if-else statement while writing the widget. For example

Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
if (age >= 18) ...[adultView(true)] else adultView(false),
],
)

This could also be written as

Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
age >= 18 ? adultView(true) : adultView(false),
],
)

But Spread operators are very useful when you have nested if-else condition.

#⑧ - Dart cheat sheet.

Download and keep this dart cheat sheet handy while developing Flutter apps.

https://www.raywenderlich.com/4482580-dart-2-cheat-sheet-and-quick-reference-2019

You can also share this article with your friends (Who are like me — Do you remember long and bumpy roads? If not, You may read the story carefully.)

This is not the end of this article. I will keep on adding/improving this article.

Thanks for reading.



Flutter Community

Articles and Stories from the Flutter Community

Pinkesh Darji

Written by

Passionate Flutter Dev | Google Certified Associate Android Developer | Cross-platform App Dev | Kotlin Android Dev https://twitter.com/PinkeshDarji

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade