Mobilutveckling med Flutter · Lektion

Interaktiva användargränssnittselement

Implementera vanliga interaktiva element som Buttons, TextFields, Images och Icons för att göra era applikationer engagerande.

Lektion 3 av 412 steg

Interaktiva användargränssnittselement är en gratis lektion i Mobilutveckling med Flutter på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Mobilutveckling med Flutter, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Engagerande användarinteraktion

Välkommen till arbetet med interaktiva gränssnitt! I Flutter är interaktiva element viktiga för att göra dina appar användbara och roliga att använda.

Med dessa element kan användare trycka, skriva och se dynamiskt innehåll. Vi utforskar vanliga element som knappar, textfält, bilder och ikoner.

Knappar: din första interaktion

Knappar är grundläggande för användaråtgärder. Flutter tillhandahåller flera typer av knappar, var och en anpassad för olika nivåer av framträdande:

ElevatedButton: En knapp enligt Material Design med en skugga, som signalerar hög framträdandegrad.
TextButton: En knapp med en textetikett utan höjd, för mindre framträdande åtgärder.
OutlinedButton: En knapp med en kantlinje, för åtgärder med medelhög framträdandegrad.

Alla knappar har vanligtvis en callback för onPressed, som definierar vad som händer när användaren trycker på knappen.

ElevatedButton i praktiken

ElevatedButton passar utmärkt för primära åtgärder. Se hur du skapar en knapp som skriver ut ett meddelande när användaren trycker på den.

Egenskapen onPressed tar emot en funktion som körs när knappen trycks ned.

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 och OutlinedButton

Utöver ElevatedButton kommer du ofta att använda TextButton och OutlinedButton.

TextButton passar bra för sekundära åtgärder, till exempel ”Avbryt” i en dialogruta.
OutlinedButton har en synlig kantlinje och passar för åtgärder som behöver lite mer framträdande än en TextButton, men mindre än en ElevatedButton.

Båda använder egenskapen onPressed för att hantera tryck.

Textfält för användarinmatning

För att ta emot textinmatning från användare tillhandahåller Flutter widgeten TextField. Den kan anpassas i hög grad för olika inmatningsbehov, från enkla namn till komplex text över flera rader.

Du använder ofta en TextEditingController tillsammans med TextField för att programmatiskt styra och hämta texten som användaren matar in.

Skapa ett inmatningsfält

Här är ett enkelt TextField som använder en TextEditingController. Lägg även till en knapp som visar vad användaren skrev.

Lägg märke till hur controllern skickas till TextField och används för att hämta den aktuella texten.

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'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Visa grafik med bilder

Bilder gör din app mer visuellt tilltalande. Flutters Image-widget kan läsa in bilder från flera olika källor:

Tillgångar: Image.asset('assets/my_image.png') för lokala bilder som paketerats med appen.
Nätverk: Image.network('https://example.com/image.jpg') för bilder från internet.
Filer: Image.file(File('path/to/image.jpg')) från enhetens filsystem.
Minne: Image.memory(bytes) från rå bytedata.

Läs in en bild från webben

Visa en bild direkt från en URL med hjälp av Image.network. Detta är vanligt för dynamiskt innehåll.

Se till att du har en internetanslutning för att kunna läsa in nätverksbilder.

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 för tydlighet och vägledning

Ikoner är små, symboliska bilder som snabbt förmedlar betydelse. Flutter har en omfattande uppsättning inbyggda ikoner från Material Design, som är tillgängliga via klassen Icons.

Du använder widgeten Icon för att visa dem. Ikoner passar utmärkt för navigering, för att visa åtgärder eller helt enkelt för att göra gränssnittet mer visuellt tilltalande.

Lägg till en enkel ikon

Det är enkelt att visa en ikon. Skicka bara en ikon från klassen Icons till widgeten Icon. Du kan även anpassa dess färg och storlek.

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,
          ),
        ),
      ),
    );
  }
}

Utmaning: interaktiva element

Vilka av följande sätt är giltiga för att visa en bild i Flutter med hjälp av konstruktorerna i widgeten Image?

Besvara frågan i den interaktiva lektionen

Sammanfattning av interaktiva gränssnitt

Bra jobbat! Du har lärt dig att implementera viktiga interaktiva gränssnittselement i Flutter. Vi har gått igenom:

Knappar: ElevatedButton, TextButton och OutlinedButton för användaråtgärder.
Textfält: För att samla in textinmatning från användaren.
Bilder: Visa grafik från tillgångar eller nätverket.
Ikoner: Lägga till symboliska visuella ledtrådar i appen.

Att behärska dessa element är avgörande för att bygga engagerande och användarvänliga Flutter-appar. Fortsätt öva!

Gratis att börja

Lär dig Dart med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 88

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Interaktiva användargränssnittselement” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Mobilutveckling med Flutter, inklusive ”Interaktiva användargränssnittselement”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Vad lär jag mig i ”Interaktiva användargränssnittselement”?

Implementera vanliga interaktiva element som Buttons, TextFields, Images och Icons för att göra era applikationer engagerande. Ni övar på Mobilutveckling med Flutter med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Mobilutveckling med Flutter?

Du behöver inga förkunskaper. Utbildningen i Mobilutveckling med Flutter på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Interaktiva användargränssnittselement”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Mobilutveckling med Flutter-lektionen?

Ja. Varje Mobilutveckling med Flutter-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Tillståndslösa och tillståndsfulla widgets
Grundläggande layoutwidgets
Interaktiva användargränssnittselement
Skapa rullningsbara listor med ListView

← Tillbaka till Mobilutveckling med Flutter