我目前正在处理一个应用程序,我有一个警告,我无法摆脱...
摘要:一个 RenderFlex 在右侧溢出了 34 个像素 -> 当您按下按钮以使用 AnimatedController 扩展容器的宽度时。
我在 Scaffold 中使用了一个自定义的 floatingActionButton,当按下它时会延伸到屏幕的末尾并显示 2 个选项。按钮的位置在右下角,我希望当你按下它时它会向左延伸并出现两排按钮。
当您按下按钮时,上面指定的警告出现和消失。我尝试使用 Expanded 但没有成功...我附上代码:
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();
},
),
),
);
}
}