Att bygga mobilappar har aldrig varit rörigare, men förstår man vad man gör så kan det faktiskt funka! Här antecknas några kapitel för att enklare mata in det i skallebanken.

Om GetX

GetX is an extra-light and powerful solution for Flutter. It combines high-performance state management, intelligent dependency injection, and route management quickly and practically. https://pub.dev/packages/get

Varför GetX?

För att kunna hantera en mobilapplikations logik på en högre nivå kan vi skriva "Controllers" för att kunna hantera applikationens state. Men även saker som att navigera mellan vyer, hantera Toastnotiser mm.


Installation

Använd biblioteket

I din pubspec.yaml behöver du lägga till en rad med önskad version, välj den senaste versionen härifrån.

dependencies:
  get: ^4.1.2

Installera biblioteket

VS Code brukar automatiskt köra kommandot flutter pub get åt dig för att hämta de nya paketen från pubspec-filen, om kommandot ej körs automatiskt så kör du detta själv i projektets katalog.

Definera biblioteket

För att importera GetX i vår kod:

import 'package:get/get.dart';


Kom igång

Förutsatt att du har ett blankt projekt utifrån kommandot flutter create <minApp> och utfört stegen ovan för GetX så kan vi gå vidare.

Projektets struktur

Innan projektet blir stort och vi resulterar i många små filer, så kan det vara bra att redan nu skapa tydliga mappar där olika delas utav vår kod kommer placeras.

Inuti <minApp>/lib så skapar jag följande mappar:
  • models kommer innehålla olika strukter för att decoda JSON för API-anrop
  • pages kommer innehålla våra skärmar i Flutter

Skapa vår initiala skärm

I vår initiala skärm (lib/main.dart) kommer vi ange våra rutter till de olika skärmarna.

Det enda vi behöver just nu är en StatelessWidget som returnerar GetMaterialApp(..) med diverse parametrar.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Min App',
      theme: ThemeData(
          primarySwatch: Colors.orange,
          visualDensity: VisualDensity.adaptivePlatformDensity),
      getPages: [
        // Här definerar vi våra sidor
      ],
    );
  }
}

Definiera rutter

Just nu har vi inga skärmar att referera till, men vi kommer att skapa dem strax efter detta steg. Såhär anger vi våra rutter i getPages:[...].

getPages: [
  GetPage(name: "/home", page: () => HomeScreen()),
  GetPage(name: "/register", page: () => RegisterScreen()),
]

Sedan behöver vi sätta vår initiala rutt, igenom parametern home: <MinSkärm()>

getPages: [
   ...
],
home: LoginScreen(),

För att ta oss till en rutt med GetX slipper vi importera varje vi och skriva långa Navigator.push(...{...}...); och kan istället bara skriva följande:

Get.toNamed("/login");

Man kan säga att följande ersätter varandra:

  • Navigator.push(context, MaterialPageRoute(builder: (context) => LoginPage()));  |  Get.toNamed("/login"); (Eftersom vi använder getPages)
  • Navigator.pop(context);  |  Get.back();

Skriva vår första skärm

För att fortsätta förhålla oss till städad struktur, kommer vi att skapa följande mappar för våra tre skärmar. Varje skärm har en mapp, i sin mapp har de två kataloger.

Login & Register skärmen ligger i en katalog som heter auth bara för att jag gillar att gruppera dem som en kategori.

  • lib/pages/auth/login
  • lib/pages/auth/register
  • lib/pages/home
  • views & controller där vi har separat logik och gränssnitt, ligger i varje lib/pages/<namn>
När vår struktur är på plats igen, kan vi påbörja Dart'a

lib/pages/auth/login/view/loginPage.dart

lib/pages/home/view/homePage.dart

lib/pages/auth/register/view/registerPage.dart

lib/widgets/bezierContainer.dart

lib/widgets/customClipper.dart

Uppdatera main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_navigation/src/root/get_material_app.dart';
// Screen imports
import 'package:app/pages/home/view/homePage.dart';
import 'package:app/pages/auth/login/view/loginPage.dart';
import 'package:app/pages/auth/register/view/registerPage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Min App',
      theme: ThemeData(
          primarySwatch: Colors.orange,
          visualDensity: VisualDensity.adaptivePlatformDensity),
      getPages: [
        GetPage(name: '/home', page: () => HomePage()),
        GetPage(name: '/register', page: () => RegisterPage()),
        GetPage(name: '/login', page: () => LoginPage()),
      ],
      home: HomePage(),
    );
  }
}

Fortsätt med autentisering mot ett API

Nu har vi skärmar som vi kan navigera bland, dock har vi inte interaktivitet i våra formulär på de diverse skärmarna.

I nästa kapitel går vi igenom hur vi knyter på textfält och knappar till att formulera att anrop mot ett externt API

Kom igång med apputveckling i Flutter #2 - Textfält och HTTP-anrop
Kod, guider och trams
Klicka här för att läsa nästa del