Mobilutvikling med Flutter · leksjon

Grunnleggende layout-widgets

Bli godt kjent med viktige layout-widgets som Row, Column, Container og Stack for å lage strukturerte og responsive brukergrensesnitt.

Leksjon 2 av 412 trinn

Grunnleggende layout-widgets er en gratis leksjon i Mobilutvikling med Flutter på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving 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.

Hvorfor layout er viktig

I Flutter er alt en widget! For å bygge komplekse og flotte brukergrensesnitt må du plassere disse widgetene på skjermen.

Layout-widgets er spesielle widgets som hjelper deg med å organisere andre widgets ved å definere størrelsen og plasseringen deres, samt hvordan de samhandler med hverandre.

Møt Container

Container-widgeten er en av de mest allsidige layout-widgetene. Tenk på den som en tilpassbar boks som kan inneholde én underordnet widget.

Du kan bruke den til å:

Legge til innvendig eller utvendig marg
Angi bakgrunnsfarger eller dekorasjoner
Definere en bestemt bredde og høyde
Transformere plasseringen eller rotasjonen

Enkel farget boks

La oss opprette en grunnleggende Container med en underordnet Text-widget. Legg merke til hvordan vi angir color og padding.

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Container Demo')),
        body: Center(
          child: Container(
            padding: const EdgeInsets.all(20.0),
            color: Colors.blueAccent,
            child: const Text(
              'Hello from Container!',
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
          ),
        ),
      ),
    );
  }
}

Horisontalt med Row

Når De må plassere flere widgeter ved siden av hverandre horisontalt, er Row-widgeten det naturlige valget. Den tar imot en liste med widgeter som sine children.

Row prøver automatisk å få plass til de underordnede widgetene langs den horisontale aksen, og De kan styre justeringen deres i raden.

Rad med knapper

Slik kan De plassere tre knapper ved siden av hverandre ved hjelp av en Row. Vi legger også til litt mellomrom mellom dem.

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Row Demo')),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
              ElevatedButton(onPressed: () {}, child: const Text('Button 2')),
              ElevatedButton(onPressed: () {}, child: const Text('Button 3')),
            ],
          ),
        ),
      ),
    );
  }
}

Vertikalt med Column

Akkurat som Row ordner widgeter horisontalt, ordner Column-widgeten dem vertikalt, den ene under den andre.

Den tar også imot en liste med children og lar Dem styre den vertikale justeringen.

Stablede tekstfelt

La oss opprette et enkelt skjema som ligner et innloggingsskjema, ved å bruke en Column til å stable to TextField-widgeter og en knapp vertikalt.

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Column Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Padding(
                padding: EdgeInsets.all(8.0),
                child: TextField(
                  decoration: InputDecoration(labelText: 'Username'),
                ),
              ),
              const Padding(
                padding: EdgeInsets.all(8.0),
                child: TextField(
                  obscureText: true,
                  decoration: InputDecoration(labelText: 'Password'),
                ),
              ),
              ElevatedButton(onPressed: () {}, child: const Text('Login')),
            ],
          ),
        ),
      ),
    );
  }
}

Justere underordnede widgeter

Både Row og Column bruker to viktige egenskaper for justering:

mainAxisAlignment: Hvordan underordnede widgeter plasseres langs hovedaksen (horisontalt for Row, vertikalt for Column). Eksempler: start, center, end, spaceAround.
crossAxisAlignment: Hvordan underordnede widgeter plasseres langs den vinkelrette aksen (vertikalt for Row, horisontalt for Column). Eksempler: start, center, end, stretch.

Disse gir Dem fin kontroll over layoutene!

Overlapping med Stack

Noen ganger må De plassere widgeter oppå hverandre, for eksempel tekst over et bilde. Det er her Stack-widgeten kommer inn.

Stack lar Dem legge flere underordnede widgeter i lag. De kan styre den nøyaktige plasseringen deres i stabelen ved hjelp av Positioned-widgeten.

Bilde med tekstoverlegg

La oss plassere tekst direkte oppå et bilde ved hjelp av en Stack. Vi bruker Positioned til å plassere teksten nøyaktig.

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Stack Demo')),
        body: Center(
          child: SizedBox(
            width: 300,
            height: 200,
            child: Stack(
              children: <Widget>[
                Image.network(
                  'https://picsum.photos/300/200',
                  fit: BoxFit.cover,
                ),
                const Positioned(
                  bottom: 10,
                  left: 10,
                  child: Text(
                    'Beautiful Scenery',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      shadows: [
                        Shadow(blurRadius: 5, color: Colors.black)
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Layoututfordring

Hvilke av de følgende widgetene brukes hovedsakelig til å ordne flere underordnede widgeter i én retning (enten horisontalt eller vertikalt)?

Besvar den i den interaktive leksjonen

Dere har mestret layoutene!

Godt jobbet! Nå har De fått kontroll på de grunnleggende layoutwidgetene i Flutter:

Container: En allsidig boks for én underordnet widget, med støtte for styring av innvendig marg, utvendig marg, farge og størrelse.
Row: Ordner flere underordnede widgeter horisontalt.
Column: Ordner flere underordnede widgeter vertikalt.
Stack: Legger underordnede widgeter oppå hverandre, ofte sammen med Positioned.

Det er viktig å forstå disse for å kunne bygge alle typer Flutter-grensesnitt!

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 «Grunnleggende layout-widgets» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Mobilutvikling med Flutter, inkludert «Grunnleggende layout-widgets», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Hva lærer jeg i «Grunnleggende layout-widgets»?

Bli godt kjent med viktige layout-widgets som Row, Column, Container og Stack for å lage strukturerte og responsive brukergrensesnitt. 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 2 av 4.

Hvor lang tid tar leksjonen «Grunnleggende layout-widgets»?

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

← Tilbake til Mobilutvikling med Flutter