Top 30 Flutter Tips and Tricks

top 30 flutter tips and tricks 30 introduction screen if you want a list like this you can use the introduction screen it is simple you start with the introduction screen the done the undone argument and the pages the pages is a list of page view model 29 rich text you want to have different style inside your text use the rich text you have a text pan inside this text pane you have the children and all the text band with different style 28 flexible you want to have different ratio inside your screen you can use the flexible widget inside you can use the flex factor in order to change all the ratio but what if you would like this widget to take all the remaining place we can use the expanded so you just replace the flexible with the expanded and if you have another expanded you can use the flex argument in order to change the ratio of the application 26 the circle avatar you can use the circle avatar over your image in order to have a circle you use the radius to change the size and the background color to change the background 25 wrap sometime you have a row with too many children you can use the wrap instead and it will look like this 24 fitted box will you like to have a children that fit his parent for this you can use the fitted box 23 splash screen every application have one and you can use the flutter native splash to do it you add the color to image in your pop spec you run this comment and then you have your splash screen 22 snack bar it looks like this and if you want to use it you can use the scaffold.of context that shows snack bar and you use the snack bar widget with a certain duration if you want 21 visibility if you want any widget to disappear or reappear you can wrap it with the visibility widget you just set the visible argument then you define true or false 20. spread operator if you want to add a list of widget inside a column you could use another column but there is something easier it's just the spread operator 19 statubor color for android you can change it by using the system ui overlay style and use the status bar color you can also change the navigation bar color by using the system navigation bar color and if you want you can also put them both transparent 17 buddy behind app bar if you want your widget to appear behind the app bar you can use the extend body behind a bar as true 16 save area if you don't have any app bar all your widget will go behind the status bar to solve this you can use the safe area 15 clip rack if you want any widget to have circular border radius you can use the clip or wrecked but if you are with a container it is preferable to use the border radius inside decoration 14 sliver up bar you can see the difference between the normal and the sliver up bar for this you use the custom scroll view and the sliver bar when you scroll down the app bar will disappear and will come back when you reach the top you can also put the floating argument as true this will bring back the app bar every time you scroll up 13 future builder when you press the button you have a loading and then the information you can use the future builder with a future this feature will return a list of string in this case and you can use the snapshot in order to find if the loading is done if we are waiting we can show the circular progress indicator otherwise we will return the values once again when we click on this button we have a waiting screen and then it will return the value with the snapchat 12 coportino widgets if you want the loading screen to be more like ios you can use instead the copper tino activity indicator copper tino is for ios but how to know if it is an android or a ios device you can use the platform checking which you can call by saying platform dot is android by example number 10 media query you can find the height and the width of any device with the media query that of context dot size if we turn the screen the height and the width will change nine google fonts this is a plugin that you can add to your app you just need to change the style of a text by calling google fonts dot something and you will be able to access any fonts in your app this is the catalog eight selectable text if you want your text to be selectable what you will need to do is replace text by selectable text number 7 the hero this will allow the users is focus to never be broken you can use the e-row just by wrapping any image with the hero widget and add a tag 6 animated icon for this you will need to use an icon button and inside you will have the animated icon you have a controller that will set the duration of the animation and a trigger that will forward or reverse the animation of the animated icon and it look just like this 5 animated container if you want to animated container inside your application you replace the container by an animated icon and now every time that something inside the animated container change it will be automatically animated by the animated container and it look just like this for null aware operator let's say you want to display a value that is not null it will work but if the value is null the application will have the red screen but you can put a default value with the null aware operator three lint when you use this plugin you will need to create rules inside the analysis option.yam and after it will show you all the best practices to build your app 2 the launcher icon you can put any image with the plugin flutter launcher icon you add the image and you run this comment then you will have a launcher icon number one the interactive viewer you can zoom on any element of your app by wrapping the widget with the interactive viewer

Channel: Flutter Mapp

Views: 240,661

Keywords: flutter tips, flutter tips and tricks, flutter, flutter tricks, flutter tutorial, flutter development tips, Flutter tricks, Flutter tips and tricks, Flutter Tips and Tricks, flutter Tips, Flutter tips, Flutter tips and Tricks, flutter code tips, flutter tips 2021, flutter tips and tricks 2021, flutter tricks 2021, dart tips and tricks, tips flutter, flutter for beginners, flutter mapp, tips and tricks flutter mapp, flutter widgets, flutter app, flutter app development, dart

Id: 5vDq5DXXxss

Length: 6min 49sec (409 seconds)

Published: Sun Jun 06 2021

Reddit Comments

[u/fluttermapp]

1. Status Bar Color (Android)

2. Navigation Bar Color (Android)

3. Body behind App Bar

4. Safe Area

5. ClipRRect

6. Sliver App Bar

7. Future Builder

8. Cupertino Activity Indicator

9. Platform Checking

10. Media Query

11. Google Fonts

... Bored again

[u/imfunking]

No BS, Straight to the content. Nice video bud!

[u/fluttermapp]

All the Flutter Tips and Tricks in this Video :
30. Introduction Screen
29. Rich Text
28. Flexible
27. Expanded
26. Circle Avatar
25. Wrap
24. Fitted Box
23. Splash Screen
22. Snack Bar
21. Visibility
20. Spread Operator
19. Bored to do this... Will finish the list one day... Or if someone is down ⚡

[u/Pismice]

Perfect video fast and really easy to understand (pas mal l accent français Mdr)

[u/amiculous]

I like this. But it would be a lot more helpful, imo, if there was a link to relevant docs for each item. There is already a timestamp list there. Since it looks like this is still in progress, it could make sense to add it there?

[u/Abdallah-al-hallak]

Thanks, bro, keep going like these tips, please