Fix icon size too big in TextFormField in Flutter app - Icon takes full height of TextFormField and doesnt change size

[theakhinabraham]

In my add_task_page.dart I have added a icon_text_box.dart widget which is supposed to look like this:

But, instead it looks like this even if I give height in the icon_text_box.dart (ignores it):

Here is my icon_text_box.dart file:

//import

class IconTextBox extends StatefulWidget {
  final String hintHeading;
  final String iconLocation;
  final TextEditingController controller;

  const IconTextBox(
      {super.key,
      required this.hintHeading,
      required this.controller,
      required this.iconLocation});

  @override
  State<IconTextBox> createState() => _IconTextBoxState();
}

class _IconTextBoxState extends State<IconTextBox> {
  @override
  Widget build(BuildContext context) {
    return TextFormField(
      style:
          Theme.of(context).textTheme.displaySmall!.copyWith(color: blackColor),
      decoration: InputDecoration(
        prefixIcon: SvgPicture.asset(widget.iconLocation),
        suffixIcon: widget.controller.text.isEmpty
            ? null
            : SvgPicture.asset('assets/cross.svg'),
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(100.0),
            borderSide: BorderSide(width: 1.0, color: outlineColor)),
        focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(100.0),
            borderSide: BorderSide(width: 1.0, color: blueColor)),
        hintText: widget.hintHeading,
        hintStyle: Theme.of(context).textTheme.displaySmall,
        contentPadding: textFieldPadding(context),
      ),
      controller: widget.controller,
      onChanged: (text) => setState(() {}),
    );
  }
}

Here is my add_task_page,dart:

//imports

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

  @override
  State<AddTaskPage> createState() => _AddTaskPageState();
}

class _AddTaskPageState extends State<AddTaskPage> {
  final TextEditingController titleController = TextEditingController();
  final TextEditingController descriptionController = TextEditingController();
  final TextEditingController dateController = TextEditingController();
  final TextEditingController timeController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
            padding: EdgeInsets.symmetric(
                horizontal: horizontalPadding(context),
                vertical: verticalPadding(context)),
            child: Column(
              children: [
                Row(
                  children: [
                    const BackArrow(),
                    Text(
                      "Create to-do",
                      style: Theme.of(context).textTheme.displayLarge,
                    )
                  ],
                ),
                const Spacing(),
                const SetReminder(),
                const Spacing(),
                //Todo title & Todo description
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    "Tell us about your task",
                    style: Theme.of(context).textTheme.labelSmall,
                  ),
                ),
                const SmallSpacing(),
                TextBox(hintHeading: "Title", controller: titleController),
                const SmallSpacing(),
                TextBox(
                    hintHeading: "Description",
                    controller: descriptionController),
                const Spacing(),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    "Date & Time",
                    style: Theme.of(context).textTheme.labelSmall,
                  ),
                ),
                IconTextBox(
                    hintHeading: "Set Date",
                    controller: dateController,
                    iconLocation: 'assets/calendar.svg'),
                IconTextBox(
                    hintHeading: "Set Time",
                    controller: timeController,
                    iconLocation: 'assets/clock.svg'),
                //TODO: Add more TextBox() and a submit button
                //Save the data to variables
                //Save the data to ObjectBox
              ],
            )),
      ),
    );
  }
}

I have tried using height and it is simply ignored:

prefixIcon: SvgPicture.asset(widget.iconLocation, height: MediaQuery.of(context).size.height * 0.014),

The debug console does mention:

════════ Exception caught by widgets library ═══════════════════════════════════
Incorrect use of ParentDataWidget.
════════════════════════════════════════════════════════════════════════════════

[theakhinabraham]

Replaced svg image with png image. Added padding in the image instead of code.

The prefixIcon and suffixIcon has an in-built minimum padding of 48px.