Flutter Hero Animation dismissing keyboard on textfield

Question

I have two screens with different size of text fields. I am trying to make a hero animation for them. I want the end text field to auto focus, but the keyboard get dismissed at the second screen.

I tried to use flightShuttleBuilder to check if the animation is completed and request focus. But it is not working.

Here is the code for the second screen

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class Search extends ConsumerStatefulWidget {

  @override
  ConsumerState createState() => _SearchState();
}

class _SearchState extends ConsumerState<Search> {

FocusNode focusNode = FocusNode();

@override
void initState() {
// TODO: implement initState
super.initState();

// focusNode = FocusNode();

// focusNode?.requestFocus()
}

@override
void dispose() {
  // TODO: implement dispose
  focusNode.dispose();

  super.dispose();

}

@override
Widget build(BuildContext context) {

WidgetsBinding.instance.addPostFrameCallback((_) => () => focusNode.requestFocus());

Size size = MediaQuery.of(context).size;

focusNode.requestFocus();

return Scaffold(
  appBar: AppBar(
    title: Container(
      child: Hero(
        tag:'searchBar',
        flightShuttleBuilder: ((flightContext, animation, flightDirection, fromHeroContext, toHeroContext){

        animation.addStatusListener((status) {
          if (status == AnimationStatus.completed) {
           focusNode.requestFocus();
          }
        });

          return toHeroContext.widget;
        }),
        child: Material(
          type: MaterialType.transparency,
          child: SizedBox(
            height:size.height * 0.05,
            child: TextField(
              focusNode: focusNode,
              decoration: InputDecoration(
                prefixIcon: const Icon(Icons.search, size: 25.0,),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(50.0),
                  borderSide: const BorderSide(
                    width: 0,
                    style: BorderStyle.none,
                  ),
                ),
                filled: true,
                hintStyle: TextStyle(color: Colors.grey[800]),
                hintText: 'Search a word',
                fillColor: Colors.white,
                // isDense: true,
                contentPadding: EdgeInsets.all(0.0),
              ),
            ),
          ),
        ),
      ),
    ),
  ),
  body: Container(),
);
 }
 }

Answer 1

My first advice is avoid doing calculations or calling methods in the build method, this will cause to be called each time the widget tree needs to refresh (unless you use Flutter Hooks which holds the state of what is currently doing, but thats a different story)

class Search extends ConsumerStatefulWidget {
  @override
  ConsumerState createState() => _SearchState();
}

class _SearchState extends ConsumerState<Search> {
  FocusNode focusNode = FocusNode();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    // focusNode = FocusNode();

    // focusNode?.requestFocus()
  }

  @override
  void dispose() {
    // TODO: implement dispose
    focusNode.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    /// no Widget WidgetsBinding.instance.addPostFrameCallback nor requestFocus call here
    Size size = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Container(
          child: Hero(
            tag: 'searchBar',
            flightShuttleBuilder: ((flightContext, animation, flightDirection,
                fromHeroContext, toHeroContext) {
              /// Don't try to add a Listener here, use a StatefulWidget that uses that logic in its initState
              return _FocustWidget(
                animation: animation,
                child: toHeroContext.widget,
                focusNode: focusNode,
              );
            }),
            child: Material(
              type: MaterialType.transparency,
              child: SizedBox(
                height: size.height * 0.05,
                child: TextField(
                  focusNode: focusNode,
                  decoration: InputDecoration(
                    prefixIcon: const Icon(
                      Icons.search,
                      size: 25.0,
                    ),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(50.0),
                      borderSide: const BorderSide(
                        width: 0,
                        style: BorderStyle.none,
                      ),
                    ),
                    filled: true,
                    hintStyle: TextStyle(color: Colors.grey[800]),
                    hintText: 'Search a word',
                    fillColor: Colors.white,
                    // isDense: true,
                    contentPadding: EdgeInsets.all(0.0),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
      body: Container(),
    );
  }
}

class _FocustWidget extends StatefulWidget {
  final Widget child;
  final Animation<double> animation;
  final FocusNode focusNode;

  const _FocustWidget({
    Key? key,
    required this.focusNode,
    required this.animation,
    required this.child,
  }) : super(key: key);

  @override
  State<_FocustWidget> createState() => __FocustWidgetState();
}

class __FocustWidgetState extends State<_FocustWidget> {
  @override
  void initState() {
    super.initState();
    widget.animation.addStatusListener(_status); ///Check for the animation state
  }

  void _status(AnimationStatus status) {
    if (status == AnimationStatus.completed) {
      Future.microtask(() => mounted ? widget.focusNode.requestFocus() : null);
    }
  }

  @override
  void dispose() {
    widget.animation.removeStatusListener(_status); /// dispose the listener
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => widget.child;
}

Now I talked about hooks because I see you using Consumer so I believe you use riverpod (and therefore maybe you are familiar with hooks if you saw hooks_riverpod package). If you're still grasping the concept of riverpod without hook then this is it, else you could try using hooks to reduce the statefulWidget:

class Search extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final focusNode = useFocusNode(); /// created once with hook
    Size size = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Container(
          child: Hero(
            tag: 'searchBar',
            flightShuttleBuilder: ((flightContext, animation, flightDirection,
                fromHeroContext, toHeroContext) {
              return HookBuilder(
                builder: (context) {
                  final mounted = useIsMounted();
                  useEffect(() {
                    if (animation.status == AnimationStatus.completed) {
                      Future.microtask(
                        () => mounted() ? focusNode.requestFocus() : null,
                      );
                      return null;
                    }

                    void _status(AnimationStatus status) {
                      if (status == AnimationStatus.completed) {
                        Future.microtask(
                          () => mounted() ? focusNode.requestFocus() : null,
                        );
                      }
                    }

                    animation.addStatusListener(_status);

                    return () => animation.removeStatusListener(_status);
                  }, const []);
                  return toHeroContext.widget;
                },
              );
            }),
            child: Material(
              type: MaterialType.transparency,
              child: SizedBox(
                height: size.height * 0.05,
                child: TextField(
                  focusNode: focusNode,
                  decoration: InputDecoration(
                    prefixIcon: const Icon(
                      Icons.search,
                      size: 25.0,
                    ),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(50.0),
                      borderSide: const BorderSide(
                        width: 0,
                        style: BorderStyle.none,
                      ),
                    ),
                    filled: true,
                    hintStyle: TextStyle(color: Colors.grey[800]),
                    hintText: 'Search a word',
                    fillColor: Colors.white,
                    // isDense: true,
                    contentPadding: EdgeInsets.all(0.0),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
      body: Container(),
    );
  }
}