0Pricing
Flutter Mobile Development · Lekcja

Widget Form i kontrolery

Zrozumieją Państwo, jak używać widgetu `Form` do zarządzania wieloma polami tekstowymi oraz kontrolować dane wprowadzane przez użytkownika za pomocą `TextEditingController`.

Widget Form i kontrolery to bezpłatna lekcja Flutter Mobile Development na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Flutter Mobile Development, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Flutter Mobile Development zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Forms: User Input Essentials

Forms are fundamental for almost any interactive mobile application. They allow users to input data, whether it's for logging in, signing up, updating profiles, or submitting information.

In Flutter, forms are built using a combination of widgets designed to handle user input efficiently and robustly.

Organizing Inputs with Form

The Form widget acts as a container for grouping multiple input fields. It provides a way to manage the state of these fields, validate them, and save their values all at once.

Think of it as the parent that oversees all its input children. Here's how to start a basic form structure:

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

Your First Input: TextFormField

While you can use TextField for input, TextFormField is specifically designed to work seamlessly within a Form widget. It offers built-in features for validation, saving, and error display.

Let's add a simple TextFormField to our form:

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

Controlling Input: TextEditingController

To programmatically read, set, or modify the text in a TextFormField (or TextField), you use a TextEditingController. It acts as a communication bridge between your code and the text input widget.

It's crucial to dispose of controllers when they're no longer needed to prevent memory leaks, typically in the dispose() method of a 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(),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Linking Controller & TextFormField

Now, let's connect our TextEditingController to a TextFormField. This allows us to access the text entered by the user directly from the controller, for example, when a button is pressed.

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

Managing Form State with GlobalKey

To interact with the Form widget itself – for example, to validate all its fields or save their state – you need a way to reference it. This is done using a GlobalKey<FormState>.

The GlobalKey provides access to the Form's internal state, allowing you to trigger actions like validate() or save() on all its children.

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

Submitting Your Form

Combining Form, GlobalKey, and TextEditingControllers allows you to build a functional form. When a submit button is pressed, you can use the _formKey to access the form's state and process the input.

Here's a login form example where we print the collected data upon submission.

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

Retrieving All Form Inputs

When you have multiple TextFormField widgets in your form, each linked to its own TextEditingController, retrieving all user inputs is straightforward. You simply access the .text property of each controller.

This makes it easy to collect all necessary data when the user is ready to submit their information.

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

Resetting Input Fields

After a form submission, or if you want to provide a 'Clear' button, you can easily reset the text in a TextFormField. Simply call the .clear() method on its associated TextEditingController, or set its .text property to an empty string.

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

Form & Controller Check

Test your understanding of Flutter forms and controllers.

Recap: Forms & Controllers

In this lesson, we explored the foundational elements for building user input forms in Flutter:

  • The Form widget acts as a parent container for managing multiple input fields.
  • TextFormField is the specialized widget for text input within a Form, offering built-in form integration.
  • The TextEditingController allows you to programmatically control, read, and modify the text in an input field.
  • A GlobalKey<FormState> is used to access the Form's state, enabling actions like validation or saving.
  • Remember to dispose of your TextEditingControllers to prevent memory leaks!

Next, we'll dive deeper into input validation techniques to ensure your forms collect correct and useful data!

Często zadawane pytania

Czy lekcja „Widget Form i kontrolery” jest bezpłatna?

Tak — pełny tekst „Widget Form i kontrolery” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Flutter Mobile Development, przejdź na CoddyKit PRO. Kurs Flutter Mobile Development zawiera 4 lekcji w sumie.

Co nauczysz się w „Widget Form i kontrolery”?

Zrozumieją Państwo, jak używać widgetu `Form` do zarządzania wieloma polami tekstowymi oraz kontrolować dane wprowadzane przez użytkownika za pomocą `TextEditingController`. Ćwiczysz Flutter Mobile Development z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Flutter Mobile Development?

Nie wymagamy żadnego doświadczenia. Flutter Mobile Development w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Widget Form i kontrolery”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Flutter Mobile Development?

Tak. Każda lekcja Flutter Mobile Development zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Widget Form i kontrolery
  2. Techniki walidacji danych wejściowych
  3. Niestandardowe pola formularzy
  4. Fokus, klawiatura i UX wprowadzania danych
← Powrót do Flutter Mobile Development