DeltaReloadX
DeltaReloadX

Reputation: 21

Flutter problem with AnimatedController Widget

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

Upvotes: 0

Views: 51

Answers (0)

Related Questions