CODEWITHSUNDEEP
flutterflutter-layout
Sachin
Sachin

Reputation: 1425

How to add Icon to the hintText in TextFormField

I want to add Icon to the hintText field of the TextFormField. I already read about prefixIcons and SuffixIcons but they add the icons permanently. I want Icon as a hintText so that when User click it disappears like hintText. How can I achieve this in flutter

Upvotes: 1

Views: 1933

Answers (3)

Elimane SALL
Elimane SALL

Reputation: 1

class ResultPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Padding(
      padding: const EdgeInsets.all(20.0),
      child: TextField(
        decoration:
            InputDecoration(
 prefixIcon: Icon(Icons.search, color: Colors.black),
    hintText: "hello this is a hint text")
      ),
    )));
  }
}

Upvotes: 0

Lahiru Vikum Thamel
Lahiru Vikum Thamel

Reputation: 11

Hope this will help you!

This is how the output looks like.

  import 'package:flutter/material.dart';

class SearchInputWidget extends StatefulWidget {
  final String? hintText;
  final EdgeInsetsGeometry outsidePadding, contentPadding;

  SearchInputWidget({
    Key? key,
    this.hintText = "Search",
    this.outsidePadding = const EdgeInsets.only(top: 18, bottom: 0),
    this.contentPadding = const EdgeInsets.all(16),
  }) : super(key: key);

  @override
  State<SearchInputWidget> createState() => _SearchInputWidgetState();
}

class _SearchInputWidgetState extends State<SearchInputWidget> {
  final ValueNotifier<bool> hintVisibilityNotifier = ValueNotifier(true);

  final TextEditingController textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: widget.outsidePadding,
      child: Stack(
        children: [
          TextFormField(
            textAlign: TextAlign.center,
            controller: textEditingController,
            style: TextStyle(
                // color: Colors.grey.shade500,
                color: Colors.black,
                fontFamily: "Asap",
                fontSize: 20),
            decoration: InputDecoration(
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                    borderSide: BorderSide.none),
                filled: true,
                fillColor: Colors.grey.shade300,
                contentPadding: widget.contentPadding),
            onChanged: (text) {
              if (text.isEmpty) {
                hintVisibilityNotifier.value = true;
              } else {
                hintVisibilityNotifier.value = false;
              }
            },
            onEditingComplete: () {
              if (textEditingController.text.isEmpty) {
                hintVisibilityNotifier.value = true;
              } else {
                hintVisibilityNotifier.value = false;
              }
            },
          ),
          ValueListenableBuilder(
              valueListenable: hintVisibilityNotifier,
              builder: (BuildContext context, bool isVisible, Widget? child) {
                if (isVisible) {
                  return Positioned.fill(
                    child: Align(
                      alignment: Alignment.center,
                      child: IgnorePointer(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.search,
                              color: Colors.grey.shade500,
                              size: 26,
                            ),
                            SizedBox(
                              width: 5,
                            ),
                            Text(
                              widget.hintText!,
                              style: TextStyle(
                                color: Colors.grey.shade500,
                                fontFamily: "Asap",
                                fontSize: 20,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  );
                } else {
                  return SizedBox.shrink();
                }
              })
        ],
      ),
    );
  }
}

Upvotes: 1

Try
Try

Reputation: 3469

You can't achieve that with a property of TextFormField but you can change the visibility of the Icon based on the controller of the Field:

bool isVisible = true;
TextEditingController controller = TextEditingController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: TextFormField(
        controller: controller,
        onChanged: (text){
          setState(() {
            controller.text.isEmpty ? isVisible = true : isVisible = false;
          });
        },
        decoration: InputDecoration(
          hintText: 'hintText',
          prefixIcon: Visibility(
            visible: isVisible,
            child: Icon(Icons.person, color: Colors.grey,),
          ),
        ),
      ),
    ),
  );
}

@override
void dispose() {
  controller.dispose();
  super.dispose();
}

Upvotes: 4

Related Questions