SuffixIcon not working with AutoCompleteTextField

I want the arrow Icon to appear whenever the textField have some text in there otherwise it should disappear. If I use TextField instead of AutoCompleteTextField, it works fine. Also, if i remove the condition at suffixIcon, it works fine even then. see my code below.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool arrow = false;
  var controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    controller.addListener(() {
      print(controller.text);
      setState(() {
        controller.text == '' ? arrow = false : arrow = true;
      });
    });
  }

  Widget suffixIcon() {
    var iconButton = IconButton(
        icon: Icon(Icons.arrow_forward),
        onPressed: () {},
        color: Theme.of(context).primaryColor);

    return arrow ? iconButton : null;
    // return iconButton;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AutoCompleteTextField(
              controller: controller,
              decoration: InputDecoration(
                suffixIcon: suffixIcon(),
              ),
              itemSorter: (a, b) {},
              suggestions: [],
              itemSubmitted: (data) {},
              itemFilter: (suggestion, String query) {},
              itemBuilder: (BuildContext context, suggestion) {},
              key: null,
            ),
          ],
        ),
      ),
    );
  }
}