搜索页面上的Flutter动画文本字段

Question

我正在创建自定义搜索页面。打开此页面时，将隐藏汉堡菜单，搜索文本字段会立即更改大小。如何使其顺利进行？

现在我输入此代码

class DefaultAppBar extends StatefulWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(56.0);

  @override
  _DefaultAppBarState createState() => _DefaultAppBarState ();

}

class _DefaultAppBarState extends State<DefaultAppBar> with TickerProviderStateMixin {
  AnimationController _controller;

  double textWidth = 300.0;

  @override
  void initState() {
    super.initState();


  }

  @override
  Widget build(BuildContext context) {
    var future = new Future.delayed(const Duration(milliseconds: 100), ()=>setState(() {
      textWidth = 400.00;
    }));

    return Stack(
        children: [
      Scaffold(
        appBar:AppBar(
          centerTitle: true,
          automaticallyImplyLeading: false,

          // ...
          title:AnimatedContainer (
            duration: Duration (milliseconds: 500),
            width: loginWidth,

//            color: Colors.red,
            child:  TextField(
              autofocus: true,
              // ...
              decoration: InputDecoration(
                fillColor: Colors.white,
                filled: true,
                prefixIcon: Icon(Icons.arrow_back,color: Colors.grey),
                hintText: 'Search something ...',
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide.none),
                contentPadding: EdgeInsets.zero,


//                border: InputBorder.none,
//                hintText: "My Custom Search Label", // KEY PROP
                hintStyle: TextStyle(color: Colors.red), // KEY PROP
              ),
            ),
          ),


            ),

)


    ]
    );
  }
}

并获得此结果

工作，但不是很顺利，以及如何自动计算textWidth的开始和结束以及如何像这样https://photos.app.goo.gl/mWpdsouLi4csptKb7制作动画”>

我正在创建自定义搜索页面。打开此页面时，将隐藏汉堡菜单，搜索文本字段会立即更改大小。如何使其顺利进行？现在，我使此代码类为DefaultAppBar ...

Answer 1

1. 要使汉堡包图标消失，请用Visability小部件包装：

Answer 2

您可以使用searchDelegate