我正在建立一个主页,我已经创建了一个隐藏的抽屉在一个单独的页面和一个主屏幕在单独和堆叠两个'隐藏的抽屉& '主屏幕在主页上,还创建了可折叠搜索按钮在主屏幕上沿着菜单按钮在同一行与边距:spaceBetween .
我已经创建了一个单独的页面上的第二行在主页上的幻灯片,即.在搜索菜单按钮下方,调用主页上的旋转木马滑块,但显示错误
“底部的Infinity像素溢出的RenderFlex”
为什么我想把它加在上面的时候它在下面。我已经尝试了每一种可能的填充和间距,但没有工作,请帮助
DevTools布局
主屏幕代码
class HomeScreen extends StatefulWidget {
HomeScreen({Key? key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
bool _folded = true;
@override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: Duration(milliseconds: 250),
color: Colors.blueGrey.shade100,
child: Column(
children: [
SizedBox(
height: 40,
),
Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: SvgPicture.asset(
"assets/icons/menu.svg",
),
onPressed: () {},
),
Padding(
padding: const EdgeInsets.only(left: 110),
child: Container(
width: _folded ? 52 : 250,
height: getProportionateScreenHeight(50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
]),
child: Row(
children: [
Expanded(
child: Container(
padding: EdgeInsets.only(left: 16),
child: !_folded
? TextField(
decoration: InputDecoration(
hintText: 'Search Book, Author,Genre ',
hintStyle: TextStyle(
color: Colors.black54,
fontFamily:
GoogleFonts.oregano().fontFamily,
),
border: InputBorder.none,
),
)
: null,
),
),
AnimatedContainer(
duration: Duration(milliseconds: 400),
child: Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(_folded ? 32 : 0),
topRight: Radius.circular(32),
bottomLeft: Radius.circular(_folded ? 32 : 0),
bottomRight: Radius.circular(32),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: SvgPicture.asset(
_folded
? "assets/icons/search.svg"
: "assets/icons/close1.svg",
height: getProportionateScreenHeight(18),
color: Colors.black54),
),
onTap: () {
setState(() {
_folded = !_folded;
});
}),
),
)
],
),
),
),
],
),
Row(
children: [ImageSlider()],
)
],
),
);
}
}
字符串
转盘滑块代码
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
CarouselSlider(
items: [
//1st ImageSlider
Container(
padding: EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("assets/images/13.jpg"),
fit: BoxFit.cover,
),
),
),
//2nd Image of Slider
Container(
padding: EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("assets/images/15.jpg"),
fit: BoxFit.cover,
),
),
),
//3rd Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("assets/images/3.jpg"),
fit: BoxFit.cover,
),
),
),
],
//Slider Container properties
options: CarouselOptions(
// height: getProportionateScreenHeight(50),
height: 50,
autoPlay: true,
reverse: true,
enlargeCenterPage: true,
autoPlayInterval: Duration(seconds: 2),
),
),
],
),
);
}
型
的
3条答案
按热度按时间kyvafyod1#
使用SingleChildScrollView Package 列
字符串
gstyhher2#
字符串
用列部件 Package IncomingWidget,然后在列内借助WidgetSize(),您可以找到incomingWidgetHeight的大小。
lp0sw83n3#
对于使用
Expanded(child: ImageSlider()),
的Single child wrap,它将占用额外的空间。使用row时
字符串
或仅用
SizedBox
Package型
测试插件
型