The Flutter Coach

▶

▶ 978 ❤ 0 💬 0

▶️Full video on YouTube. To make an animated list in Flutter: 1. Create a GlobalKey called '_listState' that takes an AnimatedListState. 2. Create an integer called 'displayCount' and set it to the number of items you want the list to display on launch. 3. Create an AnimatedList widget, set its key to '_listKey', set its initialItemCount to 'displayCount', and set its itemBuilder to a function that takes context, index and animation and returns a widget of your choice for each item in the list. 4. Create two buttons; one which removes items from _listKey's currentState and one which adds items to _listKey's current state. For the full tutorial check out the full video, and for more Flutter tips, subscribe. #flutter #fluttertutorial #fluttertutorialforbeginners #animate #animation #animated #list #animatedlist #app #fluttercoach #thefluttercoach

▶

▶ 2.2K ❤ 0 💬 0

▶️ Full video on YouTube. To set up the AnimatedPositioned widget in Flutter: 1. Create a variable double called 'leftOffset'. 2. Create a Stack widget whose child is an AnimatedPositioned widget. 3. Set the AnimatedPositioned's left property to 'leftOffset', its duration to however long you want the animation to take, and its child to the widget you want to animate. 4. Use a setState function that changes the value of 'leftOffset'whenever you want to move the widget. For the full tutorial check out the full video, and for more Flutter tips, subscribe. #flutter #fluttertutorial #fluttertutorialforbeginners #animate #animation #animated #app #positioned #animatedpositioned #fluttercoach #thefluttercoach

▶

▶ 706 ❤ 0 💬 0

▶️Full video on YouTube. To set up the DecoratedBoxTransition widget in Flutter: 1. Create the DecoratedBoxTransition widget. 2. Set its 'decoration' property to a DecorationTween whose 'begin' property is a BoxDecoration that describes your widget's appearance at the beginning of the animation, and whose 'end' property is a BoxDecoration that describes your widget's appearance at the end of the animation. 3. Call the animate method on the DecorationTween and pass in an AnimationController (ensure the parent state class has a TickerProviderStateMixin so as to be able to set 'vsync' to 'this'), and if you wish call repeat on the AnimationController. 4. Set the child property of the DecoratedBoxTransition to a widget of your choice. For the full tutorial, check out the full video, and for more Flutter tips, subscribe. #flutter #fluttertutorial #fluttertutorialforbeginners #animation #flashy #animate #decoratedboxtransition #widget #fluttercoach #thefluttercoach