PricingLoginStart free
Mobilutveckling med Flutter · Lektion

Form-widgeten och controllers

Förstå hur widgeten `Form` används för att hantera flera textfält och styra användarinmatning med `TextEditingController`.

Lektion 1 av 411 steg

Form-widgeten och controllers är en gratis lektion i Mobilutveckling med Flutter på CoddyKit. Detta är lektion 1 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.

Formulär: grunderna i användarinmatning

Formulär är grundläggande i nästan alla interaktiva mobilapplikationer. De låter användare mata in data, oavsett om det gäller att logga in, registrera sig, uppdatera profiler eller skicka in information.

I Flutter byggs formulär med en kombination av widgets som är utformade för att hantera användarinmatning effektivt och robust.

Organisera inmatningsfält med Form

Widgeten Form fungerar som en behållare för att gruppera flera inmatningsfält. Den gör det möjligt att hantera fältens tillstånd, validera dem och spara deras värden på en gång.

Tänk på den som föräldern som övervakar alla sina inmatningsfält. Så här kommer du igång med en grundläggande formulärstruktur:

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('My Form App')),
        body: Center(
          child: Form(
            child: Column(
              children: [
                // Form fields will go here
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Ditt första inmatningsfält: TextFormField

Du kan använda TextField för inmatning, men TextFormField är särskilt utformad för att fungera smidigt i en Form-widget. Den har inbyggda funktioner för validering, sparande och visning av fel.

Låt oss lägga till ett enkelt TextFormField i vårt formulär:

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('My Form App')),
        body: Center(
          child: Form(
            child: Column(
              children: const [
                Padding(
                  padding: EdgeInsets.all(16.0),
                  child: TextFormField(
                    decoration: InputDecoration(
                      labelText: 'Enter your name',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Styr inmatningen: TextEditingController

För att läsa, ange eller ändra texten i ett TextFormField (eller TextField) programmatiskt använder du en TextEditingController. Den fungerar som en kommunikationsbrygga mellan din kod och textinmatningswidgeten.

Det är viktigt att frigöra controllers när de inte längre behövs för att förhindra minnesläckor, vanligtvis i metoden dispose() i en StatefulWidget.

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 _myController = TextEditingController();

  @override
  void dispose() {
    _myController.dispose(); // Important: dispose the controller!
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Controller Demo')),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField( // Using TextField for clarity
              controller: _myController,
              decoration: const InputDecoration(
                labelText: 'Type something',
                border: OutlineInputBorder(),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Koppla samman Controller och TextFormField

Nu kopplar vi vår TextEditingController till ett TextFormField. Då kan vi komma åt texten som användaren har angett direkt från controllern, till exempel när en knapp trycks ned.

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 _nameController = TextEditingController();

  @override
  void dispose() {
    _nameController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Controller Link')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextFormField(
                controller: _nameController,
                decoration: const InputDecoration(
                  labelText: 'Your Name',
                  border: OutlineInputBorder(),
                ),
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: () {
                  print('Name: ${_nameController.text}');
                },
                child: const Text('Get Name'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Hantera formulärtillstånd med GlobalKey

För att interagera med själva widgeten Form – till exempel för att validera alla dess fält eller spara deras tillstånd – behöver du kunna referera till den. Det gör du med hjälp av en GlobalKey<FormState>.

GlobalKey ger åtkomst till det interna tillståndet för Form, så att du kan utlösa åtgärder som validate() eller save() för alla dess underordnade widgetar.

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 _formKey = GlobalKey<FormState>(); // Declare the GlobalKey

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('GlobalKey Demo')),
        body: Form(
          key: _formKey, // Assign the GlobalKey to the Form
          child: Column(
            children: const [
              Padding(
                padding: EdgeInsets.all(16.0),
                child: TextFormField(
                  decoration: InputDecoration(
                    labelText: 'Email',
                    border: OutlineInputBorder(),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Skicka formuläret

Genom att kombinera Form, GlobalKey och TextEditingControllers kan du bygga ett fungerande formulär. När en skicka-knapp trycks ned kan du använda _formKey för att komma åt formulärets tillstånd och bearbeta inmatningen.

Här är ett exempel på ett inloggningsformulär där vi skriver ut de insamlade uppgifterna när formuläret skickas.

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 _formKey = GlobalKey<FormState>();
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  @override
  void dispose() {
    _usernameController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  void _submitForm() {
    // In a real app, you'd add validation here (covered in next lesson)
    print('Username: ${_usernameController.text}');
    print('Password: ${_passwordController.text}');
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Processing Login Data')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Login Form')),
        body: Form(
          key: _formKey,
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: [
                TextFormField(
                  controller: _usernameController,
                  decoration: const InputDecoration(labelText: 'Username'),
                ),
                TextFormField(
                  controller: _passwordController,
                  obscureText: true,
                  decoration: const InputDecoration(labelText: 'Password'),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 16.0),
                  child: ElevatedButton(
                    onPressed: _submitForm,
                    child: const Text('Submit'),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Hämta all formulärinmatning

När du har flera TextFormField-widgetar i formuläret, där varje widget är kopplad till sin egen TextEditingController, är det enkelt att hämta all användarinmatning. Du behöver bara komma åt egenskapen .text för varje controller.

Det gör det enkelt att samla in alla nödvändiga uppgifter när användaren är redo att skicka dem.

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 _emailController = TextEditingController();
  final TextEditingController _phoneController = TextEditingController();

  @override
  void dispose() {
    _emailController.dispose();
    _phoneController.dispose();
    super.dispose();
  }

  void _getData() {
    print('Email: ${_emailController.text}');
    print('Phone: ${_phoneController.text}');
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Email: ${_emailController.text}, Phone: ${_phoneController.text}')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Multi-Input Get')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextFormField(
                controller: _emailController,
                decoration: const InputDecoration(labelText: 'Email'),
                keyboardType: TextInputType.emailAddress,
              ),
              const SizedBox(height: 10),
              TextFormField(
                controller: _phoneController,
                decoration: const InputDecoration(labelText: 'Phone'),
                keyboardType: TextInputType.phone,
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: _getData,
                child: const Text('Show Data'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Återställa inmatningsfält

Efter att ett formulär har skickats, eller om du vill tillhandahålla en knapp för att rensa fältet, kan du enkelt återställa texten i ett TextFormField. Anropa bara metoden .clear() på den tillhörande TextEditingController, eller ange egenskapen .text till en tom sträng.

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 _inputController = TextEditingController();

  @override
  void dispose() {
    _inputController.dispose();
    super.dispose();
  }

  void _clearInput() {
    _inputController.clear(); // Clears the text in the TextFormField
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Clear Input Demo')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextFormField(
                controller: _inputController,
                decoration: const InputDecoration(
                  labelText: 'Type here',
                  border: OutlineInputBorder(),
                ),
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: _clearInput,
                child: const Text('Clear Text'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Kontroll av formulär och controller

Testa dina kunskaper om formulär och controllers i Flutter.

Besvara frågan i den interaktiva lektionen

Sammanfattning: formulär och controllers

I den här lektionen gick vi igenom grunderna för att bygga formulär för användarinmatning i Flutter:

  • Widgeten Form fungerar som en överordnad behållare för hantering av flera inmatningsfält.
  • TextFormField är den specialiserade widgeten för textinmatning i ett Form och erbjuder inbyggd formulärintegration.
  • TextEditingController låter dig styra, läsa och ändra texten i ett inmatningsfält programmatiskt.
  • En GlobalKey<FormState> används för att komma åt tillståndet för Form, vilket möjliggör åtgärder som validering eller sparande.
  • Kom ihåg att anropa dispose för dina TextEditingControllers för att förhindra minnesläckor!

Härnäst går vi djupare in på tekniker för inmatningsvalidering, så att dina formulär samlar in korrekta och användbara uppgifter!

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 gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Form-widgeten och controllers” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Mobilutveckling med Flutter, inklusive ”Form-widgeten och controllers”, 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 ”Form-widgeten och controllers”?

Förstå hur widgeten `Form` används för att hantera flera textfält och styra användarinmatning med `TextEditingController`. 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 1 av 4.

Hur lång tid tar lektionen ”Form-widgeten och controllers”?

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

  1. Form-widgeten och controllers
  2. Tekniker för validering av indata
  3. Anpassade formulärfält
  4. Fokus, tangentbord och inmatningsupplevelse
← Tillbaka till Mobilutveckling med Flutter