歡迎來到我的故事阳懂，我如何在一天之內(nèi)創(chuàng)建一個Scrum Card App输涕。在本文中，我想向您展示創(chuàng)建Flutter應(yīng)用程序有多簡單棒拂。我的挑戰(zhàn)是在短時間內(nèi)創(chuàng)建最小的應(yīng)用程序。
首先玫氢，我首先要清晰地了解我們要實現(xiàn)的目標(biāo)帚屉。我目前在Scrum團隊工作，我們總是需要隨身攜帶用于短跑撲克的卡片漾峡。這些卡很舊攻旦，很臟，很多團隊經(jīng)常使用這些卡生逸，所以我決定一勞永逸地用應(yīng)用程序更改它牢屋。
Scrum撲克
如果您以前從未在Scrum團隊工作過，則可能從未聽說過Scrum Poker一詞槽袄。要解釋整個想法烙无，可能對于那個故事來說太多了，但是如果您有興趣遍尺，Ravindra Prasad撰寫了一篇關(guān)于該主題的出色文章截酷。
這就像真正的撲克，但是每個人都有相同的牌乾戏。
視覺指導(dǎo)
對我來說迂苛，在我的項目中三热，像原型一樣有視覺指導(dǎo)總是很有幫助的。這個原型可以是紙上的一幅畫三幻，也可以是一個成熟的原型就漾。對于本文，我使用Adobe XD創(chuàng)建了一個快速原型赌髓，以便向您展示它的外觀从藤，并為自己提供可視化支持。
這樣锁蠕，我們有了一個原型夷野，現(xiàn)在我們知道要創(chuàng)建什么了。現(xiàn)在我們已準(zhǔn)備好進行開發(fā)荣倾。首先悯搔，我們必須使用Flutter創(chuàng)建一個新項目。在Flutter網(wǎng)站上舌仍，有更多有關(guān)如何設(shè)置環(huán)境的信息妒貌。對于這個故事，我將使用帶有Flutter和Dart插件的Android Studio铸豁。
重組我們的樣板
在設(shè)置flutter項目之后灌曙，讓我們首先刪除所有不需要的注釋。我將主頁與主文件分開节芥，以便我們對應(yīng)用程序有更好的感覺在刺。這樣，我們?yōu)轫椖繕影鍘砹烁嘤唵瓮纺鳌Ｔ谖覀兊闹魑募序纪眨@應(yīng)該保留。
在“ myHomePage.dart”中相艇，您將找到用flutter項目初始化的有狀態(tài)“ MyHomePage”小部件颖杏。
下圖應(yīng)該是文件夾結(jié)構(gòu)。
我們的主頁
對于我們的第一個鏡頭坛芽，我們想使用主頁的現(xiàn)有Scaffold留储。這包含我們的Scrum卡和Flutter GridView。GridView使我們可以選擇對齊網(wǎng)格中的多個項目靡馁。GridView的count構(gòu)造函數(shù)為我們提供了開箱即用的功能欲鹏，以創(chuàng)建帶有Cards的Grid。
首先臭墨，我們初始化變量“ Fibonacci”，以便可以將數(shù)字包含在數(shù)組中膘盖。如果您仔細查看GridView的count構(gòu)造函數(shù)的子級胧弛，您會看到“ for循環(huán)”尤误。這不是很好嗎？我們可以在children數(shù)組內(nèi)部循環(huán)结缚，以將Fibonacci數(shù)組映射到占位符损晤。
太好了，網(wǎng)格看上去已經(jīng)非常有前途了红竭。您有沒有看到“占位符”小部件在這一部分中很方便尤勋？有了這個，我們就不必為卡創(chuàng)建任何東西了茵宪。但是最冰，結(jié)果已經(jīng)很明顯。占位符可以幫助我們構(gòu)建應(yīng)用程序稀火，而無需實際執(zhí)行任何操作暖哨。
卡
現(xiàn)在我們已經(jīng)有了基本的結(jié)構(gòu)，我們必須考慮如何顯示卡凰狞。幸運的是篇裁，F(xiàn)lutter已經(jīng)為我們提供了一些東西∩娜簦卡片小部件將幫助我們創(chuàng)建插入文本的卡片的出色可視化效果达布。由于卡不會更改，因此我們可以為其創(chuàng)建帶有圖標(biāo)或數(shù)字的無狀態(tài)小部件∮舛現(xiàn)在黍聂，它將位于“ MyHomePage”中。
手勢
現(xiàn)在是時候控制我們應(yīng)用程序的行為了粉渠。當(dāng)我們點擊卡片時分冈，它應(yīng)該從樹中刪除小部件，并用單個卡片小部件替換霸株。但是雕沉，這會更改“ MyHomePage”小部件的狀態(tài)。
為了實現(xiàn)這種點擊行為去件，我們首先必須用GestureController包圍Card元素坡椒。之后，我們必須在卡內(nèi)指定onTap事件尤溜。
現(xiàn)在倔叼，這將在控制臺的單獨行中打印卡上的每次單擊。
Downtime
好吧宫莱，我們已經(jīng)做到了丈攒。因此，讓我們休息一下，然后簡要回顧一下我們已經(jīng)創(chuàng)建的內(nèi)容巡验。
- Scrum Card應(yīng)用程序的設(shè)計
- 主頁
- 一個ScrumCard小部件
- 手勢和敲擊事件
我們需要做的下一步是在點擊后更改應(yīng)用程序的狀態(tài)际插。每當(dāng)點擊卡片時，我們都希望使用Big ScrumCard小部件替換主頁中的正文显设。
現(xiàn)在是困難的部分框弛。因此，請做好準(zhǔn)備捕捂，深吸一口氣瑟枫，然后開始吧！
狀態(tài)管理
Flutter中有兩種不同類型的小部件指攒。
- 無狀態(tài)小部件
- 有狀態(tài)的小部件
無狀態(tài)窗口小部件是始終根據(jù)其初始值顯示的窗口小部件慷妙。在其生命周期內(nèi)，初始值不能更改幽七。另一方面景殷，有狀態(tài)窗口小部件包含真實狀態(tài)，如果您更改狀態(tài)澡屡，則將重新呈現(xiàn)該窗口小部件猿挚。如果您想了解更多有關(guān)不同類型的部件隨意看看的文章通過迪帕克?。
現(xiàn)在驶鹉，我們必須第一次處理小部件的狀態(tài)绩蜻。當(dāng)我們單擊按鈕時，“網(wǎng)格小部件”的狀態(tài)應(yīng)更改為大的“卡片小部件”室埋。這告訴我們办绝，我們的應(yīng)用程序中至少有兩個不同的狀態(tài)。為了跟蹤這些狀態(tài)姚淆，我們必須將當(dāng)前的“無狀態(tài)”小部件更改為“有狀態(tài)”小部件孕蝉。最簡單的方法是單擊無狀態(tài)小組件，然后使用IDE函數(shù)將無狀態(tài)小組件更改為有狀態(tài)小組件腌逢。
因為新的Widget現(xiàn)在是有狀態(tài)的降淮，所以我們可以更改其值，并且“ build”方法可以對這些不同的狀態(tài)做出反應(yīng)搏讶。
我們想要跟蹤要顯示的圖標(biāo)或卡上可見的文本的信息佳鳖，因此需要將其顯示為狀態(tài)。我稱該變量為“singleCardText”和“singleCardIcon”媒惕。此外系吩，我想擁有一個布爾值，該布爾值知道我是否必須顯示所有卡片或僅一張大卡片的主頁妒蔚。
請注意這一點穿挨，我在這里犯了一個大錯誤月弛，并將所有這些變量都放入了build方法。多次調(diào)用build方法絮蒿，并且每次調(diào)用它都會再次覆蓋值尊搬。
當(dāng)然叁鉴，這聽起來微不足道土涝，但是卻花了我一小時的時間。
The Exchange
現(xiàn)在幌墓，我們希望根據(jù)“isHomePage”值交換小部件但壮。因此，我們可以使用Flutter技能之一常侣。我們包圍了我們的GridView蜡饵。使用三元運算符的構(gòu)造函數(shù)計數(shù)。這將檢查isHomePage并將相應(yīng)的小部件添加到容器中胳施。
如果你被" ?和“:”在代碼中溯祸，我可以推薦您閱讀一篇關(guān)于Deven Joshi的“三元運算符”的文章。有了這些舞肆，我們就有機會將“isHomePage”更改為false焦辅，它將只顯示Padding(以及里面的內(nèi)容)，或者我們將它保持為true椿胯，它將顯示GridView筷登。因此，我們需要“setState”方法哩盲。它允許我們非常容易地更改小部件的當(dāng)前狀態(tài)前方。
到目前為止很好。現(xiàn)在廉油，我們要執(zhí)行“ switchToCard”方法惠险，而不是點擊只在控制臺中打印內(nèi)容的位置。但是如何抒线？該方法必須存在于_HomePageState中班巩，而ScrumCard無法訪問該狀態(tài)？好吧十兢，讓我向您解釋一下趣竣，因為有一個相當(dāng)簡單的解決方案。我們只是將函數(shù)傳遞到ScrumCard小部件中旱物。每當(dāng)用戶現(xiàn)在在卡上點擊時遥缕，我們就會調(diào)用該方法并“通知”我們的父窗口小部件。
如果您對這些代碼片段進行了簡單的了解宵呛，您會發(fā)現(xiàn)ScrumCard調(diào)用了notifyParent方法单匣，實際上是switchToCard方法。這現(xiàn)在應(yīng)該可以幫助我們從具有多個Scrum卡的網(wǎng)格過渡到單個大的Scrum Versa。現(xiàn)在僅剩一步户秤，我們必須創(chuàng)建一個漂亮的Card UI码秉，該isUI將在isHomePage為false時生成。
正如您很可能已經(jīng)發(fā)現(xiàn)的那樣鸡号，我在此處添加了notifyParent的另一個函數(shù)转砖，以便我們可以交換回首頁。
現(xiàn)在鲸伴，卡和網(wǎng)格的開關(guān)應(yīng)該已經(jīng)可以工作了府蔗。為了進一步改善我們的應(yīng)用程序，我們可以使用“ AnimatedSwitcher ”汞窗。我從flutter團隊那里發(fā)現(xiàn)了這個很棒的視頻姓赤，這是一個完美的用例。您可能已經(jīng)猜到了AnimatedSwitcher仲吏，它可以幫助我們彼此交換兩個小部件不铆。它在這兩者之間添加了平滑的過渡，這看起來更加友好裹唆。您只需要在小時候就將三元運算符放在兩者之間誓斥，并給它一個Duration，過渡應(yīng)該花多長時間品腹。
好的岖食，讓我們運行模擬器或模擬器，看看應(yīng)用程序現(xiàn)在的外觀舞吭。
結(jié)論和下一步
現(xiàn)在泡垃，該應(yīng)用程序已經(jīng)解決了軟件工程中的一個重要問題。從現(xiàn)在開始羡鸥，我再也沒有將真實的卡從一個房間搬到另一個房間了蔑穴。我再也不需要抓住舊的有臭味的卡片，并將它們顯示給我的產(chǎn)品負責(zé)人惧浴。我們不想知道哪種液體接觸了這些臟污的卡片……
當(dāng)然存和，這僅僅是開始。有了本屆會議的知識衷旅，我們可以做更多的事情捐腿。該應(yīng)用程序展示了使用flutter創(chuàng)建一個功能完善的應(yīng)用程序有多么容易。
現(xiàn)在輪到您了柿顶。在下一篇文章之前茄袖，您面臨的挑戰(zhàn)是創(chuàng)建此應(yīng)用程序或從GitHub派生我的存儲庫，并通過少量附加功能擴展此應(yīng)用程序嘁锯。為了給您一些示例宪祥，您可以添加聂薪，
- 從斐波那契數(shù)字更改為其他Scrum撲克數(shù)字成為可能
- 創(chuàng)建所選卡的歷史記錄
- 在過渡之間制作自定義動畫
如果您有任何反饋意見讓我知道，并且如果您對其他有趣的文章感興趣蝗羊，請隨時在Twitter上關(guān)注我或查看我的GitHub Repository藏澳。
翻譯自：https://medium.com/flutter-community/flutter-mobile-scrum-poker-app-c72d5d5514ea
