TextField in Flutter with a TextEditingController — one of the most important tools for managing user input.
Source Code
import 'package:flutter/material.dart';
class MyTextFieldExample extends StatefulWidget {
@override
_MyTextFieldExampleState createState() => _MyTextFieldExampleState();
}
class _MyTextFieldExampleState extends State<MyTextFieldExample> {
final TextEditingController _controller = TextEditingController();
@override
void dispose() {
_controller.dispose(); // Always dispose controllers in StatefulWidgets
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('TextField Example')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: _controller,
decoration: InputDecoration(
labelText: 'Enter your name',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.person),
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
print('User typed: ${_controller.text}');
},
child: Text('Submit'),
),
],
),
),
);
}
}
Ai Code Analizer
🔧 Key Elements
| Element | Purpose |
|---|---|
TextEditingController | Reads or modifies the text input. |
controller.text | Accesses the current text value. |
dispose() | Required to free resources when widget is removed. |
InputDecoration | Adds visual features like label, icon, border. |