How to make cancel icon appear when user complete typing in Flutter

Question

Right now I'm have a search bar with a search icon on the right but I'm just wondering how to make the cancel icon appear when the user type something instead of just showing the search icon the whole time.

And when the user click cancels icon then, it'll clear the text with data and Search icon will show again.

                                child: TextFormField(
                                    focusNode: _focusNode,
                                    style: TextStyle(
                                        fontSize: 16,
                                        color: color.state == 'dark'
                                            ? Colors.white
                                            : Colors.black,
                                        height: 1,
                                        fontWeight: FontWeight.w100),
                                    decoration: InputDecoration(
                                        hintStyle: TextStyle(
                                            color: color.state == 'dark'
                                                ? Color(0xFFA19E9C)
                                                : Color(0xFF858585),
                                            fontSize: 16,
                                            height: 1,
                                            fontWeight: FontWeight.w100),
                                        border: InputBorder.none,
                                        hintText: "Search"),
                                    onChanged: (text) {
                                      loadData();
                                    },
                                    controller:  search,),
                              ),
                            ),
                            loading.value
                                ? SpinKitFadingCube(
                                    color: colorPrimary,
                                    size: 16.0,
                                  )
                                : 

                                GestureDetector(
                      onTap: () {
    search.clear();
    loadData();
  },
     child: SvgPicture.asset(
                                      iconsPath + "search.svg",
                                      color: color.state == 'dark'
                                          ? Colors.white
                                          : Color(0xFF282828),
                                      width: 20,
                                    ),
),
``

Answer 1

There is already built-in widget CupertinoSearchTextFieldthat offer similar kind of functionality.

Example code:

class MyPrefilledSearch extends StatefulWidget {
  const MyPrefilledSearch({Key? key}) : super(key: key);

  @override
  State<MyPrefilledSearch> createState() => _MyPrefilledSearchState();
}

class _MyPrefilledSearchState extends State<MyPrefilledSearch> {
  @override
  Widget build(BuildContext context) {
    return CupertinoSearchTextField(
      onChanged: (String value) {
        print('The text has changed to: $value');
      },
      onSubmitted: (String value) {
        print('Submitted text: $value');
      },
    );
  }
}

More about CupertinoSearchTextField.