Mobilutvikling med Flutter · leksjon

Bygg den første Flutter-appen

Gå gjennom prosessen med å opprette en enkel «Hello World»-Flutter-applikasjon, og forstå prosjektstrukturen og funksjonen for hot reload.

Leksjon 3 av 412 trinn

Bygg den første Flutter-appen er en gratis leksjon i Mobilutvikling med Flutter på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Mobilutvikling med Flutter, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Din første Flutter-app!

Nå skal du bygge din første Flutter-app – en enkel Hello World for å lære arbeidsflyten. Du får snart se hvorfor Flutter oppleves så raskt.

Opprett et nytt prosjekt

Kjør flutter create for å opprette grunnstrukturen til et nytt prosjekt, og bruk deretter cd for å gå til mappen. Med én kommando er du klar til å kode.

flutter create my_first_app
cd my_first_app

Forstå prosjektstrukturen

Flutter oppretter flere mapper. De viktigste er: lib/main.dart (koden din), pubspec.yaml (avhengigheter) og plattformmappene android/ og ios/.

Appens startpunkt: main.dart

Alle apper starter i main(). I denne funksjonen tar runApp() imot rot-widgeten din og fester den til skjermen.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Launching App...', // Text displayed directly
        textDirection: TextDirection.ltr, // Required for root Text widget
        style: TextStyle(color: Colors.blue, fontSize: 20),
      ),
    ),
  );
}

Bygg MyApp-widgeten din

Legg appen i en rot-widget, ofte MyApp. For UI som ikke endres, bruker du en StatelessWidget – den trenger bare en build-metode som beskriver UI-et.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // This widget will define the app's look and feel
    return const Placeholder(); // A temporary visual marker
  }
}

Grunnleggende om MaterialApp og Scaffold

MaterialApp legger til Material Design. Inni denne gir Scaffold deg det grunnleggende layoutet – en AppBar øverst og en body for innholdet.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter App',
      theme: ThemeData(primarySwatch: Colors.blue), // Sets primary color
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My First App'), // Text in the app bar
        ),
        body: const Center(
          child: Text(
            'Hello, CoddyKit!', // Our main content text
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Kjør den nye appen din

Er appen klar? Kjør den. Start en emulator eller simulator, eller koble til en enhet, og kjør deretter flutter run fra prosjektroten.

flutter run

Møt Hot Reload!

Hot Reload setter inn kodeendringer i en app som kjører, nesten umiddelbart – uten full omstart og uten å miste tilstanden. Bare lagre .dart-filen for å utløse det.

Hot Reload i praksis

Prøv selv: Endre teksten i AppBar, innholdet eller temafargen nedenfor. Lagre deretter og se hvordan Hot Reload oppdaterer appen mens den kjører.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello Flutter App',
      theme: ThemeData(primarySwatch: Colors.green), // Changed color!
      home: Scaffold(
        appBar: AppBar(
          title: const Text('My Updated App'), // Changed text!
        ),
        body: const Center(
          child: Text(
            'Hot Reloaded!', // Changed text and size!
            style: TextStyle(fontSize: 28, color: Colors.red),
          ),
        ),
      ),
    );
  }
}

Hot Reload kontra Hot Restart

Hot Reload setter inn kode og beholder appens tilstand – perfekt for UI-justeringer. Hot Restart bygger appen på nytt fra grunnen av og nullstiller tilstanden, noe som passer ved større endringer.

Hurtigsjekk: Hot Reload

Du har sett Flutters hot reload i praksis. La oss teste om du har forstått det!

Besvar den i den interaktive leksjonen

Oppsummering: din første Flutter-app

Gratulerer! Du har bygget og kjørt din første Flutter-app – flutter create, main.dart-strukturen, MaterialApp + Scaffold og kraften i Hot Reload.

Gratis å komme i gang

Lær deg Dart med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 22
Leksjoner: 88

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Bygg den første Flutter-appen» gratis?

Ja – hele teksten i «Bygg den første Flutter-appen» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Mobilutvikling med Flutter-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Hva lærer jeg i «Bygg den første Flutter-appen»?

Gå gjennom prosessen med å opprette en enkel «Hello World»-Flutter-applikasjon, og forstå prosjektstrukturen og funksjonen for hot reload. Du øver på Mobilutvikling med Flutter med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Mobilutvikling med Flutter?

Ingen tidligere erfaring er nødvendig. Mobilutvikling med Flutter på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Bygg den første Flutter-appen»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Mobilutvikling med Flutter-leksjonen?

Ja. Alle Mobilutvikling med Flutter-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Flutter-økosystemet og oppsett
Grunnleggende Dart for Flutter
Bygg den første Flutter-appen
Asynkron programmering med Futures og async/await

← Tilbake til Mobilutvikling med Flutter