get error of size.isFinite when set top and right for positioned that nested in stack

140 views Asked by At

I have 3 positioned as children of Stack inside of ListView.builder also set top and right for all 3 positioned when run, got this error

size.isFinite

Also I have error that

buttom overflowd by102 pixels

If I remove top and right Only and only from first positioned work currectly, what is my mistake

 ListView.builder(
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            itemCount: HomeProvider().homeItems.length,
            itemBuilder: (context, index) => SizedBox(
              
                  child: Stack(
                    children: [
                          Positioned(
                          top: 35,
                          right: 20,
                          child: Material(
                            child: Container(
                              height: 75.0,
                               width: width * 0.9,
                             
                              decoration: BoxDecoration(
                                color: ColorManager.white,
                                borderRadius: BorderRadius.circular(0.0),
                                boxShadow: [
                                  BoxShadow(
                                      color: ColorManager.grey,
                                      offset: const Offset(-10.0, 10.0),
                                      blurRadius: 20.0,
                                      spreadRadius: 4.0),
                                ],
                              ),
                            ),
                          ),),
                          positioned(
                             top:30,
                             right:45,
                             ...
                             ),
                           positioned(
                             top:30,
                             right:45,
                             ...
                             ),
]
1

There are 1 answers

0
Ante Bule On

Positioned needs to know Stack constraints if you want to position it (using top/right/bottom/left). So you need to assign some height to the SizedBox which wraps your Stack.

ListView.builder(
  scrollDirection: Axis.vertical,
  shrinkWrap: true,
  itemCount: HomeProvider().homeItems.length,
  itemBuilder: (context, index) => SizedBox(
    height: 100, // give some height here
    child: Stack(
    children: [
    Positioned(
    top: 35,
    right: 20,
    child: Material(
    child: Container(
      height: 75.0,
        width: width * 0.9,
      
      decoration: BoxDecoration(
        color: ColorManager.white,
        borderRadius: BorderRadius.circular(0.0),
        boxShadow: [
          BoxShadow(
              color: ColorManager.grey,
              offset: const Offset(-10.0, 10.0),
              blurRadius: 20.0,
              spreadRadius: 4.0),
        ],
      ),
    ),
    ),),
    Positioned(
      top:30,
      right:45,
      ...
      ),
    Positioned(
      top:30,
      right:45,
      ...
      ),
])));