Блог

Я новичок в разработке приложений и столкнулся с ошибкой при отображении горизонтальной прокрутки карты.

Гаубицы.дротик

 class HowItWorksCards extends StatefulWidget {
  HowItWorksCards();
  @override
  _HowItWorksCardsState createState() => _HowItWorksCardsState();
}

class _HowItWorksCardsState extends State<HowItWorksCards> {
  int _currentPage = 0;
  PageController _pageController = PageController(viewportFraction: 0.8, keepPage: true);

  List<Widget> _pages = [
    SliderPage(
        index: 1,
        title: "Title1",
        info:"Summary",
        image: "assets/images/howItWorks/1.png"),
    SliderPage(
        index: 1,
        title: "Title1",
        info:"Summary",
        image: "assets/images/howItWorks/1.png"),
    SliderPage(
        index: 1,
        title: "Title1",
        info:"Summary",
        image: "assets/images/howItWorks/1.png"),
  ];

  _onchanged(int index) {
    setState(() {
      _currentPage = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          flex: 5,
          child: PageView.builder(  // this throws the exception.
            controller: _pageController,
            // physics: BouncingScrollPhysics(),
            scrollDirection: Axis.horizontal,
            itemCount: _pages.length,
            onPageChanged: _onchanged,
            itemBuilder: (context, int index) {
              return _pages[index];
            },
          ),
        ),
        Flexible(   //  this works absolutely fine when the above Flexible widget is commented.
          flex: 4,
          child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: List<Widget>.generate(
                _pages.length,
                    (int index) {
                  return AnimatedContainer(
                      duration: Duration(milliseconds: 300),
                      height: 5,
                      width: (index == _currentPage) ? 30 : 10,
                      margin: EdgeInsets.symmetric(horizontal: 5, vertical: 10),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: (index == _currentPage)
                              ? AppTheme.globalTheme.primaryColor
                              : AppTheme.globalTheme.primaryColor
                              .withOpacity(0.5)));
                },
              )),
        ),
      ],
    );
  }
}
 

слайдер.дротик

 class SliderPage extends StatelessWidget {
  final String image;
  final int index;
  final String title;
  final String info;

  SliderPage(
      {@required this.image,
        @required this.info,
        @required this.title,
        @required this.index});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 20,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
      child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.all(5.0),
              height: 175,
              child: Image.asset(
                image,
                fit: BoxFit.fitHeight,
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 5),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(left: 5),
                    child: Text(this.title,
                        style: getFontStyle(
                            bold: true,
                            color: Color(0xFF3C3C43),
                            fontSize: 18,
                            fontStyle: FontStyles.SFProDisplay),
                        textAlign: TextAlign.center),
                  ),
                ],
              ),
            ),
            Container(
              padding:
              const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5),
              child: Text(
                this.info,
                style: getFontStyle(
                    color: Color(0xFF3C3C43),
                    fontSize: 16,
                    fontStyle: FontStyles.SFProDisplay),
                textAlign: TextAlign.center,
              ),
            ),
          ]),
    );
  }
}
 

главная.дротик

 void main() => runApp(MaterialApp(home: AmazonOrdersInvoiceOnboarding()));

class AmazonOrdersInvoiceOnboarding extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: GoBackAppBar(
        customBackGroundColor: Color(0x1affb500),
        title: "",
      ),
      body: ListView(
        shrinkWrap: true,
        children: [
          
          HowItWorksCards(),
          
        ],
      ),
    );
  }
}
 

У меня есть некоторые исключения.

1. Горизонтальному смотровому окну была придана неограниченная высота. — Уже использовали Гибкий. Не знаю, почему я все еще получаю это исключение.
2. RenderBox не был выложен: RenderViewport#c29be ПОТРЕБНОСТИ-ПОТРЕБНОСТИ В МАКЕТЕ-ПОТРЕБНОСТИ В КРАСКЕ-КОМПОЗИЦИЯ-БИТЫ-ОБНОВЛЕНИЕ

Я нашел много связанных с этим вопросов по SO, но безрезультатно.

Эта ошибка возникает, когда мы используем виджет бесконечного размера внутри одного-другого , здесь вы используете Column внутри ListView , оба занимают бесконечную высоту, если вы обернете Column виджет фиксированного размера, это решит проблему,

И я настоятельно рекомендую вам посмотреть это видео от flutter https://www.youtube.com/watch?v=jckqXR5CrPI

на howItWorks.dart

   @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          flex: 5,
          child: Container(
            height: 250,
            child: PageView.builder(
              // this throws the exception.
              controller: _pageController,
              // physics: BouncingScrollPhysics(),
              scrollDirection: Axis.horizontal,
              itemCount: _pages.length,
              onPageChanged: _onchanged,
              itemBuilder: (context, int index) {
                return _pages[index];
              },
            ),
          ),
        ),
        Flexible(
          //  this works absolutely fine when the above Flexible widget is commented.
          flex: 4,
          child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: List<Widget>.generate(
                _pages.length,
                (int index) {
                  return AnimatedContainer(
                      duration: Duration(milliseconds: 300),
                      height: 5,
                      width: (index == _currentPage) ? 30 : 10,
                      margin: EdgeInsets.symmetric(horizontal: 5, vertical: 10),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: Colors.amber)
                      //  (index == _currentPage)
                      //     ? AppTheme.globalTheme.primaryColor
                      //     : AppTheme.globalTheme.primaryColor
                      //     .withOpacity(0.5))
                      );
                },
              )),
        ),
      ],
    );
  }