A RenderFlex overflowed Flutter

  android-studio, dart, flutter

Trying use Positioned with Stack and Column, getting errors:

"A RenderFlex overflowed by 72 pixels on the bottom."

"A RenderFlex overflowed by 46 pixels on the bottom." etc…

Part of my block just disappears into the slider, i tried to use only Stacked and several Positioned pressed to the bottom of the picture, but then part of the picture is closed.

My dart:

final List<Widget> imageSliders = imgList.map((item) => Container(
    child: Container(
    child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(30.0)),
        child: Stack(
          children: <Widget>[
            Container(
                alignment: Alignment.bottomCenter,
                decoration: BoxDecoration(color: Colors.white),
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Image.asset('assets/psplus-1month.png', fit: BoxFit.cover, width: 1000.0),
                    Container(
                      decoration: BoxDecoration(color: Colors.white),
                      padding: EdgeInsets.only(top: 20.0),
                      child: Text(
                        'Playstation Plus',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: const Color(0xFF4F4F4F),
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    Container(
                      decoration: BoxDecoration(color: Colors.white),
                      padding: EdgeInsets.only(bottom: 5.0, top:5.0),
                      child: Text(
                        '1 месяц',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: const Color(0xFFA5ABC8),
                          fontSize: 12,
                        ),
                      ),
                    ),
                    Container(
                      decoration: BoxDecoration(color: Colors.white),
                      padding: EdgeInsets.only(bottom: 10.0),
                      child: Text(
                        '1 500 рублей',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: const Color(0xFF789EEB),
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Positioned(
                bottom: 35.0,
                left: 0.0,
                right: 0.0,
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                        shape: BoxShape.circle,
                        boxShadow: [BoxShadow(blurRadius: 10, color: Colors.black.withOpacity(0.10), spreadRadius: 5)],
                      ),
                      child: CircleAvatar(
                        backgroundColor: Colors.white,
                        radius: 15,
                        child: Icon(Icons.add),
                      ),
                    )
                  ],
                ),
              ),
          ],
        )
    ),
  ),
)).toList();

CarouselSlider(
    options: CarouselOptions(
        autoPlay: false,
        aspectRatio: 2.0,
        enlargeCenterPage: true,
        viewportFraction: 0.6,
    ),
    items: imageSliders,
)

Screenshot for visual example:
enter image description here

Source: Android Studio Questions

LEAVE A COMMENT