Flutter Coffee Animation

[@deepanshpahwa5530]

This is why I love flutter, my mans thought me something so amazing within 4mins, thanks man keep up the good work, love your videos

[@FlutterMapp]

looooooool 🤣🤣🤣 Yeah this is fast learning here on Flutter Mapp. Thank you very much Deepansh 🙏👏

[@OBLIVIOUSKARI]

As someone who knows both, id say without a doubt that flutter is easier to use, and gets the job done with a better user experience (Atleast for me). Although I am a huge react user and fan, flutter just gets it man

[@FlutterMapp]

Letsgooooo! Thanks for the comment! (We need to prove william that flutter is better 🤣🤣) (Related to the end of the video*)

[@subrotoxing8214]

react for web .. flutter for mobile...

[@OBLIVIOUSKARI]

@@subrotoxing8214 agreed

[@naqeebmaqsood2970]

Oh I love lottie animations they put life into the app, been using them from quite a while but animated cross fade made it even better 😍 Thank you Louis ❤️

[@FlutterMapp]

Hi Naqeeb! Thank you very much for the comment! Sorry for the late reply I just saw it! and yeah lottie is realllly nice 🙏

[@naqeebmaqsood2970]

@@FlutterMapp was waiting for you to respond 🤭

[@frostsmaker8966]

There is no need to prove, Flutter is absolutely the best cross-platform framework I have ever used. It is strongly typed language, and it is object-oriented.

[@frostsmaker8966]

I mean for dart language the strongly typed language part.

[@FlutterMapp]

🤣🔥🔥🔥. William dont think like this. We mush show willam that flutter is better 🤣🤣 (William context is at the end of the video*)

[@emerald8289]

Thank you so much for the content I can't express how much it's helping

[@FlutterMapp]

Pleasure, thanks a lot for the comment Emerald! 🔥🙏

[@md.ismailalamkhan]

it looks so nice, great video nman

[@FlutterMapp]

Thank you very much Ismail! 🔥🙏 It was mainly created by someone else but it was pretty cool yes! 🔥

[@abrarlasebai405]

I saw a post about this on LinkedIn, feel like I know about this before 🤣❤️ Amazing work 👏❤️

[@FlutterMapp]

Thank you very much Abrar! I really appreciate your comment! Sorry for the late reply, I just found you comment 🙏👏

[@twistbase]

Awesome video!

[@FlutterMapp]

Thank you very much Twistbase! 🚀

[@bustmak82]

you are my best Flutter Teacher

[@FlutterMapp]

Thank you very very much Nays! I appreciate it! 🙏👏

[@subrotoxing8214]

The closing message is unexpected ... I LOLed

[@FlutterMapp]

🤣🤣🤣 Unexpected things are often funny ⚡🙏

[@aliounesakho8582]

I saw this animation done with Swift on Instagram and i was ask myself how it can be done with flutter. Then i see your notification 1 Day after. Thanks a lot. Sorry for my english😭😂

[@FlutterMapp]

Letsgoooo! Thanks for the comment and your english is petty good, I can understand you! 🔥🔥🔥⚡

[@aliounesakho8582]

@@FlutterMapp thaaaanks

[@kevinmitnick1301]

@@FlutterMapp *pretty

[@thunderinvader9031]

Cool. How does Lottie impact on performance? Asking because there was some troubles on native android implementation

[@FlutterMapp]

To be honest, I have no idea 🤣🤣If you find documentation about it I would be interested to read about it tho 🔥🔥🔥

[@alejandroulatefallas3011]

The implementation of flutter Lottie probably uses a similar API as it's native peers so I would assume that if Android has some troubles then the flutter version on Android apps would be similar. Although I can't 100% confirm that 🥲 Really interesting question 🙌🏼

[@dhanitrianggara1772]

niceeee

[@FlutterMapp]

Thanks Dhani!

[@altamash1152]

I have purchased your course yesterday. And I have query related to the course , how would I ask you and where?

[@FlutterMapp]

Hi Altamash, you can ask on the website of the course, there is a comment section, OR you can DM me @FlutterMapp on twitter or instagram OR send an email at [e-mail] ⚡🔥🙏 I hope this help

[@falcon4359]

I cant find the coffee_green & coffee_brown json files, can someone help me

[@FlutterMapp]

humm, you can find the file in the original github 🙏

[@PaulKazo]

would be nice to see some tutorials with rive.app

[@FlutterMapp]

Mannnn!!! I was thinking about this the other day, I was making the video on rive and then at last minute, I change my mind for this video instead, I promise!🤣🙏⚡

[@abhishake5678]

Looks dope. Btw why u not using hooks?

[@FlutterMapp]

To be honest.... I have zero idea what is hooks 🤣🤣🤣🤣🤣

[@abhishake5678]

@@FlutterMapp it can completely replace stateful widgets. For ex u want to use animated controller, write useAnimatedController() inside build and it takes care of dispose too. U want a custom widget, useState(()=>{//init state code;return dispose})

[@abhishake5678]

useState takes a function (which acts as initstate) and returns a function (which acts as dispose) U are wayy smarter and experienced than me so getting used to should be quick

[@yunusyuruk9035]

Effect + music plase ?

[@FlutterMapp]

Effect: zoom out. Music: its all from epidemic sounds (you need to pay a subscription fee every month and then you can use the music in youtube videos). I hope this help 🔥

[@yunusyuruk9035]

@@FlutterMapp google play. Search for "Radyo Tiyatrosu" . orange mask.

[@ctvtechno4992]

Flutter is Batter than Ractnative.

[@anmolsharma9539]

Thanks for the video!! Where is your part of code I cannot find it.

[@FlutterMapp]

import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:lottie/lottie.dart'; class SplashScreen extends StatefulWidget { const SplashScreen({Key? key}) : super(key: key); @override State createState() => _SplashScreenState(); } class _SplashScreenState extends State with TickerProviderStateMixin { late AnimationController _coffeeController; bool isGreenCoffee = false; bool isTextReady = false; @override void initState() { super.initState(); _coffeeController = AnimationController(vsync: this); _coffeeController.addListener(() { if (_coffeeController.value > 0.7) { _coffeeController.stop(); isGreenCoffee = true; setState(() {}); Future.delayed(const Duration(seconds: 1), () { isTextReady = true; setState(() {}); }); } }); } @override void dispose() { super.dispose(); _coffeeController.dispose(); } @override Widget build(BuildContext context) { double height = MediaQuery.of(context).size.height; return Scaffold( backgroundColor: const Color(0xfff8dc9c), body: Stack( children: [ Visibility( visible: isGreenCoffee, child: const BottomPart(), ), AnimatedContainer( height: isGreenCoffee ? (height / 1.45) : height, duration: const Duration(seconds: 1), decoration: BoxDecoration( color: Colors.white, boxShadow: const [ BoxShadow( offset: Offset(3, 3), blurRadius: 10, spreadRadius: 2, color: Colors.black26, ) ], borderRadius: BorderRadius.only( bottomLeft: Radius.circular(isGreenCoffee ? 25.0 : 0.0), bottomRight: Radius.circular(isGreenCoffee ? 25.0 : 0.0), ), ), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ AnimatedCrossFade( firstChild: Lottie.asset( 'images/coffee_green.json', ), secondChild: Lottie.asset( 'images/coffee_brown.json', controller: _coffeeController, height: height / 2, onLoaded: (composition) { _coffeeController.duration = composition.duration; _coffeeController.forward(); }, ), crossFadeState: isGreenCoffee ? CrossFadeState.showFirst : CrossFadeState.showSecond, duration: const Duration(seconds: 2), ), Center( child: AnimatedOpacity( opacity: isTextReady ? 1 : 0, duration: const Duration(seconds: 1), child: Text( 'Coffee Cups', style: GoogleFonts.lobster( textStyle: const TextStyle( fontSize: 50.0, color: Color(0xff674335), fontWeight: FontWeight.bold, ), ), ), ), ), ], ), ), ], ), ); } } class BottomPart extends StatelessWidget { const BottomPart({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Align( alignment: Alignment.bottomCenter, child: Padding( padding: const EdgeInsets.symmetric(horizontal: 40.0), child: Column( mainAxisSize: MainAxisSize.min, children: [ const SizedBox(height: 30.0), ElevatedButton( onPressed: () {}, child: const Text( 'Login', style: TextStyle( fontSize: 20, ), ), style: ElevatedButton.styleFrom( minimumSize: const Size(220, 45), primary: const Color(0xff5db172), elevation: 10, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(25), )), ), const SizedBox(height: 15.0), ElevatedButton( onPressed: () {}, child: const Text( 'Register', style: TextStyle( color: Color(0xff674335), fontSize: 20, ), ), style: ElevatedButton.styleFrom( minimumSize: const Size(220, 45), primary: Colors.white, elevation: 10, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(25), )), ), const SizedBox(height: 80.0), ], ), ), ); } }

[@FlutterMapp]

here it is 🤣

[@anmolsharma9539]

@@FlutterMapp thanks , really appreciate your effort

[@joshuabumanlag396]

HIII!! IM BACKK!! I hope you still remember me! You still have good content as usual!

[@FlutterMapp]

Yooo Joshua! For sure I remember! How is going school? Have you finish yet?? ⚡⚡ Thanks also man!

[@joshuabumanlag396]

@@FlutterMapp I finished it already! With complete backend! Hope you're doin well

[@FlutterMapp]

Letsgoooooooo Congrats man!!! ⚡⚡⚡⚡

[@softcoder404]

Source code pls

[@FlutterMapp]

import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:lottie/lottie.dart'; class SplashScreen extends StatefulWidget { const SplashScreen({Key? key}) : super(key: key); @override State createState() => _SplashScreenState(); } class _SplashScreenState extends State with TickerProviderStateMixin { late AnimationController _coffeeController; bool isGreenCoffee = false; bool isTextReady = false; @override void initState() { super.initState(); _coffeeController = AnimationController(vsync: this); _coffeeController.addListener(() { if (_coffeeController.value > 0.7) { _coffeeController.stop(); isGreenCoffee = true; setState(() {}); Future.delayed(const Duration(seconds: 1), () { isTextReady = true; setState(() {}); }); } }); } @override void dispose() { super.dispose(); _coffeeController.dispose(); } @override Widget build(BuildContext context) { double height = MediaQuery.of(context).size.height; return Scaffold( backgroundColor: const Color(0xfff8dc9c), body: Stack( children: [ Visibility( visible: isGreenCoffee, child: const BottomPart(), ), AnimatedContainer( height: isGreenCoffee ? (height / 1.45) : height, duration: const Duration(seconds: 1), decoration: BoxDecoration( color: Colors.white, boxShadow: const [ BoxShadow( offset: Offset(3, 3), blurRadius: 10, spreadRadius: 2, color: Colors.black26, ) ], borderRadius: BorderRadius.only( bottomLeft: Radius.circular(isGreenCoffee ? 25.0 : 0.0), bottomRight: Radius.circular(isGreenCoffee ? 25.0 : 0.0), ), ), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ AnimatedCrossFade( firstChild: Lottie.asset( 'images/coffee_green.json', ), secondChild: Lottie.asset( 'images/coffee_brown.json', controller: _coffeeController, height: height / 2, onLoaded: (composition) { _coffeeController.duration = composition.duration; _coffeeController.forward(); }, ), crossFadeState: isGreenCoffee ? CrossFadeState.showFirst : CrossFadeState.showSecond, duration: const Duration(seconds: 2), ), Center( child: AnimatedOpacity( opacity: isTextReady ? 1 : 0, duration: const Duration(seconds: 1), child: Text( 'Coffee Cups', style: GoogleFonts.lobster( textStyle: const TextStyle( fontSize: 50.0, color: Color(0xff674335), fontWeight: FontWeight.bold, ), ), ), ), ), ], ), ), ], ), ); } } class BottomPart extends StatelessWidget { const BottomPart({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Align( alignment: Alignment.bottomCenter, child: Padding( padding: const EdgeInsets.symmetric(horizontal: 40.0), child: Column( mainAxisSize: MainAxisSize.min, children: [ const SizedBox(height: 30.0), ElevatedButton( onPressed: () {}, child: const Text( 'Login', style: TextStyle( fontSize: 20, ), ), style: ElevatedButton.styleFrom( minimumSize: const Size(220, 45), primary: const Color(0xff5db172), elevation: 10, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(25), )), ), const SizedBox(height: 15.0), ElevatedButton( onPressed: () {}, child: const Text( 'Register', style: TextStyle( color: Color(0xff674335), fontSize: 20, ), ), style: ElevatedButton.styleFrom( minimumSize: const Size(220, 45), primary: Colors.white, elevation: 10, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(25), )), ), const SizedBox(height: 80.0), ], ), ), ); } }

[@FlutterMapp]

Hope this help 🔥

[@claudeburbank180]

I want some coding beef :))

[@FlutterMapp]

With william? 🤣🤣🤣

[@mars3142]

It would be really impressive, if this would be done without any 3rd party package like Lottie - which is probably doable, if you know the SVG path.

[@FlutterMapp]

Yeah I think its possible, the channel I mention in the video actually did it with a pepsi animation, its crazy! Not sure if he posted only the video on linkedin tho... 🧠

[@rcjuancarlosuwu]

I thought It was made with custom painter :(

[@FlutterMapp]

Damn! Thats would have been crazy and very cool tho!! 🤣🤣 Thanks for the comment!

[@omzer97]

This is over engineering, you can have same behavior with less code using animated size widget

[@FlutterMapp]

I dont really use the animated size widget. I will have to check it out tho! 🔥 Thanks for the information, I always enjoy learning how to make things more simple ⚡⚡

[@omzer97]

@@FlutterMapp Great, let me know how it goes

[@namo1771]

I want to cooperate with U, how can I contact you, ..

[@FlutterMapp]

like this lol. just kidding add me on insta @fluttermapp and send me a message🔥🔥