Top 70 Flutter Tips, Widgets & Packages

in this example we add the list of y into the list of x but did you know that you could use the spread collections instead and it will add the list of y inside the list of x this is the video player package and it will allow you to add videos inside your app and how do we use it first you will need to create a controller called the video player controller and then you will use the video player with the controller inside the ndx set stack when i click on buttons i will change the index of this stack and then it will display a different image you can do this for any widget you can add a filter inside your app for any image for this you will need to use the color filter red and inside you will have the color filter that mode you can change the color and you can change the blend mode the child is the image instead of using multiple column in row in order to create a table like this you can use the data table widget inside you have the columns which is all the errors and then you have the rows that is all the data inside this is a placeholder for this image and how do we do this with the fade in image widget dot asset network we have the placeholder which is a gif and we have the image that is from the internet you can put the fade out duration to have a certain duration how can we reorder items inside a list for this you can use the reorderable list view for this you have the children that have a list of listal you have the unreorder that will have a logic in order to remove the old index and insert the new index this is three different animation inside our app as you can see this is the bloody package and the first one is the luddi.asset that will have a controller and will stop after the first animation the second one is also an asset but will always continue and the last one is from the network the zoom navigation drawer package it is very cool and you can use it by calling the zoom drawer widget inside you have the menu screen and the main screen this is the main screen and this is the menu screen you want a shortcut in order to call the init state or the dispose then use the awesome flutter snippet extension they have a multiple of shortcuts you don't want to go over this in order to see the error then you can use the error lens this will show you what is your error this is the extension if you want something more ios then you can use the copperdino action sheet you have the title the message and then the actions which are the copertino action sheet actions and then it will look just like this if you want to trigger something when the user scroll inside the application you can use the notification listener as you can see we are writing scroll update and when the user stop it is scroll end and this is controlled by the notification listener that have the on notification that return the scroll notification and then you are able to know if it is a star scroll update scroll or a end scroll finally you just need to add all your widget inside the child this is a normal image and this is an image wrapped with the clip at widget and as you can see we have the clip path widget we have the clipper that switch when i click on the image and then i created a class called clip pad class that extend the custom clipper this is a blur container with a text inside and we use the backdrop filter for this inside you have the filter we use the imagefilter.blur with the sigma x and y and then you have your container in the child this is an image that will fade in and fade out forever how did we create this one with the fade transition inside we have the opacity that is an animation that will repeat and we have the child which is the image this is the qr flutter package you can create the qr image widget that have the data and then the size of the qr code you can scan this one and you will see it is this value what is the way clock package it will allow you to enable the wake lock which mean this screen will never turn off and you can activate the wake lock by using weight clock.enable or you can disable it with the way clock.disable sometimes you want to display a widget only if the value is true and otherwise you will display an empty container but did you know that you could use the conditional if expression instead so you could say if the value is true then display the text widget if you want to have colorful bracket like this inside your code then you could go inside the extension and use the bracket pair colorizer too did you know that you could add a nap bar like this inside your app and it is very easy you go inside your app bar you add the bottom argument and then you add the tab bar you have all your tabs inside and then inside your buddy you will use the tab bar view and you add all your children if you want to edit an image by example blur it rotate it or deform the image you could use the image filter it for the first one i use the imagefilter.blur for the second one i use the matrix for that rotation z and for the last one i use the float64list.from list in order to deform the image if you want a search bar like this inside your app you could use the show search and then you just have to create a custom search delegate and this is a simple class that will extend the search delegate if you have a flow of data that come through your app which we call a stream you could use the stream builder you add your listen to the stream inside and then you have all the snapchat of your data if you want to display information when the user click on a certain widget you could wrap this widget with the tooltip and give this tooltip a message this is a button and when i click on this one nothing happen this is because we use the absorb pointer that will absorb the click it is very practical if you want to block a click on something okay this is important if you want to sell physical product inside your application you need to use the in-app payment plugin that's mean you can use square or stripe in order to make your sales but if you want to sell digital product by example coin in order to upgrade your character then you need absolutely to pass by google and apple with the in-app purchase plugin maybe you want to print every name inside a list instead of saying for each calling the lambda function and then print every name you could use just the theraph that's mean you use the names that for each and you only call print it will do just the same this is an image and a text over it how to do that with flutter you just need to use the stack widget it is like a column but they will stack one over the other first we have the image and then the text over it this is a stack of three positioned widget what the positioned widget do it allow you to position your widget everywhere you want so by example we use it for the first one at 30 from the top and 30 from the left but the last one we use 120 from the top and 100 from the left this blue square is inside an animated builder what it does it will transform and rotate this square and it is controlled by the animation controller this is a card with a text inside but what if you would like to have your card a certain width and a certain height you could use this sized box for this and as you can see you will have the width and the height i wrapped the text and the rocket with the screenshot package when i click on screenshot it will then suggest to save the image and if we go inside our image we will see the text and the rocket it is a very cool package the next three tips are from robert and i will link his channel at the end of this video this is what we call a model bottom sheet and you can get one by using the function show model bottom sheet and then you have the context and the builder that will return everything that is inside the model bottom sheet this is the animation package and it is pretty cool let's first activate the slow animation just to show you how it worked and this is how to transition between pages as you can see we can transition by the x axis or we can go with the y axis it is a different transition you have multiple other transition inside this to create any form inside your app you can use the custom paint widget and inside you just need to add a painter and the child for this app we have wrapped the custom pane with an animated builder in order to make it look like this i found this project online and i will try to add the link in the description if you want to animate a logo like this you can use the rotation transition you have the turn that is a curved animation and then you just put the child which is the logo this is the record package it will allow you to record pause the recording play it back and then stop it in order to listen to it you can also delete the recording it is more than 300 line of code so i will not show you how to do it this shatter mask will allow you to create a text like this you just need to return a radial gradient you add your two colors and then you have the tile mode i have used the mirror if you want to display a loading screen for your user then you can use the linear progress indicator widget if you want to add the dollar sign inside a string you could use the backslash but did you know that you could use the air before in order to make it a raw string this is an animated list you can add items from anywhere and then you can delete any items with the remove button first you need to have the add button and the remove button then you can add the animated list and then you have the key the initial item count and the item builder this is a container that have 150 of height if you want to add a text inside you will see that the container will remain the same height but what if you would like the container to be adjustable then for this you could use instead the limited box and as you can see it will fit the size of the text but if you remove the text once again you will see that the height will be at 150. to create an animation when switching element inside an app you could use the animated switcher then you need to have a duration a transition builder and then a child by example the text that will switch and animate everything to align this flutter logo at the bottom left we have used the align widget with the alignment to the bottom left but you could use the top right and the flutter logo will be on top right if you want to have better icons inside your app you could use the font awesome flutter package and then you just need to add the fey icon and the font awesome icon that any icon that you want you can also find in the description the catalog of all icons if you want you can also use the animated text kit package in order to have different text style this is an animated widget it is very easy to do you just create the constructor an animation and then you will create a build that will return the transform.scale that have inside the progress of the animation this entire widget is a checkbox style and you can create one by using the checkbox list style the title the value the unchanged and the secondary and as you can see the time dilation is only a scheduler and you can do the same thing with the switch list style it is very easy you use the switch the style the title value on change and the secondary this is an expansion panel list you can create one with the expansion panel list widget you can add the expansion callback the action inside and the children for the expansion panel list which will be a list of expansion panel animations are very nice to do with flutter this one is called the animated positioned and when you change the width the height or the top of this animated position head you will see that flutter will animate the change automatically this is a button inside a 200x200 container but what if you would like to have this button to have 25 of the height and 50 of the width of this container you could wrap it inside a fractionally sized box and it will do just that this is not a bottom it is a yellow container but how can we trigger something out of it it is simple we just wrap the container with a gesture detector and then you can have the untapped argument with your function inside this is a drawer and you can add one inside flutter by using the drawer argument and the drawer widget inside your scaffold and then you have the child which is a list view you can create slideable in order to have actions inside by example delete or you could also share something it is very easy you use the action in order to have the left side of the slideable and then you use the secondary action to have what is on the right this is a text inside a rotated box and what you can do is change the quarter turn in order to rotate the text or any widget as you can see when we scroll down we have the little bar on the side and this one is called the scroll bar widget you can wrap any widget with it and you will have the scroll bar on the side it is very practical for every web development you want the user to sign something in your app then use this signature package it is very cool and very easy to use this is a coding tips if you want to declare three variables that have the same type you can separate them with the comma instead and it will do just the same this is a blue box with zero padding let's change this by adding 100 padding everywhere but how did we add the animation it's simple you just wrap the blue box with the animated padding then you add the padding that change the value and then you have the duration this is a simple image that asset but we can make it fade to disappear it's simple you just wrap the image with the animated opacity you add an opacity level and then you add the duration and that's it you got yourself the image fade this is a button inside a 100 by 100 black container do you think it is possible to make the button go outside of the container yes you can with the overflow box and it looked just like this and you can see that the bottom is inside the box but outside also if the user don't have an internet connection maybe you would like to display something else in the screen and this is the connectivity plus package as you can see when i remove my wifi now the connectivity result is none dismissable it will allow you to remove any item inside a list first you call the dismissible widget you add the child the background color which will be red for this one then you have the key and you have the on this message which have the item that we move at from the index this is the device info package and it will allow you to have all the information from the device have you ever wanted to drag something inside your app for this you can use the draggable widget in this example we will drag what we call int and every value will be 10 so as you can see if i drag it the value 10 has been registered and it will be add every time okay now we have the child which is the blue box we have also the feedback which is the green box and we have the child when dragging which is the arrange box in the behind now we know how to drag something but the question is how do we receive the information it is very easy for this you will use the drag target you will create the builder and then you have the return which is the black box with the score inside and then when you accept the data you will set the score if you want to create a game with flutter then you can use the bonfire packy it will allow you to create games just like this one [Music] may i hold you one last time let me [Music]

Channel: Flutter Mapp

Views: 84,220

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: hDVZykwl13I

Length: 16min 22sec (982 seconds)

Published: Fri Jul 23 2021