Mobiele ontwikkeling met Flutter · Les

Interactieve UI-elementen

Implementeer gangbare interactieve elementen zoals Buttons, TextFields, Images en Icons om uw applicaties aantrekkelijker te maken.

Les 3 van 412 stappen

Interactieve UI-elementen is een gratis Mobiele ontwikkeling met Flutter-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Mobiele ontwikkeling met Flutter. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Aantrekkelijke gebruikersinteractie

Welkom bij het maken van interactieve gebruikersinterfaces! In Flutter zijn interactieve elementen belangrijk om je apps nuttig en prettig in gebruik te maken.

Met deze elementen kunnen gebruikers tikken, typen en dynamische inhoud bekijken. We verkennen veelgebruikte elementen zoals knoppen, tekstvelden, afbeeldingen en pictogrammen.

Knoppen: je eerste interactie

Knoppen zijn essentieel voor acties van gebruikers. Flutter biedt verschillende knoptypen, elk geschikt voor een ander nadrukniveau:

ElevatedButton: een knop volgens Material Design met een schaduw, voor acties met veel nadruk.
TextButton: een knop met een tekstlabel zonder verhoging, voor minder opvallende acties.
OutlinedButton: een knop met een rand, voor acties met gemiddelde nadruk.

Alle knoppen hebben meestal een callback onPressed, die bepaalt wat er gebeurt wanneer je op de knop tikt.

ElevatedButton in actie

ElevatedButton is geschikt voor primaire acties. Laten we bekijken hoe je er een maakt die een bericht afdrukt wanneer je erop tikt.

De eigenschap onPressed accepteert een functie die wordt uitgevoerd wanneer de knop wordt ingedrukt.

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

Naast ElevatedButton gebruik je vaak TextButton en OutlinedButton.

TextButton is ideaal voor secundaire acties, zoals 'Annuleren' in een dialoogvenster.
OutlinedButton heeft een zichtbare rand en is geschikt voor acties die iets meer nadruk nodig hebben dan een TextButton, maar minder dan een ElevatedButton.

Beide gebruiken de eigenschap onPressed om tikken af te handelen.

TextFields voor gebruikersinvoer

Voor tekstinvoer door gebruikers biedt Flutter de TextField-widget. Deze is uitgebreid aanpasbaar voor verschillende invoerbehoeften, van eenvoudige namen tot complexe tekst over meerdere regels.

Je gebruikt vaak een TextEditingController met TextField om de tekstinvoer van de gebruiker programmatisch te beheren en op te halen.

Een invoerveld bouwen

Dit is een eenvoudig TextField dat een TextEditingController gebruikt. We voegen ook een knop toe om weer te geven wat de gebruiker heeft getypt.

Let op hoe de controller aan het TextField wordt doorgegeven en wordt gebruikt om de huidige tekst op te halen.

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

Beelden tonen met afbeeldingen

Afbeeldingen geven je app een visuele uitstraling. De Flutter-widget Image kan afbeeldingen uit verschillende bronnen laden:

Assets: Image.asset('assets/my_image.png') voor lokale afbeeldingen die in je app zijn opgenomen.
Netwerk: Image.network('https://example.com/image.jpg') voor afbeeldingen van internet.
Bestanden: Image.file(File('path/to/image.jpg')) uit het bestandssysteem van het apparaat.
Geheugen: Image.memory(bytes) uit onbewerkte bytegegevens.

Een afbeelding van het web laden

Laten we met Image.network rechtstreeks een afbeelding uit een URL weergeven. Dit komt vaak voor bij dynamische inhoud.

Zorg dat je een internetverbinding hebt om netwerkafbeeldingen te laden.

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

Pictogrammen voor duidelijkheid en aanwijzingen

Pictogrammen zijn kleine, symbolische afbeeldingen die snel betekenis overbrengen. Flutter heeft een uitgebreide verzameling ingebouwde Material Design-pictogrammen, die beschikbaar zijn via de klasse Icons.

Je gebruikt de widget Icon om ze weer te geven. Pictogrammen zijn uitstekend geschikt voor navigatie, het aangeven van acties of het toevoegen van visuele aantrekkingskracht.

Een eenvoudig pictogram toevoegen

Een pictogram weergeven is eenvoudig. Geef gewoon een pictogram uit de klasse Icons door aan de widget Icon. Je kunt ook de kleur en grootte aanpassen.

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

Uitdaging: interactieve elementen

Welke van de volgende manieren zijn geldig om met de constructors van de widget Image een afbeelding in Flutter weer te geven?

Beantwoord dit in de interactieve les

Interactieve gebruikersinterface afronden

Goed gedaan! Je hebt geleerd hoe je essentiële interactieve elementen voor gebruikersinterfaces in Flutter implementeert. We hebben behandeld:

Knoppen: ElevatedButton, TextButton en OutlinedButton voor acties van gebruikers.
TextFields: voor het verzamelen van tekstinvoer van gebruikers.
Afbeeldingen: voor het weergeven van beelden uit assets of het netwerk.
Pictogrammen: voor het toevoegen van symbolische visuele aanwijzingen aan je app.

Het beheersen van deze elementen is cruciaal voor het bouwen van aantrekkelijke en gebruiksvriendelijke Flutter-applicaties. Blijf oefenen!

Gratis beginnen

Leer Dart met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Interactieve UI-elementen” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Mobiele ontwikkeling met Flutter, waaronder “Interactieve UI-elementen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Wat leer ik in “Interactieve UI-elementen”?

Implementeer gangbare interactieve elementen zoals Buttons, TextFields, Images en Icons om uw applicaties aantrekkelijker te maken. Je oefent met Mobiele ontwikkeling met Flutter door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Mobiele ontwikkeling met Flutter te beginnen?

Ervaring vooraf is niet nodig. Mobiele ontwikkeling met Flutter op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Interactieve UI-elementen”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Mobiele ontwikkeling met Flutter?

Ja. Elke les over Mobiele ontwikkeling met Flutter bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Mobiele ontwikkeling met Flutter