Flutter: TextField's prefix icon still showing when its parent's Container is set to 0-CodePudding

AnimatedContainer(
  height: open ? 300 : 0,
  width: open ? 750 : 0,
  duration:
      Duration(milliseconds: 1000),
  decoration: new BoxDecoration(
    color: Color.fromARGB(255, 20, 42, 165),
    borderRadius: new BorderRadius.all(
      Radius.circular(10),
    ),
  ),
  curve: Curves.fastOutSlowIn,
  child: Center(
    child: TextField(
      style: TextStyle(color: Colors.white),
      decoration: InputDecoration(
        prefixIcon: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Icon(
          Icons.email,
          color: Colors.orangeAccent,
        ),
        ),
        border: InputBorder.none,
        labelText: 'email',
        labelStyle: _spStyleGet.labelStyle,
      ),
    ),
  ),
),

I have this AnimatedContainer. When the container is not opened, I can still see that email icon inside the TextField. It is impossible to hide it. Also, I tried to set the condition to make it appear when the container is opened. It showed up from the right side of the container which makes it very unnatural.

Additionally, I switched the AnimatedContainer to just normal Container. Still, have the same problem.

CodePudding user response：

This is because in Flutter, "layout" and "painting" are two separate steps in the rendering pipeline. A widget with a size of zero during the layout phase, does not necessarily mean it won't paint anything on the screen.

If you want to prevent a widget from painting anything outside of its supposed size, you can use ClipRect widget. However, this feature is also built-in to Container (and AnimatedContainer) already. So in your case, you can simply:

Add clipBehavior: Clip.hardEdge to your AnimatedContainer.

CodePudding user response：

You can set bool like below for icon also.

AnimatedContainer(
          height: open ? 300 : 0,
          width: open ? 750 : 0,
          duration: const Duration(milliseconds: 1000),
          decoration: const BoxDecoration(
            color: Color.fromARGB(255, 20, 42, 165),
            borderRadius: BorderRadius.all(
              Radius.circular(10),
            ),
          ),
          curve: Curves.fastOutSlowIn,
          child: Center(
            child: TextField(
              style: const TextStyle(color: Colors.white),
              decoration: InputDecoration(
                prefixIcon: open
                    ? Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Icon(
                          Icons.email,
                          color: Colors.orangeAccent,
                        ),
                      )
                    : Container(),
                border: InputBorder.none,
                labelText: 'email',
                // labelStyle: _spStyleGet.labelStyle,
            ),
         ),
      ),
  )