#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. DoneCode 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 🏡💙 #IWD2022 #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!!
Discussion about this post