18+ Flutter tips and tricks
Tags: flutter, dart, android, ios
Published: 2020-05-09 11:12:57

---
title: 18+ Flutter tips and tricks
published: true
description: 
tags: #Flutter #dart #android #ios
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/psw782jgf7z3dl08tcag.jpg)


As we were developing the [Programming Hero](https://onelink.to/proghero) ios app using Flutter, we discovered a few tips, tricks, and libraries. If you are new to this Flutter/Dart world, some of these might help you. 👇

**1. Create Intro Screen in Just 10 Minutes**

If you need an awesome intro screen but don’t have an awesome idea,[ Introduction Screen](https://pub.dev/packages/introduction_screen) will save you. You'll be amazed. 

![Alt Text](https://cdn.discordapp.com/attachments/446181146989035531/708627969429602394/introSlider.gif)


**2. Use Flutter Snippet**

If you need productivity, Flutter Code Snippet will make you a superstar. You can easily create commonly used Flutter classes and methods. For example, you can create StreamBuilder Widget or SingleChildScrollView Widget by typing the shortcut streamBldr and singleChildSV respectively. You can use the flutter snippet in[ Android Studio](https://github.com/benznest/flutter-snippet) or[ VSCode](https://marketplace.visualstudio.com/items?itemName=Nash.awesome-flutter-snippets).

![Alt Text](https://cdn.discordapp.com/attachments/446181146989035531/708628308811710503/AwesomeSnippet.gif)


**3. Create Mind-blowing Icons Using Font Awesome**

You don’t have to be the designer to include mind-blowing icons in your app. Just use the[ font awesome for flutter](https://pub.dev/packages/font_awesome_flutter#-readme-tab-) and you will create magic in minutes.

![Alt Text](https://cdn.discordapp.com/attachments/446181146989035531/708629325120929833/FontAwesome.gif)


**4. Enjoy Dependency Magic Using** **get.it**

A good practice is to put your app’s logic in classes separated from your Widgets and then inject it wherever needed. For example, one of my app, we need to access the Prefmanger class from multiple places to read and update the user state stored in the localstorage. We used [ get\_it](https://pub.dev/packages/get_it) so that this class can be injectable as a dependency.

{% gist https://gist.github.com/shuvojit007/513176a2165d0fd8061e34ff6c003232 %}

**5. Reuse Data Using the Singleton Pattern**

Singleton means the class has only one instance and also provides a global point of access to it. It is also an easy one to get wrong if you are not using it carefully. We need to access our ThemeColorclass (dark mode or light mode) again and again to set our theme color in widget . 👇

{% gist https://gist.github.com/shuvojit007/15a6f942153772fe7f9608f595715cae %}

**6. Avoid Widget Rebuild by Using** **const** **Constructor**

If you want to prevent unwanted widget rebuilds always use **const** constructor. In the code below, the instance of BoxDecoration will remain the same even if the setState is called.

{% gist https://gist.github.com/shuvojit007/8a7645d7e464e8ebd928227600bad1d8 %}


**7. Code Format Using** **dartfmt**

Always add Trailing Commas (,). It will help you to format your code by using **dartfmt**. After that you will be able to get rid of the headache of formatting by using[ dartfmt](https://dart.dev/tools/dartfmt).

![Alt Text](https://cdn.discordapp.com/attachments/446181146989035531/708628629344485446/Trailing_Comma.gif)


**8. Write Cleaner Code Using the Spread Operator**

The Dart 2.3 introduced a few useful features and one of them I like is the Spread operator. This is very useful when you need conditional UI widgets. Specially when you have nested conditional UI Widget.

{% gist https://gist.github.com/shuvojit007/76573c24ae657f94e7a950002f981060 %}

**9. Custom Extension to Reduce Duplicate**

Don’t make your code wet 😎. Keep it DRY. Here the word DRY means — Don’t Repeat Yourself. Hence, you should not repeat the same functionality in multiple places.

In my app, I need to convert HTML tags to be displayed on the UI because mighty Flutter is still reluctant to support HTML tags. And, we needed to repeat the code below in several places. That's why I created an[ extension method](https://dart.dev/guides/language/extension-methods) that can be used anywhere needed.

{% gist https://gist.github.com/shuvojit007/3d7a9f797cf2bbc795654942160ad887 %}


**10. Less Code Using Double Dot, The Cascade Operator**

Dart has a single dot (.) operator. And a few minutes ago, we talked about three dots (…) . So, one and three dots are covered. Do you feel like anything missing in the middle? You got it correctly. We are talking about the middle person, the double dot (..) which is also known as the[ cascadeoperator](https://www.w3adda.com/dart-tutorial/dart-cascade-notation).

You can use the cascade operator to save typing time when multiple method calls on the same object are being made.

{% gist https://gist.github.com/shuvojit007/d6039ba9783496f554bf1a933048871a %}


**11. Knock Out the iPhone Notch with Safe Area**

It’s a pain that some of your content is getting cut by the iPhone 10+ notch. The same could happen in Android.

Consider using the[ SafeArea widget](https://api.flutter.dev/flutter/widgets/SafeArea-class.html) can keep the pesky notification bars and phone notches from encroaching on your app’s UI. It uses a MediaQuery to check the dimensions of the screen and pads its child Widget to match, making sure your app is safe on both iOS and Android!

**12. Use Key for Efficient ListView Rendering**

To make rendering efficient,[ use keys](https://flutter.dev/docs/development/ui/widgets-intro#keys) on each item. This will make your list view rendering very efficient.

**13. Efficient Debugging with Performance Overlay**

Performance Overlay shows how long each frame took to build and at the top there is the GPU time (Raster Thread) and at the bottom is Ui Time (Ui Thread). If you see a red bar in the UI graph, the Dart code is too expensive. If a red vertical bar appears in the GPU graph, the scene is too expensive to render.

![Alt Text](https://cdn.discordapp.com/attachments/446181146989035531/708629827229581313/profiling.gif)

**14. Avoid Profiling in the Debug Mode**

You will not get accurate performance indication if you profile in the debug mode. Debug mode is by default much slower than production mode. Simulator/ Emulator is not indicative of how your app actually works in Real Device.

**15. Use Tracing to Measure Execution Time**

You might not know how much time you took to finish your job in the bathroom. However, you can use the Tracing to see how much time is taken to execute.

{% gist https://gist.github.com/shuvojit007/3ddf57717534e8051f149444be58dece %}



**16. Declare Multiple Variables with Shortcut** Usually, I declare my variable most of the time this way

{% gist https://gist.github.com/shuvojit007/94f665773cace174ccc96c432aa1366f %}

But if you are lazy like me than you can also do these things this way

{% gist https://gist.github.com/shuvojit007/8b9fdbc8501ac3e4c3518ae7936aa7f8 %}


**17. Smart Logging, Log Anything**

Though we are used to log the string message, we can also pass other objects like List, Map, or Set. For more about log level, logPrinter, logOutput, checkout the[ logger doc](https://pub.dev/packages/logger#-readme-tab-).

**18. Set Cross-Platform Icons Like a Pro**

Are you messed up to set icons for both the Android and the iOS version of your app? Don’t worry, I will give you two steps to handle it using the[ Flutter Launcher Icon](https://pub.dev/packages/flutter_launcher_icons). First, setup your config file.

{% gist https://gist.github.com/shuvojit007/58bf2156c8d70a203cd9dc098cc07e4c %}

**18+. Get That Level Powered by Basic Utils**

Do you need extra power in some crucial moments? Consider using basic\_util. It contains a list of amazing methods to give you productivity at the right time. For more utils like SortUtils, ColorUtils, DateUtils, IterableUtils, CryptoUtils, HttpUtils in the[ basic utils](https://pub.dev/packages/basic_utils#-readme-tab-).

Let me know the tips & tricks that you discovered while developing your flutter app.

Please feel free to check out our [app](https://onelink.to/proghero) built with Flutter.