Flutter: Animated Container with dynamic width dependent on its content

Question

I am trying to make custom Navigation Bar. I need to animate the width of each item according to it's content. using Animated Container right now and width hardcoded. I need that width to be variable. Dont wanna use flexible with the text widget cause that messes up the height. Any solutions?

AnimatedContainer(
    width: isActive ? 110 : 50,
    duration: const Duration(milliseconds: 500),
    decoration: BoxDecoration(
      color: isActive ? primaryColor.withOpacity(0.2) : Colors.transparent,
      borderRadius: BorderRadius.circular(20.0),
    ),
    padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 10.0),
    child: isActive
        ? Row(
            children: [
              SvgPicture.asset(
                svgIcon,
                color: primaryColor,
                height: 20.0,
              ),
              10.horizontalSpace,
              Text(
                label,
                style: const TextStyle(
                  color: primaryColor,
                ),
              ),
            ],
          )
        : SvgPicture.asset(
            svgIcon,
            color: Colors.grey,
            height: 20.0,
          ),
  ),

Fitted Box doesn't seem to solve the problem @OzanTaskiran Using the approach mentioned in the comment. it still show the overflow error for like half a second during animating. — Muneeb Ahmad, Sep 05 '22 at 07:21
@MuneebAhmad hey friend have you got answer of this question? if yes then let me know please. — Deepak, Feb 23 '23 at 07:52

score 1 · Answer 1 · answered Sep 04 '22 at 20:03

Came across this function to get the size of the text widget. Used this to set the width of the animated container and wraped text widget with Flexible Widget to stop the overflow problem. Although I still the error in the debug console but It doesnt show in the UI. I think this is good enough for now.

Size textSize(String text, TextStyle style) {
  final TextPainter textPainter = TextPainter(
      text: TextSpan(text: text, style: style),
      maxLines: 1,
      textDirection: TextDirection.ltr)
    ..layout(minWidth: 0, maxWidth: double.infinity);
  return textPainter.size;
}

Flutter: Animated Container with dynamic width dependent on its content

1 Answers1