使用动画颤动使 TextField 动态变大？

Question

我正在尝试使我的 TextField 在焦点模式下动态变大。

我的 TextField 是这样的：

这张图片的代码如下：

Row(
              children: [
                Expanded(
                  child: Container(
                    padding: EdgeInsets.only(top: 12, right: 18, left: 8),
                    child: TextField(
                      autofocus: false,
                      style:
                          TextStyle(fontSize: 22.0, color: Color(0xFFbdc6cf)),
                      decoration: InputDecoration(
                        filled: true,
                        fillColor: Colors.white,
                        hintText: 'Ara',
                        contentPadding: const EdgeInsets.only(
                            left: 14.0, bottom: 8.0, top: 8.0),
                        focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.white),
                          borderRadius: BorderRadius.circular(25.7),
                        ),
                        enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.white),
                          borderRadius: BorderRadius.circular(25.7),
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  padding: EdgeInsets.only(top: 10),
                  child: IconButton(
                      onPressed: () {
                        showDialog(
                            context: context,
                            builder: (BuildContext context) {
                              return CustomDialogBox();
                            });
                      },
                      iconSize: 50,
                      icon: SvgPicture.asset(
                        "assets/images/addfolder.svg",
                        width: 45,
                        height: 45,
                      ),
                      color: Colors.white),
                ),
                Container(
                  padding: EdgeInsets.only(top: 10),
                  child: IconButton(
                      onPressed: () {
                        Navigator.of(context).pushNamed(Settings.routeName);
                      },
                      iconSize: 50,
                      icon: const Icon(Icons.settings),
                      color: Colors.white),
                ),
              ],
            ),

单击文本字段后，我希望它是这样的：

我怎样才能在焦点模式下使这个 Textfield 平滑地变大？

Answer 1

要使其具有动画效果，您可以使用 AnimatedContainer ，其中 TextField 是一个子项。使宽度可变，然后添加 FocusNode 并将其分配给 TextField，最后为 FocusNode 定义侦听器......瞧。

举例

class _TestX2State extends State<TestX2> {
  FocusNode _focusNode = FocusNode();
  double searchFieldSize = 100;

  @override
  void initState() {
    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        searchFieldSize = 500;
        setState(() {});
      }
    });
    super.initState();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Row(
        children: [
          AnimatedContainer(
            duration: const Duration(milliseconds: 500),
            width: searchFieldSize,
            padding: EdgeInsets.only(top: 12, right: 18, left: 8),
            child: TextField(
              focusNode: _focusNode,
              autofocus: false,
              style: TextStyle(fontSize: 22.0, color: Color(0xFFbdc6cf)),
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.white,
                hintText: 'Ara',
                contentPadding: const EdgeInsets.only(left: 14.0, bottom: 8.0, top: 8.0),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                  borderRadius: BorderRadius.circular(25.7),
                ),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                  borderRadius: BorderRadius.circular(25.7),
                ),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 10),
            child: IconButton(
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return SizedBox();
                      });
                },
                iconSize: 50,
                icon: Icon(Icons.folder),
                color: Colors.white),
          ),
          Container(
            padding: EdgeInsets.only(top: 10),
            child: IconButton(
                onPressed: () {
                  // Navigator.of(context).pushNamed(Settings.routeName);
                },
                iconSize: 50,
                icon: const Icon(Icons.settings),
                color: Colors.white),
          ),
        ],
      ),
    );
  }
}

Answer 2

我不确定，但看起来它可能会工作https://pub.dev/packages/fitted_text_field_container