TextField Widget

Introduction of TextField Widget

In Flutter, the primary widget for handling user input for text is the TextField widget. The TextField widget provides a way to accept and display text input from the user.

Here is an explanation of some key properties of the TextField widget:

controller Property: Allows you to control the text and selection of the TextField. It’s often used with a TextEditingController.

TextEditingController _textController = TextEditingController();

TextField(
  controller: _textController,
  // Other properties...
),

keyboardType Property: Specifies the type of keyboard to display, such as numeric, email, URL, etc.

TextField(
  keyboardType: TextInputType.emailAddress,
  // Other properties...
),

obscureText Property: Hides the entered text, usually used for password fields.

TextField(
  obscureText: true,
  // Other properties...
),

onChanged Callback: Called whenever the text in the TextField changes.

TextField(
  onChanged: (value) {
    print('Text changed: $value');
  },
  // Other properties...
),

onSubmitted Callback: Called when the user submits the text (e.g., presses the “Enter” key).

TextField(
  onSubmitted: (value) {
    print('Text submitted: $value');
  },
  // Other properties...
),

textInputAction Property: Specifies the action button on the keyboard, such as “Done” or “Next.”

TextField(
  textInputAction: TextInputAction.done,
  // Other properties...
)

style Property: Defines the style of the entered text.

TextField(
  style: TextStyle(color: Colors.blue),
  // Other properties...
),

maxLines Property: Sets the maximum number of lines for the input. By default, it is 1.

TextField(
  maxLines: 3,
  // Other properties...
),

enabled Property: Determines whether the TextField is editable.

TextField(
  enabled: false,
  // Other properties...
),

Usage:

TextField(
  controller: _textController,
  decoration: InputDecoration(
    labelText: 'Enter your name',
    hintText: 'John Doe',
    border: OutlineInputBorder(),
  ),
  keyboardType: TextInputType.text,
  onChanged: (value) {
    print('Text changed: $value');
  },
  onSubmitted: (value) {
    print('Text submitted: $value');
  },
  // Other properties...
),

Final Code: This is the final code with the combination of some above TextField widget properties.

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _textController = TextEditingController();

  String userPost = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              child: Container(
                child: Center(
                  child: Text(
                    userPost,
                    style: TextStyle(fontSize: 25, fontWeight: FontWeight.w600),
                  ),
                ),
              ),
            ),
            TextField(
              controller: _textController,
              decoration: InputDecoration(
                hintText: 'What\'s on your mind',
                border: OutlineInputBorder(),
                suffixIcon: IconButton(
                  icon: Icon(Icons.clear),
                  onPressed: () {
                    _textController.clear();
                  },
                ),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            MaterialButton(
              padding: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
              onPressed: () {
                setState(() {
                  userPost = _textController.text;
                });
              },
              color: Colors.deepOrange,
              child: Text(
                'Submit',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

In this example, a basic TextField is created with various properties, including a controller for text manipulation, decoration for styling, and callbacks for handling changes and submissions. Customize the properties based on your specific input requirements.

Thank for visiting Hybrid App Development
Posted by Hussam HM