Simple TextField
Simple TextField allowing to capture free text up to 60 characters max over 2 lines. A button (cross) is displayed as a suffix icon to clear the input data. The text capture is completed when Enter key is pressed.
import 'package:flutter/material.dart';
class ShowTextField extends StatefulWidget {
const ShowTextField({Key? key}) : super(key: key);
@override
_ShowTextFieldState createState() => _ShowTextFieldState();
}
class _ShowTextFieldState extends State<ShowTextField> {
// Controller for text editing
final TextEditingController _controller = TextEditingController();
final _focusComments = FocusNode();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Simple Text Field")),
body: Container(
padding: const EdgeInsets.all(20),
alignment: Alignment.center,
child: Center(
child: DisplayTextField(context)
)
)
);
}
Widget DisplayTextField(BuildContext context) {
return Expanded(
child: TextField(
controller: _controller,
focusNode: _focusComments,
textCapitalization: TextCapitalization.sentences,
maxLength: 100,
maxLines: 2,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.done,
//maxLengthEnforcement: MaxLengthEnforcement.enforced,
decoration: InputDecoration(
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(30))
),
labelText: "Enter your comments",
suffixIcon: IconButton(
onPressed: _controller.clear,
icon: const Icon(Icons.clear)
)
),
onSubmitted: (value) => print("Captured text = $value"),
),
);
}
}
