Bygga WhatsApp UI med Flutter Io och Dart

Flutter är en helt ny mobilapp SDK tillverkad av Google. Det är tänkt att hjälpa utvecklare och designers att bygga moderna appar för Android och IOS.

Jag upptäckte Flutter för ett par månader sedan när jag bläddrade på Youtube. Det tog mig bara några minuter att gå från att titta på den första videon om fladder till att ladda ner och installera den för mig själv.

Flutter har en av de enklaste och smärtlösa installationsprocesserna. Du klonar helt enkelt GitHub-repo och kör där Flutter Doctor-verktyget, det är en bris. För mer information om hur du installerar Flutter för ditt system se: https://flutter.io/setup/

I den här serien kommer vi att bygga en UI-klon av den populära meddelanden-appen WhatsApp. WhatsApp är en fantastisk app som gör det möjligt för användare att snabbt meddela och ringa nära och kära gratis.

Med hjälp av Flutter kan vi snabbt bygga layouten för WhatsApp med relativt enkelhet.

Komma igång

För det första skapar vi ett nytt Flutter-projekt med deras praktiska CLI.

Detta kommer att generera projektfilerna för både Android och IOS

Nu när projektet har genererats cd in i projektmappen och kör Flutter run

Som standard genererar Flutter en räkneapplikation så om allt gick bra bör du se detta på din enhet.

Nu när appen körs, låt oss navigera till lib-mappen och öppna main.dart. Här kan du se koden för standardappen. Vi kommer att ta bort allt så att vi står kvar med en tom fil.

Låt oss börja med att importera fladderens materialpaket. Detta paket innehåller en uppsättning pre-made widgets som är utformade enligt Googles riktlinjer för materialdesign.

Bra! med paketet importerat går vi nu vidare till huvudfunktionen. Det här är det första som körs när appen startas.

I main.dart lägger vi till raderna

Därefter specificerar vi runApp-metoden inuti main

I runApp skapar vi en ny instans av MaterialApp. Det här är moder-widgeten för vår app.

Widgeten MaterialApp kan tilldelas några egenskaper. För våra ändamål kommer vi bara att använda hem, tema och titel. Ändra den befintliga koden så att den ser ut så här.

Ovanstående kod anger några egenskaper för vår app. Titel ger appen sin titel, hem tilldelar den en hemsida och temat anger några globala stilregler.

Dags att skapa klassen WhatsAppUiClone. Under huvudmetoden skapar vi en ny klass som heter WhatsAppUiClone och får den att utöka StatefulWidget.

I Flutter finns det två typer av widgets, statliga och statslösa. Ovanstående kod använder den Stateful-varianten. Som ni ser är det skapat i tre steg. Först på rad 1 definieras klassnamnet följt av nyckelorden Extends StatefulWidget. Sedan på rad två skapas staten. Slutligen skapas på rad fem ytterligare en klass, denna gång med det namn som används för att skapa staten. Denna klass utvidgar staten.

Med det mesta av pannplattan ur vägen kan vi nu gå över till att skapa appBar. Lägg till följande rader i _WhatsAppUiClone

Fantastisk! med bara några koderader och lite modifiering har vi skapat en materiell app-bar med nedre navigeringsflikar. Klassen modifieras för att inkludera SingleTickerProviderStateMixin, som är en animationsegenskap som används av TabBar. Därefter returnerade vi ett nytt byggnadsställning som är en widget från materialpaketet. Ett ställning ger oss olika API: er för att lägga till olika funktioner i vår app, till exempel en AppBar, flikar, låda, etc. ... För mer information, se https://docs.flutter.io/flutter/material/Scaffold-class.html .

Inuti ställningen använder vi egenskapen appBar för att skapa en materiell appfält. Bakgrundsfärgen ställs sedan in på den primära färgen som har definierats tidigare i temaegenskapen i vår MaterialApp-widget. Som en del av appBar använder vi bottenegenskapen för att skapa en TabBar. TabBar tar in några få egenskaper som indikatorfärgen, en kontroller med vi också definierat och flikar. Flikar tar en matris om widgets av typen Tab. De fyra flikarna ställs in här.

Med det ur vägen är det dags för oss att skapa våra olika sidor. För tillfället kommer vi bara att skapa en widget som visar lite text. Skapa en ny mapp som heter sidor i vår lib-mapp. På insidan av sidorna skapar vi fyra kallade call_history.dart, camera_page.dart, chat_screen.dart och status_page.dart. Dessa filer kommer att vara de olika flikorganen.

För call_history lägger vi till följande rader

I camera_page lägger vi till

För chat_screen

Äntligen för status_sida

Med alla komponenter på plats är det dags att koppla upp saker och titta på resultaten. Tillbaka i main.dart, ändra filen så att den ser ut så här

Från början och arbeta oss ner importerade vi de fyra filerna vi just skapade till main.dart. Därefter åsidosätter vi två av Fluters livscykelmetoder. I initState-metoden ställer vi in ​​_tabcontroller som vi skapade tidigare till en ny TabController. Antalet flikar ställdes här. När vi går längre ner åsidosätter vi återigen en livscykelmetod, den här gången avyttra. Slutligen, i ställningen, använde vi karossegenskapen och ställde in den till en ny TabBarView. TabBarView använde samma styrenhet som tidigare och tog in de fyra olika klasserna som vi skapade som dess barn.

Om alla nu gick enligt planen skulle resultatet se ut så här

Slutsats

Som du ser tar det väldigt lite för dig att gå upp och gå med Flutter. Detta är en del av en serie jag planerar att göra. Nästa del kan släppas någon gång under nästa vecka. Det beror på hur mycket läxor jag har.

Länken till koden kan hittas här: https://github.com/Nash0x7E2/flutter-whatsapp-ui-clone/tree/master

Om du har upptäckt några fel eller har några förslag, skicka dig gärna ett meddelande eller lämna en kommentar.

- Nash