How to Create a Custom TextField in Flutter?

You can create a custom TextField in Flutter by extending the TextField widget and overriding its properties. This allows you to modify its appearance and behavior to fit your specific needs.

Here's a breakdown of the process:

1. Create a Custom TextField Widget

class CustomTextField extends StatelessWidget {
  final String? hintText;
  final TextEditingController? controller;
  final TextInputType? keyboardType;
  final Function(String)? onChanged;
  final Function(String)? onSubmitted;

  const CustomTextField({
    Key? key,
    this.hintText,
    this.controller,
    this.keyboardType,
    this.onChanged,
    this.onSubmitted,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        hintText: hintText,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10.0),
          borderSide: BorderSide.none,
        ),
        filled: true,
        fillColor: Colors.grey[200],
      ),
      controller: controller,
      keyboardType: keyboardType,
      onChanged: onChanged,
      onSubmitted: onSubmitted,
    );
  }
}

2. Customize the Appearance

You can customize the appearance of your custom TextField by modifying the InputDecoration properties. For example, you can change the border style, add a prefix or suffix icon, or adjust the padding.

• Border Style: You can use different InputBorder types like OutlineInputBorder, UnderlineInputBorder, or RoundedRectangleBorder to achieve various border styles.
• Prefix/Suffix Icons: You can add icons before or after the text field using the prefixIcon or suffixIcon properties.
• Padding: You can adjust the padding around the text field using the contentPadding property.

3. Modify the Behavior

You can modify the behavior of your custom TextField by overriding its properties like keyboardType, onChanged, and onSubmitted.

• keyboardType: You can specify the type of keyboard to display using the keyboardType property.
• onChanged: You can define a callback function that is triggered whenever the text field's content changes using the onChanged property.
• onSubmitted: You can define a callback function that is triggered when the user submits the text field's content using the onSubmitted property.

Example Usage

// In your main widget:
CustomTextField(
  hintText: 'Enter your name',
  controller: _nameController,
  keyboardType: TextInputType.name,
  onChanged: (text) {
    // Handle text change
  },
  onSubmitted: (text) {
    // Handle text submission
  },
)

By creating a custom TextField, you can ensure a consistent look and feel across your application while also tailoring its behavior to meet your specific requirements.