Top Flutter tips from May tweets

#Flutterverse is constantly growing and doing an amazing job with all their contributions. During this crucial time you all #FlutterDev stayed super active and made great creations. Tips and Tricks around development keep us lazy yet smarter. The lazier you are, the smarter and more productive you become.

Yet again we have collected some #Flutter tips shared by amazing #FlutterDev from the community to help other developers speed up their development.

Twitter tip #1

Additional whitespaces make the layout look awkward so here’s a tip to resolve it:

#FlutterTip
Do you need to have a fixed whitespace in a layout? Use SizedBox instead of Container! SizedBox is lighter than Container and has a const constructor.#Flutter #flutterdev #FlutterLinter #EffectiveFlutterhttps://t.co/3PQbMTau5g

— Katarina Sheremet 💙 (@kate_sheremet) May 15, 2020

#App #Widget

Twitter tip #2

Learn how to use shortcuts for commonly used methods and save some time:

Here's a fun #flutter tip: You can add an extension to the BuildContext to quickly access common methods and properties :) pic.twitter.com/qc4qi3Yeoe

— Nash 🥇💙 (@nash0x7e2) June 9, 2020

#App #Methods

Twitter tip #3

This test shows how to maintain a consistent database during the transition between all routes:

Step 1: Create Database for List Items

Great Resource Here:https://t.co/BjikCVCqG4

Tip:
When adding to the database in a different route, use a boolean to ensure database is updated on a callback#flutter #flutterdev

— bayolab (@bayolabstudios) May 25, 2020

#Database

Twitter tip #4

Gradient beautifies the look and feel of any app. ShaderMask makes it easy:

Apply gradient/Image mask to any widget in Flutter using ShaderMask

Tip: Gradients can be easily converted to Shader with .createShader() method.

get the code https://t.co/y276TWpNdz#day47#100DaysofFlutter#Flutter pic.twitter.com/9CMagcSuJ7

— Laxman (@erluxman) May 23, 2020

#App #FlutterDesign #Gradient

Twitter tip #5

Mais’ flutter tip tells us how easy it is to achieve that custom MaterialApp theme effect:

#Flutter tip: you have a custom design that doesn't use the splash and highlight color of default Material widgets in Flutter?
Add these 2 lines to the theme property in MaterialApp, now you can add these effects just wherever you like. pic.twitter.com/cXIbIjURY6

— ˚✧Mais✧༚ (@pr_Mais) May 7, 2020

#App #FlutterDesign #Theme

Twitter tip #6

Animated dialogues attract more customers. Learn how to animate them and make it fun:

Tip of the day(?)

Super easy to add a material dialog animation in #Flutter with the animations package. Having too fun with these! pic.twitter.com/8X0sJa3yg4

— Robert Brunhage (@RobertBrunhage) May 6, 2020

#App #Animation #Material

Twitter tip #7

Thinking about doing animation but it feels like too much work? Flare does it in just 4 steps.

Flare 🔥 helps with vector animations.

& it's is super easy 🎉🎊

1. Add flare_flutter in pubspec.yaml
2. Put .flr files in assets folder.
3. Give FlareActor the asset name and animation name.
4. Done

Code Samplehttps://t.co/fHUSB2b1SA#day61#100DaysofFlutter#Flutter pic.twitter.com/h7S7p5eGLQ

— Laxman (@erluxman) June 5, 2020

#App #FlareAnimation

Twitter tip #8

Every IDE works differently and often we have to explore the hidden features to utilise it .vscode is one important folder for certain use cases and this step shows us how we can enable it if it’s not present in root project folder

#Flutter tip: To put launch.json file or to work something with .vscode folder & can't find it then click Debug/Run option, click create a launch.json file. It'll create a folder with json file in vscode.
My e.g usecase: Multi flavor app with @codemagicio

#cicd #WomenWhoCode pic.twitter.com/KSdP69Lp1B

— Dhruva #JobSearch #IWD #WomenInTech (@dhruvashastri12) June 11, 2020

#App #IDEsettings

Twitter tip #9

Reusable code is one of the keys to increase productivity. Code snippets provide that benefit for all the IDEs you use.

Quick tip:

If you are writing same thing again and again like MediaQuery.of(context).size or Theme.of(context).textTheme

then make sure you make a snippet of it in whatever IDE you use. It can save a hell lot of time.#Flutter

— fluttercasa (@fluttercasa) June 12, 2020

#App #IDEsettings

Twitter tip #10

Building Mac OS apps is an emerging trend and people have started taking high interest in it. Official Flutter team #FlutterDev tells you how to enable support for it:

If you’re coding on a Mac and want to try building MacOS apps, switch to Flutter’s master or dev channel and…

1️⃣Enable MacOS support with ‘flutter-config --enable-macos-desktop’
2️⃣Run your app with 'flutter run -d macOS'

🛠Try it out → https://t.co/rfWv7AMwwV#FlutterFriday pic.twitter.com/GK0bhhGSOD

— Flutter (@FlutterDev) June 12, 2020

#MacOS

Twitter tip #11

One of the many cool features of async package is that we can cancel a Future or Stream. See how:

In @dart_lang we can use the async package to cancel a Future or Stream. Here is a example on how to cancel a Future.

There is so many cool feature that you can use in this package. Read more at: https://t.co/NJXIYONU58#FlutterTips #DartTips pic.twitter.com/kURv8utnDH

— Pedro Massango 💙 🇦🇴 🇨🇿 🇩🇪 (@pedromassangom) May 24, 2020

#App #DartPackageTip

Twitter tip #12

Dart 2.8 was released. You can get information about outdated dependencies and upgrading them

Tip:

run `flutter pub outdated` to check your dependencies in #flutter 🛴 https://t.co/SLIDERVmhd

— Robert Brunhage (@RobertBrunhage) May 6, 2020

#Dart #PubDependency

We hope some of these tips help you. Tell us about your experience! If you have some tips or something helpful to share with #FlutterDev, tweet about it and tag us @codemagicio or #codemagicio and we will help make you heard by resharing them.

If you couldn’t read our previous article of #Fluttertips then here it is.

#HappyBuilding!!