#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:
#App #Widget#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:
#App #MethodsHere'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
Twitter tip #3
This test shows how to maintain a consistent database during the transition between all routes:
#DatabaseStep 1: Create Database for List Items
— bayolab (@bayolabstudios) May 25, 2020
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
Twitter tip #4
Gradient beautifies the look and feel of any app. ShaderMask makes it easy:
#App #FlutterDesign #GradientApply 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:
#App #Animation #MaterialTip of the day(?)
— Robert Brunhage (@RobertBrunhage) May 6, 2020
Super easy to add a material dialog animation in #Flutter with the animations package. Having too fun with these! pic.twitter.com/8X0sJa3yg4
Twitter tip #7
Thinking about doing animation but it feels like too much work? Flare does it in just 4 steps.
#App #FlareAnimationFlare š„ 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.
4. Done
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
#App #IDEsettings#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 #IWD #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.
#App #IDEsettingsQuick 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:
#MacOSIf 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:
#App #DartPackageTipIn @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
#Dart #PubDependencyTip:
— Robert Brunhage (@RobertBrunhage) May 6, 2020
run `flutter pub outdated` to check your dependencies in #flutter š“ https://t.co/SLIDERVmhd
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!!