Programkurser og Teknologiforum | Hacza

Software Kurser => Flutter => Emne startet af: Hacza Dato Mar 24, 2025, 04:18 PM

Titel: Flutter: En Guide til Brug af Stack til Overlappende UI
Indlæg af: Hacza Dato Mar 24, 2025, 04:18 PM
Flutter er et kraftfuldt framework fra Google til udvikling af mobilapps, og Stack-widgetten er et uundværligt værktøj, når du vil placere elementer oven på hinanden i brugergrænsefladen (UI). I denne artikel vil vi udforske, hvad Stack er, hvordan den bruges, og hvorfor den er så nyttig i Flutter. Vi inkluderer også praktiske kodeeksempler, så du kan komme i gang med det samme.

Hvad er Stack i Flutter?
Stack er en widget i Flutter, der gør det muligt at stable flere widgets oven på hinanden. Den er perfekt til komplekse designs, hvor du har brug for at overlappe elementer som billeder, tekst eller knapper. Med Stack kan du styre rækkefølgen og placeringen af dine widgets, ofte i kombination med Positioned.

Grundlæggende Egenskaber ved Stack

Et Simpelt Stack-Eksempel
Her er et grundlæggende eksempel på en Stack, der placerer tekst oven på en farvet baggrund:

import 'package:flutter/material.dart';

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

class MinApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Stack Eksempel")),
        body: Center(
          child: Stack(
            children: [
              Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
              Center(
                child: Text(
                  "Velkommen til Flutter!",
                  style: TextStyle(
                    fontSize: 20,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

I dette eksempel stables en blå Container og en hvid tekst ovenpå hinanden. Stack sørger for, at de overlapper hinanden korrekt.

Brug af Positioned med Stack
For mere præcis kontrol over placeringen kan du bruge Positioned inde i en Stack. Her er et eksempel:

Stack(
  children: [
    Container(
      width: 300,
      height: 300,
      color: Colors.green,
    ),
    Positioned(
      top: 30,
      left: 30,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.yellow,
      ),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text(
        "Her er jeg!",
        style: TextStyle(fontSize: 18, color: Colors.white),
      ),
    ),
  ],
)

Her placeres en gul boks 30 pixels fra toppen og venstre kant, mens en tekst er sat 20 pixels fra bunden og højre kant. Positioned giver dig fuld kontrol over placeringen.

Hvorfor Bruge Stack i Flutter?

Praktisk Eksempel: Et Overlappende Kort
Her er et eksempel på et simpelt kort med et ikon og tekst ovenpå:

Stack(
  alignment: Alignment.center,
  children: [
    Container(
      width: 250,
      height: 150,
      decoration: BoxDecoration(
        color: Colors.orange,
        borderRadius: BorderRadius.circular(15),
      ),
    ),
    Positioned(
      top: 10,
      child: Icon(
        Icons.star,
        size: 50,
        color: Colors.white,
      ),
    ),
    Positioned(
      bottom: 10,
      child: Text(
        "Favorit",
        style: TextStyle(
          fontSize: 24,
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ],
)

Dette kodeeksempel skaber et orange kort med en stjerne øverst og ordet "Favorit" nederst. Det er en enkel, men effektiv brug af Stack.

Tips til Brug af Stack

Konklusion
Stack i Flutter er et alsidigt værktøj til at skabe overlappende og visuelt tiltalende brugergrænseflader. Uanset om du laver simple designs eller komplekse layouts, giver Stack dig friheden til at stable dine widgets præcis, som du ønsker. Prøv eksemplerne ovenfor i dine egne projekter, og eksperimenter med forskellige placeringer!
Har du spørgsmål om Stack eller Flutter? Lad os tage det videre sammen!