Part 4: Navigation and Routing

9. Handling User Input (Forms, TextFields, Validation)

Handling user input efficiently in Flutter involves using TextField, Form, TextEditingController, and validating inputs.

9.1 TextField and TextEditingController

The TextField widget allows users to input text, and the TextEditingController manages the text entered in a TextField.

class InputExample extends StatefulWidget {
  @override
  _InputExampleState createState() => _InputExampleState();
}

class _InputExampleState extends State<InputExample> {
  final TextEditingController _controller = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Enter your name',
              ),
            ),
            ElevatedButton(
              onPressed: () {
                print('Name entered: ${_controller.text}');
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

9.2 Using Forms and Validation

Flutter’s Form widget is useful for validating multiple inputs at once. Use a GlobalKey to access the form’s state and validate inputs.

Code Example: Form with Validation

class FormExample extends StatefulWidget {
  @override
  _FormExampleState createState() => _FormExampleState();
}

class _FormExampleState extends State<FormExample> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Enter your name'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter some text';
                  }
                  return null;
                },
              ),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // Process data if the form is valid
                    print('Form is valid');
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Best Practices for Input and Forms

1. Always dispose of controllers to avoid memory leaks.
2. Validate user input before using it, especially in forms where multiple inputs are involved.

10. Lists and Dynamic UI in Flutter

Lists are a crucial part of building dynamic apps. Flutter offers ListView to handle scrolling, and it supports both static and dynamic lists.

10.1 Static Lists Using ListView

A ListView is a scrollable list of widgets. Let’s start with a simple static list.

class StaticListViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Static ListView')),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text('Item 1'),
          ),
          ListTile(
            title: Text('Item 2'),
          ),
          ListTile(
            title: Text('Item 3'),
          ),
        ],
      ),
    );
  }
}

10.2 Dynamic Lists Using ListView.builder

For lists where the number of items is unknown or changes dynamically, use ListView.builder().
Code Example: Dynamic ListView

class DynamicListViewExample extends StatelessWidget {
  final List<String> items = List<String>.generate(100, (i) => 'Item $i');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Dynamic ListView')),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('${items[index]}'),
          );
        },
      ),
    );
  }
}