Mobiele ontwikkeling met Flutter · Les

Aangepaste formuliervelden

Maak herbruikbare aangepaste formuliervelden die zijn afgestemd op specifieke applicatiebehoeften en verbeter zo modulariteit en gebruikerservaring.

Les 3 van 411 stappen

Aangepaste formuliervelden 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.

Waarom aangepaste formuliervelden?

Bij het bouwen van apps heb je vaak vergelijkbare invoervelden nodig op verschillende schermen. Denk aan velden voor e-mailadressen, wachtwoorden of telefoonnummers.

Dezelfde TextFormField-code overal kopiëren en plakken kan leiden tot onoverzichtelijke code die moeilijk te onderhouden is. Daar komen aangepaste formuliervelden van pas!

Wat is een aangepast veld?

Een aangepast formulierveld is in feite een Flutter-Widget die andere invoerwidgets, zoals TextFormField, omhult en specifieke opmaak, validatie of gedrag toevoegt.

Herbruikbaarheid: definieer het één keer en gebruik het overal.
Consistentie: zorgt ervoor dat vergelijkbare invoer er hetzelfde uitziet en zich hetzelfde gedraagt.
Schone code: vermindert overbodige code en verbetert de leesbaarheid.

Basisstructuur van een aangepast veld

Laten we beginnen met een eenvoudig aangepast tekstinvoerveld. We maken een StatelessWidget die een TextFormField omhult. Zo kunnen we de basisuitstraling en het basisgedrag definiëren.

import 'package:flutter/material.dart';

class CustomTextInput extends StatelessWidget {
  final String hintText;

  const CustomTextInput({Key? key, required this.hintText}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
        hintText: hintText,
        border: OutlineInputBorder(),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Custom Field Demo')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: CustomTextInput(hintText: 'Enter your name'),
        ),
      ),
    ),
  ));
}

Controllers en validatie toevoegen

Om ons aangepaste veld echt bruikbaar te maken, moet het een TextEditingController accepteren om de waarde te beheren en een FormFieldValidator voor validatie. We geven deze door als parameters aan onze aangepaste widget.

import 'package:flutter/material.dart';

class CustomValidatedInput extends StatelessWidget {
  final String hintText;
  final TextEditingController controller;
  final String? Function(String?)? validator;

  const CustomValidatedInput({
    Key? key,
    required this.hintText,
    required this.controller,
    this.validator,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      decoration: InputDecoration(
        hintText: hintText,
        border: OutlineInputBorder(),
      ),
      validator: validator,
    );
  }
}

void main() {
  final TextEditingController _nameController = TextEditingController();
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Validated Field Demo')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Form(
            child: CustomValidatedInput(
              hintText: 'Enter your name (min 3 chars)',
              controller: _nameController,
              validator: (value) {
                if (value == null || value.length < 3) {
                  return 'Name must be at least 3 characters.';
                }
                return null;
              },
            ),
          ),
        ),
      ),
    ),
  ));
}

Een herbruikbaar e-mailveld

Laten we een specifiek aangepast veld voor e-mailinvoer maken. Het krijgt een vooraf ingesteld toetsenbordtype en een gebruikelijk validatiepatroon voor e-mailadressen. Zo kun je het eenvoudig consistent gebruiken.

import 'package:flutter/material.dart';

class CustomEmailField extends StatelessWidget {
  final TextEditingController controller;
  final String labelText;

  const CustomEmailField({
    Key? key,
    required this.controller,
    this.labelText = 'Email',
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      keyboardType: TextInputType.emailAddress,
      decoration: InputDecoration(
        labelText: labelText,
        border: OutlineInputBorder(),
        prefixIcon: Icon(Icons.email),
      ),
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter your email.';
        }
        if (!RegExp(r"^[a-zA-Z0-9.]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
            .hasMatch(value)) {
          return 'Please enter a valid email.';
        }
        return null;
      },
    );
  }
}

void main() {
  final TextEditingController _emailController = TextEditingController();
  final _formKey = GlobalKey<FormState>();

  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Custom Email Field Demo')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Form(
            key: _formKey,
            child: Column(
              children: [
                CustomEmailField(controller: _emailController),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {
                    if (_formKey.currentState!.validate()) {
                      print('Email: ${_emailController.text}');
                    }
                  },
                  child: Text('Submit'),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  ));
}

Algemene aangepaste tekstinvoer

Wat als je een aangepast veld nodig hebt dat flexibel genoeg is voor verschillende soorten tekstinvoer, zoals namen en adressen, maar toch aangepaste opmaak biedt? Je kunt meer eigenschappen doorgeven om het veld algemeen bruikbaar te maken.

import 'package:flutter/material.dart';

class GenericCustomTextField extends StatelessWidget {
  final TextEditingController controller;
  final String labelText;
  final TextInputType keyboardType;
  final bool obscureText;
  final String? Function(String?)? validator;

  const GenericCustomTextField({
    Key? key,
    required this.controller,
    required this.labelText,
    this.keyboardType = TextInputType.text,
    this.obscureText = false,
    this.validator,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      keyboardType: keyboardType,
      obscureText: obscureText,
      decoration: InputDecoration(
        labelText: labelText,
        border: OutlineInputBorder(),
      ),
      validator: validator,
    );
  }
}

void main() {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final _formKey = GlobalKey<FormState>();

  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Generic Field Demo')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Form(
            key: _formKey,
            child: Column(
              children: [
                GenericCustomTextField(
                  controller: _usernameController,
                  labelText: 'Username',
                  validator: (value) => value!.isEmpty ? 'Enter username' : null,
                ),
                SizedBox(height: 20),
                GenericCustomTextField(
                  controller: _passwordController,
                  labelText: 'Password',
                  obscureText: true,
                  validator: (value) => value!.length < 6 ? 'Min 6 chars' : null,
                ),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {
                    if (_formKey.currentState!.validate()) {
                      print('Username: ${_usernameController.text}');
                      print('Password: ${_passwordController.text}');
                    }
                  },
                  child: Text('Login'),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  ));
}

Interactieve elementen toevoegen

Aangepaste velden kunnen ook interactieve elementen bevatten, zoals pictogrammen aan het einde die van status veranderen. Een veelvoorkomend voorbeeld is een wachtwoordveld met een schakelaar om de tekst te tonen of te verbergen.

Daarvoor moet ons aangepaste veld een StatefulWidget zijn om de zichtbaarheidsstatus te beheren.

Aangepast wachtwoordveld met schakelaar

Zo bouw je een aangepast wachtwoordveld waarmee gebruikers de zichtbaarheid van het wachtwoord kunnen in- en uitschakelen. Let op het gebruik van StatefulWidget om de interne status _obscureText te beheren.

import 'package:flutter/material.dart';

class CustomPasswordField extends StatefulWidget {
  final TextEditingController controller;
  final String labelText;

  const CustomPasswordField({
    Key? key,
    required this.controller,
    this.labelText = 'Password',
  }) : super(key: key);

  @override
  _CustomPasswordFieldState createState() => _CustomPasswordFieldState();
}

class _CustomPasswordFieldState extends State<CustomPasswordField> {
  bool _obscureText = true;

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: widget.controller,
      obscureText: _obscureText,
      decoration: InputDecoration(
        labelText: widget.labelText,
        border: OutlineInputBorder(),
        prefixIcon: Icon(Icons.lock),
        suffixIcon: IconButton(
          icon: Icon(
            _obscureText ? Icons.visibility : Icons.visibility_off,
          ),
          onPressed: () {
            setState(() {
              _obscureText = !_obscureText;
            });
          },
        ),
      ),
      validator: (value) {
        if (value == null || value.length < 6) {
          return 'Password must be at least 6 characters.';
        }
        return null;
      },
    );
  }
}

void main() {
  final TextEditingController _passwordController = TextEditingController();
  final _formKey = GlobalKey<FormState>();

  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Password Field Demo')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Form(
            key: _formKey,
            child: Column(
              children: [
                CustomPasswordField(controller: _passwordController),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {
                    if (_formKey.currentState!.validate()) {
                      print('Password: ${_passwordController.text}');
                    }
                  },
                  child: Text('Submit'),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  ));
}

Voordelen van aangepaste velden

Het gebruik van aangepaste formuliervelden verbetert de ontwikkeling en het onderhoud van je applicatie aanzienlijk:

Minder dubbele code: Don't Repeat Yourself, waardoor je minder code nodig hebt.
Eenvoudiger bijwerken: wijzig één aangepast veld en alle exemplaren worden automatisch bijgewerkt.
Betere gebruikerservaring: zorgt voor een consistente en intuïtieve gebruikerservaring in je hele app.
Eenvoudigere logica: kapselt complexe validatie- of interface-logica in het veld zelf in.

Korte controle: aangepaste velden

Wat zijn de belangrijkste voordelen van het maken van aangepaste formuliervelden in Flutter?

Beantwoord dit in de interactieve les

Samenvatting: aangepaste formuliervelden

Je hebt geleerd hoe je aangepaste formuliervelden maakt in Flutter! Door bestaande invoerwidgets in je eigen StatelessWidget of StatefulWidget te wikkelen, kun je herbruikbare, consistente en onderhoudbare invoercomponenten bouwen.

Deze aanpak houdt je code overzichtelijk, centraliseert ontwerp en validatie en verbetert de gebruikerservaring aanzienlijk door een uniforme interface in je hele applicatie te bieden.

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 “Aangepaste formuliervelden” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Mobiele ontwikkeling met Flutter, waaronder “Aangepaste formuliervelden”, 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 “Aangepaste formuliervelden”?

Maak herbruikbare aangepaste formuliervelden die zijn afgestemd op specifieke applicatiebehoeften en verbeter zo modulariteit en gebruikerservaring. 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 “Aangepaste formuliervelden”?

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