Flutter: En Guide til Brug af Stack til Overlappende UI

Hacza · 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

Alignment: Bestemmer, hvordan børnene i stakken justeres.
Fit: Kontrollerer, hvordan widgets tilpasser sig Stack-området.
Overflow: Håndterer, hvad der sker, hvis indholdet overskrider grænserne.

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

Kode Vælg

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:

Kode Vælg

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?

Lagdelte Designs: Ideel til at kombinere billeder, tekst eller ikoner i lag.
Fleksibilitet: Gør det nemt at tilpasse placeringen af elementer.
Visuel Effekt: Perfekt til moderne UI med overlappende effekter som kort eller badges.

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

Kode Vælg

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

Juster Alignment: Brug alignment-egenskaben til at styre standardplaceringen.
Kombiner med Positioned: For præcis placering er Positioned din bedste ven.
Hold det simpelt: Undgå for mange lag for at sikre god ydeevne.

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!

Flutter: En Guide til Brug af Stack til Overlappende UI

Hacza