#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— Katarina Sheremet 💙 (@kate_sheremet) May 15, 2020
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
Twitter tip #2
Learn how to use shortcuts for commonly used methods and save some time:
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— bayolab (@bayolabstudios) May 25, 2020
Great Resource Here:https://t.co/BjikCVCqG4
When adding to the database in a different route, use a boolean to ensure database is updated on a callback#flutter #flutterdev
Twitter tip #4
Gradient beautifies the look and feel of any app. ShaderMask makes it easy:
#App #FlutterDesign #Gradient
Apply gradient/Image mask to any widget in Flutter using ShaderMask— Laxman (@erluxman) May 23, 2020
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
Twitter tip #5
Mais’ flutter tip tells us how easy it is to achieve that custom MaterialApp theme effect:
#App #FlutterDesign #Theme
#Flutter tip: you have a custom design that doesn't use the splash and highlight color of default Material widgets in Flutter?— ˚✧Mais.✧༚ 💙 (@pr_Mais) May 7, 2020
Add these 2 lines to the theme property in MaterialApp, now you can add these effects just wherever you like. pic.twitter.com/cXIbIjURY6
Twitter tip #6
Animated dialogues attract more customers. Learn how to animate them and make it fun:
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.— Laxman (@erluxman) June 5, 2020
& 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.
Code Samplehttps://t.co/fHUSB2b1SA#day61#100DaysofFlutter#Flutter pic.twitter.com/h7S7p5eGLQ
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.— Dhruva 🏡💙 #DevFest #WomenInTech (@dhruvashastri12) June 11, 2020
My e.g usecase: Multi flavor app with @codemagicio
#cicd #WomenWhoCode pic.twitter.com/KSdP69Lp1B
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:— fluttercasa (@fluttercasa) June 12, 2020
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
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…— Flutter (@FlutterDev) June 12, 2020
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
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.— Pedro Massango 💙 (@pedromassangom) May 24, 2020
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
Twitter tip #12
Dart 2.8 was released. You can get information about outdated dependencies and upgrading them
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.