Læringsplan for Dart og Flutter over 3 måneder

Denne læringsplan er designet til at hjælpe dig med at mestre Dart og Flutter over en periode på 3 måneder. Planen inkluderer 3 timers undervisning pr. dag og 3 timers øvelser pr. uge, med gradvis progression og 3 større projekter med stigende sværhedsgrad.

Oversigt

  • Måned 1: Introduktion til Dart og grundlæggende Flutter.
  • Måned 2: Intermediate Flutter, state management og netværk.
  • Måned 3: Avancerede emner, performanceoptimering og større projekter.

Måned 1: Grundlæggende Dart og Flutter

Installation af Visual Studio Code til Dart og Flutter

Denne guide vil hjælpe dig med at installere Visual Studio Code og opsætte det til udvikling med Dart og Flutter.

Trin 1: Installér Visual Studio Code

  • Besøg Visual Studio Code’s officielle hjemmeside.
  • Download den version, der passer til dit operativsystem (Windows, macOS eller Linux).
  • Følg installationsinstruktionerne for at fuldføre opsætningen.
    • Temaerne der er rare for øjnene er Interstellar Blue (id:JavRedstone.interstellar-blue), Cold Blue Theme (id:ColdBlueTheme.cold-blue-theme), Blue (@id:eddy1470669.blue)

Trin 2: Installér Dart-udvidelsen

  • Åbn Visual Studio Code.

  • Klik på Extensions-ikonet i venstre sidebjælke (eller tryk Ctrl+Shift+X).

    Extensions ikon
    Extensions ikon

  • I søgefeltet skriver du “Dart”.

    Søg efter Dart-udvidelsen
    Søg efter Dart-udvidelsen

  • Find Dart-udvidelsen udviklet af Dart Code.

  • Klik på Install for at installere udvidelsen.

    Installér Dart-udvidelsen
    Installér Dart-udvidelsen
    • Dette vil automatisk installere nødvendige funktioner for at udvikle i Dart.

Trin 3: Installér Flutter-udvidelsen (valgfrit, men anbefales)

  • Mens du stadig er i Extensions-panelet, søg efter “Flutter”.

  • Find Flutter-udvidelsen af Dart Code.

  • Klik på Install for at installere udvidelsen.

    Installér Flutter-udvidelsen
    Installér Flutter-udvidelsen
    • Denne udvidelse giver ekstra funktioner til Flutter-udvikling.

Trin 4: Verificér installationen

  • Åbn en ny terminal i Visual Studio Code ved at gå til Terminal > New Terminal.

    Åbn ny terminal
    Åbn ny terminal

  • Kør følgende kommando for at sikre, at Dart SDK er installeret korrekt og tilgængeligt i din PATH:

    ```bash dart –version

Uge 1: Introduktion til Dart

Dagligt fokus (3 timer pr. dag):

  • Dag 1-2:
    • Installere Dart SDK og opsætte udviklingsmiljø.
      • brug siderne Dart.dev, Flutter.dev og Chocolatey.org
      • Først åbnes powershell med administrator rettigheder, så installeres chocolatey. derefter dart - når dart er installeret skal powershell genstartes.
    • Grundlæggende Dart-syntaks: variabler, datatyper, operatorer.
    • Anbefalet YouTube-video:
  • Dag 3-4:
  • Dag 5-6:

Ugeøvelse (3 timer):

  • Opret en simpel Dart-applikation, der udfører beregninger baseret på brugerinput.

Uge 2: Introduktion til Flutter

Dagligt fokus (3 timer pr. dag):

  • Dag 1-2:
    • Installere Flutter SDK og opsætte udviklingsmiljø.
    • Forstå Flutter’s widget-træ og grundlæggende widgets.
    • Anbefalet YouTube-video:
  • Dag 3-4:
    • Layouts: Row, Column, Container, Stack.
    • Stateless vs. Stateful widgets.
    • Anbefalet YouTube-video:
  • Dag 5-6:

Ugeøvelse (3 timer):

  • Byg en simpel “Hello World” app med navigation mellem to skærme.

Uge 3: Widgets og UI Design

Dagligt fokus (3 timer pr. dag):

  • Dag 1-2:
    • Arbejde med lister: ListView, GridView.
    • Indbyggede og tilpassede widgets.
    • Anbefalet YouTube-video:
  • Dag 3-4:
    • Forms og brugerinput: TextField, Buttons, Forms.
    • Validering af input.
    • Anbefalet YouTube-video:
  • Dag 5-6:

Ugeøvelse (3 timer):

  • Design en app, der viser en liste over genstande med billeder og detaljer.

Uge 4: Første større projekt

Dagligt fokus (3 timer pr. dag):

  • Anvend læring fra de første tre uger til at udvikle en simpel applikation.

Projekt 1 (Sværhedsgrad: Begynder):

  • Beskrivelse:
    • Byg en “To-Do List” app, hvor brugere kan tilføje, redigere og slette opgaver.
  • Mål:
    • Anvende widgets, state management (setState), navigation og datahåndtering.
  • Anbefalet YouTube-video:

Måned 2: Intermediate Flutter og State Management

Uge 5: State Management

Dagligt fokus (3 timer pr. dag):

Ugeøvelse (3 timer):

  • Opdater “To-Do List” appen til at bruge Provider til state management.

Uge 6: Netværk og API-integration

Dagligt fokus (3 timer pr. dag):

Ugeøvelse (3 timer):

  • Byg en app, der henter og viser data fra en offentlig API.

Uge 7: Lokal datahåndtering

Dagligt fokus (3 timer pr. dag):

Ugeøvelse (3 timer):

  • Implementer lokal dataopbevaring i en tidligere app.

Uge 8: Andet større projekt

Dagligt fokus (3 timer pr. dag):

  • Anvend det lærte til at udvikle en mere kompleks applikation.

Projekt 2 (Sværhedsgrad: Intermediate):

  • Beskrivelse:
    • Byg en “Nyhedsapp”, der henter artikler fra en API og tillader brugere at gemme favoritter.
  • Mål:
    • Anvende netværkskald, state management og lokal datahåndtering.
  • Anbefalet YouTube-video:

Måned 3: Avancerede emner og afsluttende projekt

Uge 9: Avanceret UI og animationer

Dagligt fokus (3 timer pr. dag):

Ugeøvelse (3 timer):

  • Forbedre UI og tilføje animationer til tidligere projekter.

Uge 10: Integrering af native funktioner

Dagligt fokus (3 timer pr. dag):

Ugeøvelse (3 timer):

  • Byg en app, der bruger enhedens kamera og sender push-notifikationer.

Uge 11: Performance og optimering

Dagligt fokus (3 timer pr. dag):

  • Dag 1-2:
    • Forståelse af Flutter’s rendering pipeline.
    • Identificere og løse performanceproblemer.
    • Anbefalet YouTube-video:
  • Dag 3-4:
    • Brug af Flutter DevTools til debugging og profilering.
    • Anbefalet YouTube-video:
  • Dag 5-6:

Ugeøvelse (3 timer):

  • Optimer en tidligere app for bedre performance.

Uge 12: Afsluttende projekt

Projekt 3 (Sværhedsgrad: Avanceret):

  • Beskrivelse:
    • Udvikl en fuldt funktionel app efter eget valg, der integrerer alle de lærte emner.
  • Mål:
    • Demonstrere forståelse af Flutter, state management, netværk, lokal data, avanceret UI, performanceoptimering og native funktioner.
  • Forslag:
    • En social medie-app, en e-handelsapp eller en produktivitetsapp.
  • Anbefalet YouTube-video:

Yderligere ressourcer

Bemærkninger

  • Praktisk erfaring: Sørg for at kode hver dag for at styrke din forståelse.
  • Community-engagement: Deltag i Flutter-fora som Stack Overflow og GitHub for at få hjælp og feedback.
  • Refleksion: Ved afslutningen af hver uge, reflekter over hvad du har lært, og hvordan du kan anvende det i dine projekter.
  • Porteføljeopbygning: Brug de større projekter til at opbygge en portefølje, der kan fremvises til potentielle arbejdsgivere eller klienter.

Held og lykke med din læringsrejse i Dart og Flutter!