Custom TextFormField Flutter suffix icon

Issue

I want to make TextFormField with optional suffixIcon (IconButton) how to do that?

import 'package:flutter/material.dart';

class CustomTextFormField extends StatelessWidget {
  final String text;
  final String hintText;
  final bool obsecureText;
  final IconButton iconButton;

  const CustomTextFormField({
    Key? key,
    required this.text,
    required this.hintText,
    this.obsecureText = false,
    this.iconButton = IconButton() //I dont know the logic
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(text),
        const SizedBox(height: 8.0),
        Form(
          child: TextFormField(
            obscureText: obsecureText,
            decoration: InputDecoration(
              suffixIcon: iconButton,
              hintText: hintText,
            ),
          ),
        ),
        const SizedBox(height: 24.0),
      ],
    );
  }
}

Solution

You can create nullable IconButton and a callback method for default iconButton's onPressed,

final IconButton? iconButton;
final VoidCallback? callback;

const CustomTextFormField({
  this.iconButton,
  this.callback,
  ....
 }

suffixIcon: iconButton ??
    IconButton(
      onPressed: callback,
      icon: const Icon(Icons.ac_unit),
    ),

Or

final IconButton iconButton;
final VoidCallback? callback;

CustomTextFormField({
  this.callback,
  Key? key,
  required this.text,
  required this.hintText,
  this.obsecureText = false,
})  : iconButton = IconButton(
        onPressed: callback,
        icon: const Icon(Icons.ac_unit),
      ),
      super(key: key);

It is necessary to use callback for button, else you may go for state-management.

Answered By - Yeasin Sheikh