Reputation: 21
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