35 Flutter Tips That Will Change Your Life
ฝัง
- เผยแพร่เมื่อ 31 พ.ค. 2024
- This is 35 Flutter tips and tricks that you must know. This list of tips is great for flutter beginners, advanced and pro developers. This is the new tips and tricks series from Flutter Mapp, in this on we show you 35 flutter ticks and tips that you can start to implement today. You will code apps faster with these tips and you will increase you knowledge from this list of 35 widgets, extensions, tips, tricks, shortcuts and more.This tips are highly recommender for any flutter developer willing to learn more about dart and flutter. We talk about shortcut development with flutter, helpful flutter tips, practical widgets and many more flutter tips & tricks. This new series is the following of the series 30 tips and tricks but even better. Part 2 of this flutter 35 best tips and top tricks will come really soon on our Flutter channel. Let us know how many new tips you have learned and if you think any tricks should be implemented in the next video. This was 35 Flutter tips & Trick by Flutter Mapp.
FREE FLUTTER ROADMAP
A Free step by step guide to learn Flutter available here: fluttermapp.com/
COURSES
Flutter courses (ZERO to HERO): fluttermapp.com/
OVERVIEW
0:00 Tip 1: Fold Pubspec.yaml
0:30 Tip 2: Add dependencies
0:50 Tip 3: Awesome Flutter Snippets
1:07 Tip 4: Auto Fix Const
1:35 Tip 5: Type Shortcuts
1:47 Tip 6: Define Small Widgets
1:57 Tip 7: Widgets instead of functions
2:00 Tip 8: FAB Notch
2:23 Tip 9: AnimatedIcon
2:52 Tip 10: ErrorWidget
3:21 Tip 11: Print vs Log
3:37 Tip 12: kDebugMode
3:47 Tip 13: Simple Glass morphism
4:14 Tip 14: VSC Color Shortcut
4:27 Tip 15: Scrolling Fading Animation
4:55 Tip 16: Better Comments
5:05 Tip 17: AnimatedCrossFade
5:25 Tip 18: Dismiss Keyboard on Drag
5:40 Tip 19: Flutter Search Bar
6:12 Tip 20: ElevatedButton.icon
6:22 Tip 21: StadiumBorder Shape
6:34 Tip 22: Null Operator
6:48 Tip 23: Arrow Function
7:00 Tip 24: Refactor
7:11 Tip 25: Spread Operator
7:25 Tip 26: Flutter OverflowBar
7:35 Tip 27: Cascade Operator
7:55 Tip 28: Select Calendar Date
8:13 Tip 29: LayoutBuilder
8:35 Tip 30: SafeArea
8:45 Tip 31: SwitchListTile
8:58 Tip 32: Adaptive Widgets
9:16 Tip 33: Previewed website
9:28 Tip 34: Performance Overlay
9:49 Tip 35: Integration Test
10:03 Tip Bonus: Network Tab Devtools
CREDITS
@RobertBrunhage
@tadaspetra
@CodeWithAndrea
@TheFlutterWay
@filiphracek
/ testeurmaniak
/ gaetschwartz
/ mcflydev
/ tomicriedel
/ remi_rousselet
/ craig_labenz
/ vandadnp
/ roaakdm
Special Thanks to / fluttertip for gathering a lot of these tips.
Alternative Title: Top 35 "Mind-Blowing" Flutter Tips and Tricks
LINKS
Tip 1 Code: gist.github.com/gaetschwartz/...
Tip 3: / 1490703527328550913
Tip 15: dartpad.dev/?id=11dff46c9adcf...
MISSION
Our mission at Flutter Mapp (Flutter Mobile App) is to help purpose driven Flutter developers go full-time doing what they love and making an impact through coding. We achieve this with useful Flutter tips and straight to the point Flutter videos.
RECOMMENDED
Top 30 Flutter tips and tricks: • Top 30 Flutter Tips an...
Flutter of the day Playlist: • Flutter of the day
DISCORD
Invite: / discord
SOCIAL MEDIA:
Instagram : fluttermapp
Twitter : FlutterMapp
Website: www.fluttermapp.com
CONTACT
For business inquiries email me here: info@fluttermapp.com
Website: fluttermapp.com
#FlutterTips
#Flutter
![โอ้มายก๊อด! ไม่ถึงชั่วโมงหมดเป็นแสน 😅 [cc] แดนแพทตี้ SS2 | EP.42 |](http://i.ytimg.com/vi/OH2ShXfO6tA/mqdefault.jpg)
That `const` tip is going to say so much time. Thank you
Yeah that is an awesome tip! Thanks for the comment Vraj! 🔥
Is the reason why I switched from android studio to vs code
How to edit settings.json file?
its says not editable beacuse of readonly , can you help me with that
This is definitely one of your best videos. Been using Dart/Flutter for a while now but you presented tons of useful stuff I haven't heard of!
Thanks a lot Dippa, glad you liked this one 👍🙏⚡
Every single one of these is gold, and plenty are complete game changers! Going to have to sit down and watch this plenty and write some of this down … the VSCode settings blew my mind lol. The community cannot thank you enough, you are helping us all to become better developers, and even entertaining us as we learn with some awesome clips 😅📽🥇
[Edit: so good I had to buy your course just now from your website, a little reward to you but big reward to me - an investment in my future. Your materials are superb 💙👍]
Thank you very very much, I also want to credit all the people that found those tips (in description). I just compile all of them after all 😂 Thank you very much again for getting the course, I do appreciate it a lot CM 🔥👏
I really love this channel !!
O seu trabalho é maravilhoso! Muito feliz de conhecer o seu canal. Parabens!
Awesome bonus tip! I was doing the same thing and didn't know there was a network tab. Thanks for saving me time!!!
You one of my best tutors. Thank you for showing these useful Videos
AWESOME content! Thanks
One of my favorit channels on the platform!
I do appreciate it a lot Omar, I wish you a great day 🚀👍
Awesome tips bro.Helps me a lot
I code on flutter like every single day and the setting.json tips was the most needed for me thanks louis!!! keep it up 🔥
Pleasure Benji, Glad that you liked this tip 👋 Thank you!
This is a great video ... cant wait for part2!
Thanks a lot Pooya, I appreciate it, part 2 sooooon 🚀
Love these types of videos you do, the flutter tips. Keep it up!
Thank you very much Tristan, part 2 of this video will come soon 🔥⚡️
Super awesome...thanks a lot!
This is the best video I have ever seen so far, those tips are very useful!! Thanks!! 😉
Thank you very very much Johan, I appreciate it a lot. Hope to make Part 2 even better 👏🔥
Great video. Thanks
Bro honestly these are mind blowing
this guy is legit ♥🙌🏻
Very cool. Definitely learned a few useful tricks. That DevTools network inspector is going to be a lifesaver. Thank you.
One suggestion. I wish you paused or shown an indicator of some sort when moving from one tip to another. I had a bit of a hard time differentiating between them. Sometimes it just sounded like you were referring to one thing but turned out it's another whole new tip :)
Yeah the network inspector is fire! 🔥🔥 and for the second comment, I tried to make the video flow more naturally this time. Last time I had multiple comment about how its boring to 35 tips starting like "did you know that.." 😂😂😂
@@FlutterMapp Oh 😬 Guess you can't please everybody. I understand. Maybe a visual cue should be enough. So you don't have to say it loud every time.
So proud how many tricks I already knew! 😭 and so amazed by all the tricks I didn’t know! 🤩🤩🤩
Nice! glad that you learned some new tips 🔥👍🙏
Thank you very much for all these tips. I'm not a Pro in Flutter, but I love it. 💕
Thank you very much Arturo 🔥🙏
This is pure Gold!
Thanks a lot Christian! This was very long to make but quality is important 👏🔥⚡️
Great video! Keep it up. I learned something new
Nice! Thanks a lot MobileMon 🎉🚀
That was so useful thank you
Great video bro, please keep this up!
Thank you very much Sreeraja 👏🔥
I’ve been saying that I am familiar with Flutter but it ends today..
Leaned so many tips. Thanks alot
lollll 😂😂😂 Well next time (part 2) we will bring more crazy tips I guess 😂 Thank you!
I like your tips man, keep it going, good luck
Thanks a lot Mohammad, this is really appreciate 👍👋 part 2 soon 🔥
Incredible !!!
These helped me alot! :D
Very good for beginners , I appreciate the up to date tips from latest flutter release.
Thank you very much Julien, glad that you enjoy the video, part 2 soon 🔥🔥👏
Amazing content, thank you !
Pleasure Talles! Thanks for the nice comment 👏🔥🔥
Thank you for this!
Pleasure Josh, thanks for the comment 🔥👏
Amazing! Thanks!
Thank you very much Filip, I appreciate it 🔥🔥
This is incredible
man!!!!!!!!! this video is very helpful Loved it
Thank you very much Daeam, I appreciate your comment 🎉🙏
love these tips!!
Nicee and thank you Michael!! This was a long video to make, glad you like it 🙏🚀
Fantastic video my friend!
Thank you! 💪🔥
this was one of the best videos i've seen in my hole life, this wasn't some random life hacks, it literally saved my life not my time !!!
😂😂😂😂 Awesome to know, thanks a lot for the comment🔥👍
really, this is the perfect advance flutter, thanks, very best of luck Creator
Thank you very much Abhi, I really appreciate it 👏💪
Thanks a lot!!
I appreciate it 👏⚡️
Thank you very much for those usefull tips
Pleasure, thank you for the comment Emeline, I appreciate it 🔥🎉
Always look forward to your tips💙
Thanks a lot man! I saw your channel last day also I remember you. Keep it up 🔥🔥🚀🚀
@@FlutterMapp Thanks so much.
@@Vikkybliz Thank to you my friend 🙏
Usually tips like this are not useful(to me) as they are kind of beginner-y but there are actually some stuff in here that I didn't know. So thank you for making this.
Thank you for the nice comment, I appreciate it a lot Stereo Codes 🔥
Your information are priceless. Thank you.
I just have one question, between ObjectBox and Hive what would you prefer for POS App?
These are some great tricks!
thanks a lot Tim 🔥👏 Have a great day ⚡️
Hey man, i never wrote comment to any videos yet, BUT I wanna say thank you. SO MANY USEFUL TIPS. The video is a big W.
That's wayy too good bro Thanks you ..
Pleasure Kaung, I appreciate it thank you! 👏
great tips man! really helpful stuff! by the way: tip number one can also be done in Android Studio, for those using it. go to Project on the Folder structure, then settings, File nesting, there you can add the configuration.
Keep goin! thks for sharing all this stuff! appreciated!
Thanks for sharing!
thank you for the tips
Pleasure, thanks for the comment 🙏👍
Awesome Tips and Trick
Thank you very much Salil 💪👏
Man. I love you
That was a lot of amazing tricks.
Glad you liked it
Such a great vid man, thanks a lot. (Y)
Pleasure Boolixful, I appreciate it 👏
This was a-mazing.... really!!! Woah.
Damn! Thank you so much Vedran! I appreciate you! 🔥🔥
Just Amazing...
Thank you very much Emirhan! I appreciate it 👏🔥
My mind was indeed blooowwwwwnnnnnn!!!!!... New subscriber alert
Thank you very much Edung 👏 I appreciate it
I love your Flutter tips and they are the reason i susbscribed to your channel
Thanks a lot Noobinator 👏 Part 2 will come soon 🔥
You nailed bro ❤️
Thanks a lot Nikhil 🔥👋🚀
latest one absolutely everybody should know
Probably the best channel for flutter on earth 🔥
And wider Solar System 😉
lolll thank you very very much 👏 That is the goal, become the greatest Flutter channel 👏 First we need to pass William 😂
@@FlutterMapp oh don't worry william's going down soon 😁
Merci c'etait parfait !
Plaisir Ben 🙏🎉 Merci pour le commentaire 🎉
You are the best 💗
Thank you very much Hko, It means a lot 🚀👋
Helpful 😃
Thank you very much Sayed 🎉⚡⚡
amazing man
i from brazil and i love your videos
Thank you very much Lucas, I do appreciate it a lot 🙏👍
Gold!
Thank you a lot 👍🙏🔥🔥
Valeu!
Bro, thank you very much for the super thank. I appreciate this Pedro🔥🔥👏
Your pronunciation is really great. Even with my poor English skills, all the words fall into place.👍
Thank you a lot BS 👋🔥 Glad you understood the video 👍
great very useful
Thanks Ken, have a great day 👏
BEST VIDEO EVER, DAMN I have been lost in the flutter world
😂😂😂 Thank you very much Luis, better videos are comming 🙏
Its brilliant and easy to implement thanks. Keep it Up. Its great for learning whole platform. Query: How can we make category model for nested collections. for example: category -> mainCategories[ ] -> Sub categories[ ] of each main category ====> FlutterFire
First thank you very much. Second for you question, I am not sure to understand 😂 There is flutter discord to ask question also if you want, this help a lot 👋
Do you mean a class that has itself as a field? That is possible
NestedClass {
final List childNestedClasses;
... // constructor and other code
}
that's so good i didn't skip adds
lolll 😂 Thats a great sign, I appreciate it Natalia! ⚡️
good one 👏👏🎯
Yo flyte! Thanks a lot! Comment vas ton app pour la job? 🙏👍
@@FlutterMapp sa va bin man 🤌 flutter pi supabase , jvoulais justement t'envoyer un update jfait ca cette semaine 🤙
@@flyte9844 Perfect, tu m'envera sur twitter 🙏
Waiting ❤️
Thank you a lot 👏🔥
Mention not❤️
Man Layout builder saved my day!
Yeah that is pretty cool! 🔥👏 Thanks for the comment!
My fav is the const.
I consider myself a flutter pro and there were tips here for me too 👍
Damn! Glad to hear about this! I appreciate it ⚡️
Which tips you learned Martin, if you don't mind sharing?
Adding const on save, although I use intellij
Damn that overflow widget is what i need in my project
Great
Thank you a lot Herm 🔥👏👏👏
Awesome 💜💜
Thanks Mohamed ⚡️🔥
This is the best code channel ever, love your content!!
Thank you very much Lucas 🙏🔥🔥🔥🔥🔥
Gold video and one of the greatest flutter channels in youtube, keep up the momentum pro👍, but I have a Q in 5:27 how to get rid off the docked FAB when u tab the search bar cuz it floats upside the keyboard !
Thank you very much Ahmed, for your question, you could probably wrap the floatingActionButton with a Visibility widget and hide it when the search bar is active 👏🔥
Thnx for this awesome solution my friend ♥️💥
you r a legend
Thank you very much vPrezn, I appreciate it a lot 🔥
danm.... thats good
I appreciate it Dimas 🔥👋
3:06 That's exactly what I have been looking for! Thanks a lot! Byebye depressing red screens!
looool, yeah its pretty cool 😂
In vs code just go to dependencies in yaml file and start writing the dependency name and hit tab to auto complete with another tab to enter the latest version number.
No way??? That is awesome tip, thanks a lot Mohammed. 🙌🙌🔥
You are a genius dudeeeeeeeeeeeee 😭😭😭😭😭😭😭😭😭🥳
looll, I just merged many tips together 😂 Thanks a lot Diei, I appreciate the comment 🔥🔥
Is there a way to do the same file format organisation in Android Studio? Just like you did on 0:00 Tip 1: Fold Pubspec.yaml
I hope one day flutter will be automatically in adaptive mod.There will be no need to specify widgets differently for IOS and Android platform.Hope we'll see this soon.
I hope we never see this your basically advocating for less flexibility
@@martinseal1987 Automatically does not mean "only". You could still override the adaptive mode.
@@the4fibs832 then you would have to know before hand how every adaptive should look on each of their respective platforms before knowing if you'd like to override it or not
Yeah, I think if you use the cupertinoPageScaffold you will have all the ios stuff automatically. But since we always use the Scaffold normal, this is the one that show automatically the android ones kinda. Not sure how they can do this neither 🧐🧐
@@martinseal1987 I don't think so.For IOS and Android we use different widgets, which is not the "SingleCode For Cross Platform ",instead actually we are using different code for different platform,as in flutter the code is actually "The Widgets",and if you are changing widgets for every platform,then how can we call it "SingleCode For Cross Platform"?.Hope I've cleared my point.
So click bait title and thumb but actually delivers!
Damn I appreciate it 🙏🔥🔥
I like the noob part in thumbnail
This video is like trying to run fifa 22 on a 4GB RAM Laptop. Could not load much on first try, i will watch over n over again. Btw. Thanks, great video.
lollllll. 😂😂😂 I guess its a good thing 😂 Thanks a lot Ismail
Epic
Thanks a lot Meisam 👏🔥
Hey dude can you tell which tool are you using to make that good looking code snippet screenshot doesn't look like vscode.I would like to keep my coding snippet like that in my notes
I do most of the time take a screenshot of the screen, the crop the image and add an other image with rounder corners behind and add also a png image with the 3 dots colors 😂 (A lot of work not gonna lie) The only tool I use is adobe premiere pro (editing tool)
How to add only upper side line(border on BottomAppBar)?
As you have shawn in your video(with floating center docked).
Amazing, how to remember everything !?😅
3:05 I LOLed so hardddd .... switch the red screen into a green screen... yeaaa best tip ever....
😂😂 You can transform the green screen as much as you want 💪
🔥🔥🔥
⚡️⚡️⚡️⚡️⚡️
I have been using the first tip about hiding some files inside pubspec.yaml, however now VSCode reacts to the given code in settings.json as an unknown configuration setting. Is there any solution to this?
Do you have a tip for using a modern language instead of Dart?
Waiting....
Thank! how was it 🔥