carousel slider“A RenderFlex overflowed by Infinity pixels on the bottom.”flutter

8ehkhllq  于 2023-08-07  发布在  Flutter
关注(0)|答案(3)|浏览(131)

我正在建立一个主页,我已经创建了一个隐藏的抽屉在一个单独的页面和一个主屏幕在单独和堆叠两个'隐藏的抽屉& '主屏幕在主页上,还创建了可折叠搜索按钮在主屏幕上沿着菜单按钮在同一行与边距: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),
            ),
          ),
        ],
      ),
    );
  }


kyvafyod

kyvafyod1#

使用SingleChildScrollView Package 列

@override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      height: MediaQuery.of(context).size.height,
      duration: Duration(milliseconds: 250),
      color: Colors.blueGrey.shade100,
      child: SingleChildScrollView ( 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()],
          )
        ],
      ),),
    );
  } ````

字符串

gstyhher

gstyhher2#

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

class AutopayCarousel extends StatefulWidget {
  
  const AutopayCarousel({
    super.key,
    required this.store,
  });

  @override
  State<AutopayCarousel> createState() => _AutopayCarouselState();
}

class _AutopayCarouselState extends State<AutopayCarousel> {
  @override
 

  ***** double inComingWidgetHeight = 0.0;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Observer(
      builder: (context) => Visibility(
        visible: widget.store.pendingMandateList.isNotEmpty,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.symmetric(horizontal: theme.spacing.s4),
              child: fskit_ux.FinHeaderSection(
                headerTitle: widget.configuration.autopayRequestHeader,
              ),
            ),
            CarouselSlider.builder(
              itemCount: widget.store.pendingMandateList.length,
              itemBuilder: (context, index, _) {
                final mandateInfo = widget.store.pendingMandateList[index];
        

               *********************

                return   Column(
                  children: [                       
                     WidgetSize(
                      onSizeDecided: (size) {
                        setState(() {
                          inComingWidgetHeight = size.height;
                        });
                      },
                      child: YourWidget(--------),
                    ),
                     *****

                  ],
                );
              },
              options: CarouselOptions(
      
                ***** height: inComingWidgetHeight, *****

                viewportFraction: kSingleViewportFraction,
                enableInfiniteScroll: false,
                onPageChanged: (index, reason) {
                  widget.store.updateCarouselActiveIndex(index);
                },
              ),
            ),
            SizedBox(height: theme.sizing.s4),
            Center(
              child: AnimatedSmoothIndicator(
                activeIndex: widget.store.carouselActiveIndex,
                count: widget.store.pendingMandateList.length,
                effect: ExpandingDotsEffect(
                  dotHeight: theme.sizing.half,
                  dotWidth: theme.sizing.base,
                  spacing: theme.sizing.base,
                  expansionFactor: theme.sizing.s4,
                  activeDotColor: theme.color.onBackgroundHighContrast,
                  dotColor: theme.color.onBackgroundHighContrast.withOpacity(
                    theme.opacity.o60,
                  ),
                ),
              ),
            ),
            SizedBox(
              height: theme.sizing.s4,
            ),
          ],
        ),
      ),
    );
  }
}

字符串

用列部件 Package IncomingWidget,然后在列内借助WidgetSize(),您可以找到incomingWidgetHeight的大小。

lp0sw83n

lp0sw83n3#

对于使用Expanded(child: ImageSlider()),的Single child wrap,它将占用额外的空间。
使用row时

Expanded(
              child: Row(
                children: [
                  // will take full spaces but width- IconSize
                  Flexible(
                    child: ImageSlider(),
                  ),
                  Icon(Icons.ac_unit),
                ],
              ),
            ),

字符串
或仅用SizedBox Package

SizedBox(
              height: 200,
              child: Row(
                /// controll position
                children: [
                  SizedBox(
                    width: 100,
                    child: ImageSlider(),
                  ),
                  Icon(Icons.ac_unit),
                ],
              ),
            ),

测试插件

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 Scaffold(
      body: AnimatedContainer(
        duration: Duration(milliseconds: 250),
        color: Colors.blueGrey.shade100,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          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),
                    height: 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),
                                      height: 18,
                                      color: Colors.black54),
                                ),
                                onTap: () {
                                  setState(() {
                                    _folded = !_folded;
                                  });
                                }),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),

            //For Single, will take full spaces
            // Expanded(child: ImageSlider()),

            /// with  rows, could be use [Flexible]
            Expanded(
              child: Row(
                children: [
                  // will take full spaces but width- IconSize
                  Flexible(
                    child: ImageSlider(),
                  ),
                  Icon(Icons.ac_unit),
                ],
              ),
            ),

            /// or just wrap with SizedBOx
            SizedBox(
              height: 200,
              child: Row(
                /// controll position
                children: [
                  SizedBox(
                    width: 100,
                    child: ImageSlider(),
                  ),
                  Icon(Icons.ac_unit),
                ],
              ),
            ),

            Container(
              height: 200,
              child: Text("Extra Bottom Part "),
              color: Colors.blueGrey,
              width: double.infinity,
            ),
          ],
        ),
      ),
    );
  }
}

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

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

class _ImageSliderState extends State<ImageSlider> {
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(children: [
        CarouselSlider(
          items: [
            //1st ImageSlider
            Container(
              padding: EdgeInsets.only(bottom: 20),
              height: 100,
              decoration: BoxDecoration(
                color: Colors.deepPurple,
                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),
              height: 100,
              decoration: BoxDecoration(
                color: Colors.deepOrange,
                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(
                color: Colors.pinkAccent,
                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),
          ),
        ),
      ]),
    );
  }
}

相关问题