Mobiludvikling med Flutter · Lektion

Interaktive brugergrænsefladeelementer

Implementer almindelige interaktive elementer som Buttons, TextFields, Images og Icons, så Deres applikationer bliver engagerende.

Lektion 3 af 412 trin

Interaktive brugergrænsefladeelementer er en gratis Mobiludvikling med Flutter-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Mobiludvikling med Flutter, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Engagerende brugerinteraktion

Velkommen til arbejdet med interaktive brugergrænseflader! I Flutter er interaktive elementer afgørende for at gøre dine apps nyttige og sjove at bruge.

Disse elementer lader brugerne trykke, skrive og se dynamisk indhold. Vi ser på almindelige elementer som knapper, tekstfelter, billeder og ikoner.

Knapper: Din første interaktion

Knapper er grundlæggende for brugerhandlinger. Flutter tilbyder flere knaptyper, som hver især passer til forskellige niveauer af fremhævelse:

ElevatedButton: En knap i Material Design med en skygge, der angiver høj fremhævelse.
TextButton: En knap med en tekstetiket uden højde, til mindre fremtrædende handlinger.
OutlinedButton: En knap med en kant, til handlinger med middel fremhævelse.

Alle knapper har typisk et onPressed-callback, som angiver, hvad der sker, når der trykkes på knappen.

ElevatedButton i praksis

ElevatedButton er velegnet til primære handlinger. Lad os se, hvordan du opretter en, der udskriver en meddelelse, når der trykkes på den.

Egenskaben onPressed tager en funktion, der udføres, når der trykkes på knappen.

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('Elevated Button')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button Tapped!');
            },
            child: const Text('Tap Me!')
          ),
        ),
      ),
    );
  }
}

TextButton og OutlinedButton

Ud over ElevatedButton kommer du ofte til at bruge TextButton og OutlinedButton.

TextButton er ideel til sekundære handlinger, f.eks. "Annuller" i en dialog.
OutlinedButton giver en synlig kant og er velegnet til handlinger, der kræver lidt mere fremhævelse end en TextButton, men mindre end en ElevatedButton.

De deler begge egenskaben onPressed til håndtering af tryk.

Textfelter til brugerinput

Hvis du vil modtage tekstinput fra brugere, tilbyder Flutter widgetten TextField. Den kan i høj grad tilpasses forskellige inputbehov, fra enkle navne til kompleks tekst på flere linjer.

Du bruger ofte en TextEditingController sammen med TextField til programmatisk at styre og hente den tekst, brugeren har indtastet.

Oprettelse af et inputfelt

Her er et grundlæggende TextField, der bruger en TextEditingController. Vi tilføjer også en knap, der viser det, brugeren har skrevet.

Bemærk, hvordan controlleren gives videre til TextField og bruges til at hente den aktuelle tekst.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose(); // Important to dispose controllers!
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Text Field')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: _controller,
                decoration: const InputDecoration(
                  labelText: 'Enter your name',
                  border: OutlineInputBorder(),
                ),
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: () {
                  print('User typed: ${_controller.text}');
                },
                child: const Text('Show Input'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Visuelle elementer med billeder

Billeder gør din app mere visuelt tiltalende. Flutters Image-widget kan indlæse billeder fra forskellige kilder:

Aktiver: Image.asset('assets/my_image.png') til lokale billeder, der er inkluderet i din app.
Netværk: Image.network('https://example.com/image.jpg') til billeder fra internettet.
Filer: Image.file(File('path/to/image.jpg')) fra enhedens filsystem.
Hukommelse: Image.memory(bytes) fra rå byte-data.

Indlæsning af et billede fra nettet

Lad os vise et billede direkte fra en URL ved hjælp af Image.network. Det er almindeligt ved dynamisk indhold.

Sørg for, at du har internetforbindelse, så netværksbilleder kan indlæses.

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('Network Image')),
        body: Center(
          child: Image.network(
            'https://flutter.dev/assets/images/shared/brand/flutter/logo/flutter-lockup-horizontal.png',
            width: 250,
          ),
        ),
      ),
    );
  }
}

Ikoner til tydelighed og vejledning

Ikoner er små, symbolske billeder, der hurtigt formidler en betydning. Flutter har et stort udvalg af indbyggede Material Design-ikoner, som er tilgængelige via klassen Icons.

Du bruger widgetten Icon til at vise dem. Ikoner er fremragende til navigation, til at angive handlinger eller til blot at tilføje et visuelt pift.

Tilføjelse af et enkelt ikon

Det er enkelt at vise et ikon. Du skal blot sende et ikon fra klassen Icons til widgetten Icon. Du kan også tilpasse dets farve og størrelse.

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('Flutter Icon')),
        body: const Center(
          child: Icon(
            Icons.star, // A star icon
            color: Colors.amber,
            size: 100.0,
          ),
        ),
      ),
    );
  }
}

Udfordring om interaktive elementer

Hvilke af de følgende metoder er gyldige til at vise et billede i Flutter ved hjælp af konstruktørerne til widgetten Image?

Besvar den i den interaktive lektion

Afrunding af interaktive brugergrænseflader

Flot arbejde! Du har lært at implementere vigtige interaktive elementer i Flutters brugergrænseflader. Vi har gennemgået:

Knapper: ElevatedButton, TextButton, OutlinedButton til brugerhandlinger.
Tekstfelter: Til indsamling af tekstinput fra brugeren.
Billeder: Visning af visuelle elementer fra aktiver eller netværket.
Ikoner: Tilføjelse af symbolske visuelle signaler til din app.

Det er afgørende at have styr på disse elementer, når du bygger engagerende og brugervenlige Flutter-applikationer. Bliv ved med at øve dig!

Gratis at komme i gang

Lær Dart med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 22
Lektioner: 88

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Interaktive brugergrænsefladeelementer” gratis?

Ja — alle 3 lektioner i læringssporet Mobiludvikling med Flutter, inklusive “Interaktive brugergrænsefladeelementer”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Interaktive brugergrænsefladeelementer”?

Implementer almindelige interaktive elementer som Buttons, TextFields, Images og Icons, så Deres applikationer bliver engagerende. Du øver dig i Mobiludvikling med Flutter med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Mobiludvikling med Flutter?

Der kræves ingen tidligere erfaring. Mobiludvikling med Flutter på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Interaktive brugergrænsefladeelementer”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Mobiludvikling med Flutter-lektion?

Ja. Alle Mobiludvikling med Flutter-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Mobiludvikling med Flutter