Let's Build Flappy Bird Game in Flutter & Flame - Complete Tutorial

🔥 Dive into the world of game development with Flutter and Flame!
Join us on an epic journey as we unravel the secrets behind creating the iconic Flappy Bird game from scratch.
🕹️ In this step-by-step tutorial, discover how to harness the power of Flutter and Flame to craft your very own addictive gaming experience.
Want to explore the source code or grab the assets used in this tutorial? You can find the assets and source code used in this tutorial in the following repository.
Link: github.com/HeyFlutter-Public/...
Timeline:
0:00 Intro
0:21 Project Setup
1:54 Game Design
5:28 Adding Player
8:04 Adding Obstacles
12:11 Game Loop
15:36 Player Movements
18:14 Collisions
20:31 Overlays
26:35 Scoring
29:10 Sound Effects
31:22 Outro

[@HeyFlutter]

👉Source Code: github.com/HeyFlutter-Public/flappy_bird_game
👉Join 12 Week Flutter Training: heyflutter.com
👉Join the WhatsApp Channel to get the latest news about Flutter & HeyFlutter: whatsapp.com/channel/0029VaDNCZtC1Fu8nL2vmw3f

[@TariqKhan-be8dr]

Awesome, Looking forward to more tutorials on Flame. HeyFlutter as does a great job .😊

[@HeyFlutter]

Glad you liked it, @TariqKhan-be8dr 😀

[@ApratimArora]

🙏 Thank you. Keep giving creatively interactive apps and game development tutorials like this.

[@HeyFlutter]

You’re most welcome, @ApratimArora! 🙂

[@user-iy9ir8eb6u]

Thank you. This lecture is not considered free. And the code was really well written and the explanation was perfect. thank you. I will continue to learn well by watching many lectures. Even if paid lectures become available, I am willing to pay the full price. Thank you

[@HeyFlutter]

Glad to hear that, Thank you @user-iy9ir8eb6u! 😊

[@flutterlab]

Very informative, Covered every aspect that is necessary for every game. Thumbs up HeyFlutter 👍

[@HeyFlutter]

Thanks, @flutterlab! 🙂

[@mehdikazmi773]

This is really a helping tutorial - thank you and please keep uploading tutorials like these

[@HeyFlutter]

Glad you liked it, @mehdikazmi773 😀

[@nisafv.a8710]

Great tutorial. Thank you very much . Expecting more game tutorials ❤

[@HeyFlutter]

Thank you for your feedback, Glad you liked it!

[@d-apps2699]

Amazing video! One thing that I really want to see is a platform game like making one stage of super mario bros, how to create the map, spawing enemies etc..

[@HeyFlutter]

Thanks for the idea, @d-apps2699! 🙂 I have added it to my list of ideas for future videos!

[@d-apps2699]

Thanks a lot!@@HeyFlutter

[@himcoding4278]

Excellent 👌 We need more video tutorials like this.

[@HeyFlutter]

Glad you liked it, @himcoding4278 😀

[@pravinprince3221]

Thank you so much for the wonderful video, it is so useful for me and my team, thanks again

[@HeyFlutter]

Glad to hear that, Thank you @pravinprince3221! 😊

[@developerbs]

Thank you so much for very nice tutorial.

[@HeyFlutter]

Thank you for watching this video, Glad you liked it

[@tronzard]

22:30 I didnt get the image but only a white screen when reloading at this point.

[@HeyFlutter]

Thank you @tronzard, make sure to follow the tutorial step by step 🙂

[@brokercl]

great tutorial, many thanks

[@HeyFlutter]

You’re most welcome, @brokercl! 🙂

[@manishmg3994]

Great , Need More videos on Flame

[@HeyFlutter]

Glad you liked it, @manishmg3994 😀

[@ashikulislamdev]

can you please clarify me when should we write full path and when should short?
It's(path) based on flame doc i understand,
static const birdDownFlip = 'bird_downflap.png';
why you add full path here?
static const gameOver = 'assets/images/gameover.png';

[@HeyFlutter]

Thank You @ashikulislamdev! Follow this link: stackoverflow.com/questions/52353764/how-do-i-get-the-assets-file-path-in-flutter
I hope you will get your answer 🙂

[@ashikulislamdev]

@@HeyFlutter I got the answer when I was working with assets file path. Thanks

[@VoterTV]

could you please provide assets so that it will allow us to code along with your class?

[@HeyFlutter]

Thank you for watching this video, You can find the assets and source code used in this tutorial in the following repository.
Link: github.com/HeyFlutter-Public/flappy_bird_game.git

[@shahzebnaqvi]

Great Explaination

[@HeyFlutter]

Thank you @shahzebnaqvi, Glad you liked it 🙂.

[@cakecherry8430]

very nice

[@HeyFlutter]

Thanks, @cakecherry8430! 🙂

[@Ramzy-gk5bb]

Great game in flutter but how about the high score can u add it in the game

[@HeyFlutter]

Thank you for watching the video, Yes, We can add the leaderboard system within our game and for that we can use local database to store our high score and them make it persistent with in the game.
For local databases, checkout Shared Preferences: pub.dev/packages/shared_preferences, and Hive: pub.dev/packages/hive

[@vancedvance3355]

why am i gettting error in in the pipe.dart file , when setting sprie , There isn't a setter named 'sprite' in class 'SpriteGroupComponent'.
Try correcting the name to reference an existing setter, or declare the setter. this is the error

[@HeyFlutter]

Follow the tutorial, You must have done something wrong. Thank you for watching this video

[@codingforfoodace8361]

Excellent! You never disappoint, really.

[@HeyFlutter]

Thank you @codingforfoodace8361, Glad you liked it.@UCCJ-n9Aka81Ay_DXb4GhZGg

[@michaelolusegun4609]

I am on the latest Flutter version and the Timer Syntax is used in this video is deprecated

[@HeyFlutter]

Thank You @michaelolusegun4609! Follow this link: api.flutter.dev/flutter/dart-async/Timer-class.html
I hope you will get your answer 🙂

[@mandar_khandagale]

My Pipes are not loading on screen. I have checked twice everything is fine. Still cant able to load pipes

[@HeyFlutter]

Thank you, @mandarkhandagale6754! 🙂. Please try to provide enough details with your question

[@mandar_khandagale]

@@HeyFlutter Thanks for the reply i figure out my error

[@TheMrszantaz]

reset vs code everytime you add new images

[@_farooq_zahid]

Samaj tou nahi ayi but maza aya 👀

[@HeyFlutter]

Thank you for your feedback, Glad you liked it.

[@_farooq_zahid]

@@HeyFlutter I was just kidding 😉

[@ashbhardwaj4995]

First comment ❤

[@phongtranquoc7557]

i still dont understand the logic of the collision part can u kindly explain it to me again?

[@HeyFlutter]

Thank you for watching this video, You can take a look at the source code used in this tutorial in the following repository to understand the logic better.
Link: github.com/HeyFlutter-Public/flappy_bird_game.git

[@brokercl]

where assets are

[@HeyFlutter]

Thank you for watching this video, You can find the assets and source code used in this tutorial in the following repository.
Link: github.com/HeyFlutter-Public/flappy_bird_game.git

[@dayernGomez]

Hi @HeyFlutter ,
I love your tutorial , i am starting whith flame and i will like to make a Spanish version on my channel [ www.youtube.com/@neryad ] and give you full credit with links to your original video and repo.
Any specific conditions or preferences you have for me to use your content?
Thanks in advance for your response!

[@dayernGomez]

i wanna know if i can make a spanihs version, is your like a yes? jeje

[@user-jy8yh2om8z]

ى تلنفه٣ح٣

[@HeyFlutter]

Thank you, @user-jy8yh2om8z! 🙂

[@akashvanionwards912]

Meanwhile I created Flappy bird in desmos (graphing calculator) 💀💀💀💀💀💀💀

[@HeyFlutter]

Great, Thank you @akashvanionwards912!

[@seamensclubltd7603]

Thanks! Cool!
But there was found bag)) on every 10th or 20th times of restart after game over the bird.reseted but not removed the screen and not started the game. Needs to press reset again) /
void onRestart() {
game.bird.reset();
game.overlays.remove('gameOver');
game.resumeEngine();
}

[@HeyFlutter]

Thank you, @seamensclubltd7603! 🙂. Please try to provide enough details with your question

[@seamensclubltd7603]

@@HeyFlutter start your app, press restart game after bird grounds and let grounds 20 times and within these times you have found bag when the bird reset position but not start game ((