PricingLoginStart free
Mobilutveckling med Flutter · Lektion

Bygg er första Flutter-app

Gå igenom processen att skapa en enkel Flutter-applikation med 'Hello World', förstå projektstrukturen och funktionen för hot reload.

Lektion 3 av 412 steg

Bygg er första Flutter-app är en gratis lektion i Mobilutveckling med Flutter på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Mobilutveckling med Flutter, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Er första Flutter-app!

Dags att bygga er första Flutter-app – ett enkelt Hello World-program där ni får lära er arbetsflödet. Snart får ni se varför Flutter känns så snabbt.

Skapa ett nytt projekt

Kör flutter create för att skapa grundstrukturen för ett nytt projekt och använd sedan cd för att gå till mappen. Ett kommando och ni är redo att koda.

flutter create my_first_app
cd my_first_app

Förstå projektstrukturen

Flutter skapar flera mappar. De viktigaste är: lib/main.dart (er kod), pubspec.yaml (beroenden) samt plattformsmappen android/ och ios/.

Appens startpunkt: main.dart

Alla appar startar i main(). Inuti den tar runApp() emot er rotwidget och kopplar den till skärmen.

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 er MyApp-widget

Omslut appen med en rotwidget, ofta MyApp. För UI som inte ändras använder ni en StatelessWidget – den behöver bara en build-metod som beskriver UI:t.

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
  }
}

Grunderna i MaterialApp och Scaffold

MaterialApp lägger till Material Design. Inuti den ger Scaffold er den grundläggande layouten – en AppBar högst upp och en body för innehållet.

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),
          ),
        ),
      ),
    );
  }
}

Kör er nya app

Är appen redo? Kör den. Starta en emulator eller simulator, eller anslut en enhet, och kör sedan flutter run från projektets rotmapp.

flutter run

Möt Hot Reload!

Hot Reload lägger in kodändringar i en körande app nästan omedelbart – utan full omstart och utan att tillståndet går förlorat. Spara bara er .dart-fil för att aktivera funktionen.

Hot Reload i praktiken

Prova själv: ändra texten i AppBar, body eller temafärgen nedan, spara och se hur Hot Reload uppdaterar den körande appen direkt.

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 jämfört med Hot Restart

Hot Reload lägger in kod och behåller appens tillstånd – perfekt för UI-justeringar. Hot Restart bygger om appen från början och återställer tillståndet, vilket passar större ändringar.

Snabbkontroll: Hot Reload

Ni har sett Flutters hot reload i praktiken. Nu testar vi er förståelse!

Besvara frågan i den interaktiva lektionen

Sammanfattning: er första Flutter-app

Grattis! Ni har byggt och kört er första Flutter-app – flutter create, strukturen med main.dart, MaterialApp + Scaffold och kraften i Hot Reload.

Gratis att börja

Lär dig Dart med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
22
Lektioner
88
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Bygg er första Flutter-app” gratis?

Ja – hela texten till ”Bygg er första Flutter-app” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Mobilutveckling med Flutter, kan Ni uppgradera till CoddyKit PRO. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Vad lär jag mig i ”Bygg er första Flutter-app”?

Gå igenom processen att skapa en enkel Flutter-applikation med 'Hello World', förstå projektstrukturen och funktionen för hot reload. Ni övar på Mobilutveckling med Flutter med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Mobilutveckling med Flutter?

Du behöver inga förkunskaper. Utbildningen i Mobilutveckling med Flutter på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Bygg er första Flutter-app”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Mobilutveckling med Flutter-lektionen?

Ja. Varje Mobilutveckling med Flutter-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Flutter-ekosystemet och konfiguration
  2. Grunderna i Dart för Flutter
  3. Bygg er första Flutter-app
  4. Asynkron programmering med Futures och async/await
← Tillbaka till Mobilutveckling med Flutter