0

I am currently working on an application and I have a warning that I can't get rid of...

Summary: A RenderFlex overflowed by 34 pixels on the right -> When you press the button to expand container's width using an AnimatedController.

I use a custom floatingActionButton in a Scaffold which when pressed extends to the end of the screen and shows 2 options. The position of the button is in the lower right and I want that when you press it once it extends to the left and two rows of buttons appear.

When you press the button, the warrning specified above appears and disappears. I tried with Expanded but I didn't succeed ... I attach the code:

import 'package:flutter/material.dart';

class AnimatedContainerButton extends StatefulWidget {
  const AnimatedContainerButton({Key? key}) : super(key: key);

  @override
  AnimatedContainerButtonState createState() => AnimatedContainerButtonState();
}

class AnimatedContainerButtonState extends State<AnimatedContainerButton> {
  bool _isExpanded = false;
  late double _screenWidth;

  void closeMenu() {
    setState(() {
      _isExpanded = false;
    });
  }

  void openMenu() {
    setState(() {
      _isExpanded = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    _screenWidth = MediaQuery.of(context).size.width;

    return AnimatedContainer(
      curve: Curves.easeInBack,
      duration: Duration(milliseconds: 500),
      height: 50,
      width: _isExpanded ? _screenWidth - 35 : 50,
      decoration: BoxDecoration(
        color: Colors.purple,
        borderRadius: BorderRadius.all(
          Radius.circular(50),
        ),
      ),
      child: Expanded(
        child: _isExpanded
            ? Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  InkWell(
                    child: Column(
                      children: <Widget>[
                        Icon(Icons.flutter_dash_rounded),
                        Text(
                          "Item1",
                          style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                  InkWell(
                    child: Column(
                      children: <Widget>[
                        Icon(Icons.flutter_dash_rounded),
                        Text(
                          "Item2",
                          style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              )
            : IconButton(
                color: Colors.white,
                icon: Icon(Icons.add),
                onPressed: () {
                  openMenu();
                },
              ),
      ),
    );
  }
}
2
  • 1
    I’ve had a similar problem with expanding widgets and as near as I can tell, there’s not a way around it. An inner widget epands, then some ancestor widget eventually resizes because it’s size is tied to it’s child’s size. It seems to be a side effect of how Flutter layout works. Commented Nov 19, 2021 at 4:06
  • @Curt Eckhart Yeah ... In the end, I think I'll use another method to animate the container. Thanks for the tip though Commented Nov 24, 2021 at 18:24

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.