I am trying to make my TextField dynamically bigger while in focus mode.

My TextField is like this:

Code of this picture like this:

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),
                ),
              ],
            ),

After i click the textfield, I want it to be like this:

How can i make this Textfield bigger smoothly while in focus mode?

CodePudding user response：

I am not sure, but it looks like it might work https://pub.dev/packages/fitted_text_field_container

CodePudding user response：

To make it animated, you can use AnimatedContainer where TextField is a child. Make width variable, then add FocusNode and assign it to TextField, finally define listener for FocusNode... and voila.

In example

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),
          ),
        ],
      ),
    );
  }
}