Fantastic Flutter Tips And Tricks I Have Found Helpful

Collection of tips and tricks to boost productivity

Photo by Maxim Selyuk on Unsplash

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.

Do you want to stay updated in Flutter world? Please click on subscribe button to get an email when the new tutorial is published or visit the https://flutterbeads.com

#① - Flutter logs

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

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.

1. Click Flutter inspector.
2. Click ‘Slow Animation’.

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

#③ - Extract widget

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.

Splitting widgets to methods is a performance antipattern

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

1. Select the Widget.
2. Right click ->Refactor -> Extract -> Flutter Widget.

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

#④ - Inspect Widget

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.

1. Click Flutter inspector.
2. Click on the ‘Enable Select Widget Mode’.
3. Select any widget on the screen.

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

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.

1. Go to settings.
2. Click on Language and Framework section.
3. Choose Flutter.
4. Now you will find an option in the editor section.

#⑥ - 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.

Easy Way to Internationalize and Localize Your Flutter app - FlutterBeads

Create an Onboarding Page Indicator in 3 Minutes in Flutter.

Previous 👆

Up next 👇

Adding animations to your Flutter app - FlutterBeads

Flutter Widget In Focus — DraggableScrollableSheet (Know It All)

Little about me

Hi, Myself Pinkesh Darji. I love to solve problems using technology that improves user’s life on a major scale. Over the last several years, I have been developing and leading various mobile apps in different areas. More than just programming, I love to write technical articles.

I write about Flutter at https://flutterbeads.com/. A place to learn Flutter from high-quality tutorials.

Pinkesh Darji 💙

pinkeshdarji - Overview

Flutter Community