Flutter Project: Scrum Poker App

Welcome to my story, how I created a Flutter Scrum Poker App with flutter in one day. With this article, I want to show you how simple it can be to create a flutter app. My challenge was to create a minimal app in a short time.

First, I want to start by creating a clear picture of what we want to achieve. I work currently on a Scrum Team, we always have to carry around our cards for sprint poker. These cards are old, dirty and very often used from a lot of teams and so I decided to change that with an app, once and for all.

Scrum Poker App

If you have never worked in a Scrum Team before, you maybe never heard the term Scrum Poker. To explain the whole idea, would probably be too much for that story, but if you are interested Ravindra Prasad wrote an excellent article about that topic.

It is like real poker, but everyone has the same cards.

via GIPHY

Visual guidance

For me, it is always helpful in my projects to have visual guidance like a prototype. This prototype can be a drawing on a paper or a fully-fledged prototype. For this article, I created a quick prototype in Adobe XD just to show you how it can look like and to give myself visual support.

With that, we have a prototype and now we know what we want to create. Now we are ready for development. First of all, we have to create a new project with Flutter. On the Flutter Website, there are more information on how to set up your environment. I will use for this story Android Studio with the Flutter and Dart plugin.

Restructure our boilerplate

After the setup of the flutter project, let us start with removing all the comments that we do not need. I separate the Home Page from the main file so that we have a better feeling for our application. With that, we bring a bit more order in the project boilerplate. In our main file, this is what should remain.

In the “myHomePage.dart” you will find the Stateful “MyHomePage” Widget that is initialized with the flutter project.

And the following image should be the folder structure

Our HomePage

For our first shot, we want to use the existing Scaffold of the HomePage. This contains our scrum cards and a Flutter GridView. The GridView gives us the option to align multiple items in a grid. The count constructor of the GridView provides us, with the out-of-the-box functionality, to create our Grid with Cards.

First, we initialize a variable “Fibonacci” so that we can contain the numbers in an array. If you take a closer look into the children of the count constructor of the GridView you can see the “for Loop”. Is this not great? We can loop inside the children array to map our Fibonacci array to placeholders.

Great, the Grid looks already very promising. Did you see how the Placeholder widget is handy in this part? With that in place, we do not have to create anything for the card just yet. However, the result is already evident. The Placeholders help us to structure already our app without actually implementing something.

The Cards

Now that we have the basic structure in place, we have to think about how we want to display our Cards. Thankfully Flutter provides already something for us. The Card Widget will help us to create excellent visualization of the cards with Text inserted. Because the cards will not change, we can create a stateless widget for it with an icon or a number. For now, it will live in the “MyHomePage”.

Gestures

Now it is time to control our behaviour of the app. When we tap a card, it should remove the widgets from the tree and replace it with a single card widget. That, however, changes the state of the “MyHomePage” Widget.

To achieve that tap behaviour, we first have to surround our Card element with a GestureController. After that, we have to specify the onTap event inside of the card.

This will now print every click on a card in a separate line in the console.

Downtime

via GIPHY

Alright, we made it very far already. So let’s take a break and recap shortly, what we created already.

  • a Design for our Scrum Card App
  • a HomePage
  • a ScrumCard widget
  • Gestures and tapping event

The next thing that we need to do is to change the state of our app, after a tap. Whenever a card is tapped we want to replace the Body from the HomePage with a Big ScrumCard Widget.

Now comes the tough part so. Therefore make yourself ready, take a deep breath and then let’s get into it!

via GIPHY

State Management

There are two different kinds of Widgets in Flutter.

  1. Stateless Widgets
  2. Stateful Widgets

The stateless widget is a widget that will always be shown according to its initial values. During its lifetime the initial values can not change. The stateful widget, on the other hand, contains a real state and if you change the state the widget will be re-rendered. If you want to read more about the different types of widgets feel free to take a look at the article by Deepak K.

Now we have to first time handle the state of our widgets. When we click the button the state of the “Grid Widget” should change to a big “Card Widget”. This tells us that we have at least two different states in our app. To keep track of these states we have to change our current “Stateless” Widget to a “Stateful” Widget. The easiest way is to click on Stateless Widget and use the IDE function to change the Stateless Widget to a Stateful Widget.

Because the new Widget is now stateful, we can change its value and the “build” method can react to these different states.

We want to track the information of the Icon that we want to show or the Text that is visible on the card so we need that to a state. I call that variables “singleCardText” and “singleCardIcon”. Additionally, I want to have a boolean that knows if I have to show the Main Page with all Cards or just the Single Big Card.

Be careful at that point, I made here a big mistake and put all these variables in the build method. The build method gets called multiple times and whenever it gets called it overwrites the values again.

Of course, that sounds trivial but cost me 1 hour of my lifetime.

The Exchange

Now we want to swap the widgets based on the “isHomePage” value. Therefore we can use one of Flutter skills. We surround our GridView.count constructor with an ternary operator. That checks our isHomePage and add the respective Widget to the Container.

If you get confused by the “?” and the “:” in the code I can recommend you to read an article about “Ternary Operator” from Deven Joshi. With that in place, we have the opportunity to change the “isHomePage” to false and it would show us only the Padding (and whatever is there inside) or we keep it on true, and it will show us the GridView. Therefore we need the “setState” method. It will allow us very easy to change the current state of the widget.

Great so far. Now instead of the tap where we just print something in the console, we want to execute the “switchToCard” method. But how? The method has to live in the _HomePageState and the ScrumCard has no access to that state? Alright then, let me explain it to you because there is a fairly simple solution to that problem. We just pass our function into the ScrumCard Widget. And whenever the user taps now on the card we call that method and “notify” our parent widget.

If you take a brief look into the code snippets you can see that the ScrumCard calls the notifyParent method, which in fact is the switchToCard method. This should help us now to transform from a grid with multiple scrum cards, to a single big one and Vice Versa. Now there is only one step left, we have to create a beautiful Card UI that will be generated when the isHomePage is false.

As you most likely already discovered I added here another function for notifyParent so that we can swap back to the HomePage.

Now the switch of card and grid should work already. To improve our app even more we can use the “ AnimatedSwitcher”. I found this amazing video from the flutter team and that is a perfect use case. The AnimatedSwitcher, as you maybe have already guessed, helps us to swap two widgets with each other. It adds a smooth transition between these two and this looks much more friendly. You just have to put your ternary operator in between as a child and give it a Duration how long the transition should take.

Ok, so let’s run our simulator or emulator and take a look how the app looks now.

Conclusion and What’s next

This is now an app that already solves one important problem in software engineering. From now on I do not have any more to carry real cards from one room to another. Never again I will have to grab old smelly cards and show them to my Product Owner. We do not want to know which liquids touched those filthy cards…

This is of course just the beginning. With the knowledge that we got during this session, we can do much more. This app shows how easy it is with flutter to create a nice fully functional app.

Now it is your turn. My challenge for you till my next article is, to create this app or fork my repository from GitHub and extend this app by a small additional functionality. To give you some examples that you could add,

  • Make it possible to change from Fibonacci numbers to other Scrum Poker numbers
  • Create a history of the selected cards
  • Make a custom Animation between the transitions

And if you are finished spread the word and let everyone know how cool Flutter and our community is! I am already curious to see all the beautiful results. If you have any feedback let me know and if you are interested in other cool articles, feel free to follow me on Twitter or take a look into my GitHub Repository.

Max Weber

A passionate Software Engineer for more than six years in different industries. He worked as a consultant for multiple enterprise companies in Europe such as Swisscom, Diligent and Deutsche Telekom. In 2020 he founded Flutter Explained a Tutorial Channel on YouTube where he explains everything around Flutter Development.

This Post Has 166 Comments

  1. hcos

    is chloroquine phosphate over the counter bnf nice chloroquine side effect

  2. Randyavaky

    cialis 5mg tablets [url=https://cialiswebpills.us]cialis free shipping[/url] cialis 20mg sale
    40mg cialis tadalafil cost cialis tablets

  3. MatthewFlake

    sildenafil pills uk [url=https://viagrapillsweb.us]20 mg sildenafil[/url] who makes viagra
    female viagra sildenafil recall sildenafil for women

  4. Patricia Woodman

    I’ve been browsing online more than 3 hours these days, but I by no means discovered any attention-grabbing article like yours. It is beautiful price enough for me. In my view, if all website owners and bloggers made excellent content material as you did, the web will likely be a lot more helpful than ever before.

  5. Kory Sapp

    Hey there would you mind letting me know
    which hosting company you’re utilizing? I’ve loaded your blog in 3 completely different
    web browsers and I must say this blog loads a lot faster then most.
    Can you suggest a good internet hosting provider at a fair price?
    Many thanks, I appreciate it!

  6. Kirk Lim

    It’s appropriate time to make some plans for the future
    and it is time to be happy. I have read this post
    and if I could I want to suggest you some interesting things or advice.

    Perhaps you could write next articles referring to this article.
    I want to read even more things about it!

  7. JoshuaPoolo

    cialis canada generic [url=https://cialis739.us]tadalafil generic cost[/url] viagra or cialis
    cialis india paypal cialis online cialis 10mg cost

  8. Kelvin Borin

    cialis com coupons viagra or cialis purchasing cialis

  9. Duncanboult

    cialis dosages available [url=https://cialis741.us]cialis 50mg pills[/url] prescription for cialis
    cialis 600 mg walmart cialis pharmacy cialis tablets generic

  10. JosephFom

    sildenafil rx [url=https://viagra739.us]viagra pricing[/url] womens viagra pill
    200mg viagra sildenafil otc vardenafil vs sildenafil

  11. Monique Vasquez

    Hi there! This blog post couldn’t be written much better!
    Reading through this article reminds me of my previous roommate!

    He constantly kept preaching about this. I will forward this article
    to him. Fairly certain he’ll have a great read. Thanks for sharing!

  12. Theodora Suggs

    Can you tell us more about this? I’d like to find out more details.

  13. Jessieenari

    viagra prank [url=https://viagra741.us]viagra costs[/url] sildenafil 50mg uk
    viagra generics price fucking on viagra generic viagra walmart

  14. Laurie Sierra

    I’ve been surfing online more than 4 hours today, yet I never found any interesting article like yours.
    It’s pretty worth enough for me. Personally, if all site owners and bloggers made good content
    as you did, the web will be much more useful than ever before.

  15. JacobMar

    gabapentin controlled substance [url=https://gabapentin19.us]snorting gabapentin[/url] gabapentin overdose
    snorting gabapentin neurontin for anxiety neurontin dosage

  16. Richardwhero

    tadalafil citrate bodybuilding [url=https://cialis742.us]cialis not working[/url] cialis from australia
    cialis soft pills cialis viagra cialis coupon 2019

  17. JosepheroTo

    levitra no prescription [url=https://levitra742.us]levitra nz[/url] buy levitra online
    levitra from canada levitra information generic vardenafil uk

  18. JamesFug

    sildenafil 200mg price [url=https://viagra742.us]extra super viagra[/url] online viagra pills
    sildenafil 50mg tablets sildenafil tabs 50mg generic sildenafil 100mg

  19. Peggy Acker

    Thank you for the auspicious writeup. It in fact was
    a amusement account it. Look advanced to more added agreeable from you!
    By the way, how could we communicate?

  20. Willie Nienaber

    I’ve been browsing on-line greater than 3 hours today, but I by no means found any fascinating article like yours.

    It’s pretty worth sufficient for me. Personally, if all site owners and bloggers made excellent
    content as you probably did, the net will
    be a lot more useful than ever before.

  21. Michael Sinclair

    levitra medication levitra 10mg uk levitra mexico

  22. Tiffany Turski

    It’s appropriate time to make a few plans for the future and it is time to be happy.

    I’ve read this post and if I may I desire to counsel you some attention-grabbing things or advice.
    Maybe you could write subsequent articles regarding this article.
    I wish to read more things about it!

  23. Sandra Perry

    free viagra mexican viagra viagra alternatives

  24. Patricia Stiglich

    Ahaa, its pleasant dialogue regarding this piece of
    writing here at this website, I have read all that, so now me
    also commenting here.

  25. Davidbrare

    norvasc [url=https://amlodipine20.us]amlodipine side effects[/url] amlodipine 5 mg
    amlodipine besylate 10mg norvasc generic norvasc

  26. Elizabeth Morales

    I am sure this article has touched all the internet users, its really really
    good piece of writing on building up new weblog.

  27. ThomasWat

    lipitor generic name [url=https://atorvastatin20.us]lipitor lawsuit[/url] lipitor interactions
    atorvastatin calcium 20mg atorvastatin classification atorvastatin generic names

  28. Jessica Wells

    I have been browsing online more than 3 hours today, yet I never found any interesting
    article like yours. It’s pretty worth enough for me.
    Personally, if all site owners and bloggers made good content as you did, the internet will be
    much more useful than ever before.

  29. Melissa Cobb

    metoprolol dosage metoprolol xl metoprolol tart

  30. Jameselush

    losartan hctz recall [url=https://losartan20.us]losartan 100 mg[/url] losartan dosage
    losartan potassium losartan and alcohol losartan hctz recall

  31. Bennie Jordan

    Thanks for enabling me to achieve new strategies about pc’s. I also have the belief that one of the best ways to keep your laptop in perfect condition has been a hard plastic material case, or perhaps shell, that fits over the top of one’s computer. These types of protective gear will be model targeted since they are made to fit perfectly over the natural covering. You can buy all of them directly from the vendor, or via third party places if they are readily available for your laptop, however not all laptop will have a spend on the market. Once again, thanks for your guidelines.

  32. FidelSog

    meloxicam warnings [url=https://meloxicam20.us]meloxicam 10[/url] meloxicam medication
    interactions for meloxicam what is meloxicam meloxicam for cats

  33. Dorothy Perozo

    It’s the best time to make some plans for the future and it’s time to
    be happy. I have read this post and if I could I want to suggest you few interesting things or tips.

    Perhaps you can write next articles referring to this article.
    I desire to read more things about it!

  34. Michael Hertz

    It’s the best time to make a few plans for the long run and it
    is time to be happy. I have read this publish and if I may I
    desire to counsel you few attention-grabbing issues or tips.
    Maybe you can write subsequent articles referring to this article.
    I wish to learn more things about it!

  35. Robertunend

    what is metoprolol [url=https://metoprolol20.us]metoprolol succinate precautions[/url] metoprolol er 25mg
    metoprolol tartrate medication metoprolol er metoprolol side effects

  36. Ana Douglas

    cialis pills overnight reddit cialis cialis medication cost

  37. Robertdor

    duloxetine 30mg [url=https://duloxetine20.us]duloxetine brand name[/url] duloxetine
    duloxetine 20mg cap generic cymbalta cymbalta for pain

  38. JesseThype

    prednisone for asthma [url=https://prednisone20.us]prednisone 50 mg[/url] prednisone 20 mg
    interactions for prednisone generic prednisone 20mg prednisone 50 mg

  39. ShawnEvisp

    viagra australia [url=https://sildenafil20.us]generic viagra 2017[/url] indian viagra
    viagra effects best online viagra natural viagra

  40. Lindsey Peters

    There is definately a lot to find out about this subject. I love all the points you’ve made.

  41. WilliamGok

    canadian cialis [url=https://tadalafil20.us]cialis 100mg review[/url] purchase peptides tadalafil
    cialis medication liquid cialis review goodrx cialis

  42. Jessica Sandefur

    I am sure this piece of writing has touched all the internet
    users, its really really pleasant article on building up new web site.

  43. Cheryl Pena

    vardenafil 20mg price vardenafil price levitra overdose

  44. Byron Battenfield

    I visited several blogs except the audio feature for audio songs existing at this site is genuinely superb.

  45. GeorgePisit

    vardenafil generic india [url=https://vardenafil20.us]levitra from canada[/url] levitra super active
    vardenafil generic cost vardenafil hydrochloride levitra 20mg uk

  46. Susan Bell

    cymbalta 30 mg cymbalta 30mg cymbalta dosing

  47. Dylanrisse

    amitriptyline cost [url=https://amitriptyline20.us]amitriptyline overdose[/url] amitriptyline 25 mg
    amitriptyline weight gain amitriptyline elavil amitriptyline medication

  48. MartinUNINE

    interactions for cymbalta [url=https://cymbalta20.us]cymbalta 2017[/url] duloxetine hcl 30mg
    cymbalta generics duloxetine cymbalta dose

  49. Scottwesee

    hydrochlorothiazide tablets [url=https://hydrochlorothiazide20.us]hydrochlorothiazide 25[/url] hydrochlorothiazide 25mg
    warnings for hydrochlorothiazide valsartan hydrochlorothiazide triamterene hydrochlorothiazide

  50. Deweythera

    mirtazapine 30mg tablet [url=https://mirtazapine21.us]mirtazapine for cats[/url] warnings for mirtazapine
    mirtazapine for insomnia dosage mirtazapine 30 mg mirtazapine for cats

  51. Edie Mohamed

    Ahaa, its nice dialogue about this paragraph at this place at this web site, I have read all that, so
    at this time me also commenting here.

  52. Rosemary Brown

    I visited many websites but the audio quality for audio songs
    existing at this website is truly fabulous.

  53. Melinda Cockburn

    Thanks for sharing your thoughts. I truly appreciate your efforts
    and I will be waiting for your further write ups thanks once again.

  54. Charles Jackson

    I read this paragraph fully on the topic of the comparison of newest and earlier technologies, it’s amazing article.

  55. Edward Romero

    I simply couldn’t depart your web site prior to suggesting that
    I actually loved the standard info an individual
    supply on your guests? Is going to be again steadily to check out new posts

  56. James Alexander

    does metformin cause diarrhea metformin er 500mg metformin and weight loss

  57. Juan Silverman

    I think this is one of the such a lot important info for me. And i’m happy studying your article. However should remark on some normal things, The website taste is great, the articles is in point of fact nice :D. Excellent task, cheers.

  58. Nicholas Roth

    It is the best time to make some plans for the future
    and it is time to be happy. I have read this post
    and if I could I desire to suggest you few interesting things or suggestions.
    Maybe you could write next articles referring to this article.
    I wish to read more things about it!

  59. Williamnax

    bupropion and alcohol [url=https://bupropion21.us]wellbutrin 150 mg[/url] bupropion 300mg xl
    wellbutrin for adhd bupropion hcl 150mg bupropion weight loss

  60. Miltonmip

    buspar dosage [url=https://buspirone21.us]warnings for buspirone[/url] buy buspar
    buspirone 5 mg buspirone 15 mg buspar reviews

  61. Geraldtek

    citalopram side effects [url=https://citalopram21.us]celexa[/url] escitalopram vs citalopram
    citalopram hydrobromide citalopram medication citalopram hbr

  62. DarylHot

    muscle relaxer tizanidine [url=https://tizanidine21.us]tizanidine dosage[/url] warnings for tizanidine
    warnings for tizanidine tizanidine 2 mg what is tizanidine

  63. Adam Macias

    bupropion 300 mg wellbutrin xr bupropion withdrawal

  64. DavidMut

    bupropion hcl er [url=https://wellbutrin21.us]wellbutrin dosing[/url] bupropion er
    bupropion 100 mg wellbutrin xr bupropion hcl

  65. Nancy Gorritz

    I will right away seize your rss as I can’t in finding your e-mail subscription hyperlink or newsletter service.
    Do you’ve any? Kindly let me understand so that I could subscribe.
    Thanks.

  66. Kenneth Hallmark

    buspar side effects buspar pill buspirone 5 mg

  67. Eddie Gamboa

    Howdy! Someone in my Facebook group shared this site with us so I came to
    look it over. I’m definitely loving the information. I’m bookmarking and
    will be tweeting this to my followers! Exceptional blog
    and superb design.

  68. Otis Jones

    celexa generic celexa dosage celexa generic

  69. Kim Miller

    Thank you so much for giving everyone a very spectacular possiblity to discover important secrets from this site. It’s usually so lovely and also jam-packed with amusement for me personally and my office colleagues to search your web site not less than 3 times in one week to find out the latest items you will have. And lastly, I am at all times fulfilled with the eye-popping guidelines served by you. Selected 1 ideas on this page are in truth the most effective we’ve had.

  70. Esther Beech

    zanaflex 6 mg zanaflex generic tizanidine side effects

  71. George Burton

    I’ve been browsing online greater than 3 hours
    nowadays, yet I by no means found any interesting article like yours.
    It is pretty price sufficient for me. Personally, if all web owners and bloggers made good content as you probably did, the web will probably be
    a lot more helpful than ever before.

  72. Vicki Sanchez

    I used to be able to find good advice from your blog articles.

  73. Williamred

    carvedilol mechanism of action [url=https://carvedilol21.us]carvedilol 6 25 mg[/url] carvedilol usage
    what is carvedilol carvedilol pronunciation carvedilol purpose

  74. Russellberia

    clonidine mechanism of action [url=https://clonidine21.us]clonidine generic[/url] clonidine dosage
    clonidine dosing for anxiety side effects of clonidine clonidine class

  75. DonaldOxync

    diclofenac patch [url=https://diclofenac21.us]diclofenac cream[/url] voltaren dosage
    diclofenac topical diclofenac side effects diclofenac diethylamine

  76. Roger Leal

    clonidine interactions clonidine moa clonidine for opiate withdrawal

  77. Doris Torres

    Write more, thats all I have to say. Literally, it seems
    as though you relied on the video to make your point.
    You definitely know what youre talking about, why waste
    your intelligence on just posting videos to your site
    when you could be giving us something enlightening to
    read?

  78. William Hinnenkamp

    finasteride uses