Exception caught by gesture: Stack Overflow

Issue

Every time I tap on the ListView Card this error shows ‘Exception caught by gesture: Stack Overflow" as seen on this screenshot(https://www.screencast.com/t/udA8NZZ1AqsD)

The problem here is somewhere in the Gesturedetector’s onTap code

List of Screenshots
Default Navigation PageRoute -> https://www.screencast.com/t/qKZQgaraFi
With Just a Plain text called ‘test’ -> https://www.screencast.com/t/XOxGkANLZEjC
Slightly changed Navigation Page Route -> https://www.screencast.com/t/1F82pyQtQ2v9
Gesturedetector with new additional code -> https://www.screencast.com/t/hRefONV3o
Code that passes data from firebase -> https://www.screencast.com/t/24gc9zqfxmGX

Result Link:
Result #1 -> https://www.screencast.com/t/PmiC5U6S2L
Result #2 -> https://www.screencast.com/t/udA8NZZ1AqsD

I have tried the following below

TRY 1
Tried the default Navigation Page Route and the Gesturedetector is working fine. The downside is I can only show text(see the link above With Just a Plain text called ‘test’) and can’t pass data using the provider package flutter as seen on this screenshot

Default Navigation PageRoute

GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () {
    Navigator.push(context, MaterialPageRoute(builder: (context) => ProductDetail()));
  },
)

With Just a Plain text called ‘test’

Text(
 'test',
 style: TextStyle(
    fontSize: 35.0,
    color: Colors.black45,
    fontWeight: FontWeight.w700
  ),
),

Result: see Result #1

TRY 2
Tried the slightly changed Navigation Page Route(see the link ‘Slightly changed Navigation Page Route’ above) together with the ordinary text(see the link above = With Just a Plain text called ‘test’)

Navigation PageRoute

GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () {
    Navigator.of(context).push(
      MaterialPageRoute (builder: (BuildContext context) {
        return ProductDetail();
    })
  );
},

With Just a Plain text called ‘test’

Text(
  'test',
  style: TextStyle(
    fontSize: 35.0,
    color: Colors.black45,
    fontWeight: FontWeight.w700
  ),
),

Result: see Result #1

TRY 3
Tried it with a new additional code(see link above ‘Gesturedetector with new additional code’) together with the ordinary text(see the link above With Just a Plain text called ‘test’)

Navigation PageRoute

GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () {
    itemNotifier.currentProditem = itemNotifier.itemList[index];
      Navigator.of(context).push(
        MaterialPageRoute (builder: (BuildContext context) {
          return ProductDetail();
      })
    );
  },
),

With Just a Plain text called ‘test’

Text(
  'test',
  style: TextStyle(
    fontSize: 35.0,
    color: Colors.black45,
    fontWeight: FontWeight.w700
  ),
),

Result: see Result #2

TRY 4
Tried it with a new additional code(see link above ‘Gesturedetector with new additional code’) together with a code that passes data from firebase(see link above ‘Code that passes data from firebase’)

Code that Passes data from Firebase

Text(
  (itemNotifier.currentProditem.price),
  style: TextStyle(
    fontSize: 35.0,
    color: Colors.black45,
    fontWeight: FontWeight.w700
  ),
),

Result: see Result #2

My Code

Widget build(BuildContext context) {
    ItemNotifier itemNotifier = Provider.of<ItemNotifier>(context);
    return new Scaffold(
        backgroundColor: Color(0xffdcdcdc),
        appBar: new AppBar(
            centerTitle: true,
            title: new Text(
              'Discover Products',
              style: TextStyle(
                fontSize: 26.0,
                fontWeight: FontWeight.w600,
              ),
            ),
            backgroundColor: Color(0xFF352d5a)
        ),
        body: Padding(
          padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
            child: ListView.builder(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                physics: ClampingScrollPhysics(),
                itemCount: itemNotifier.itemList.length == null ? 0 : itemNotifier.itemList.length,
                itemBuilder: (BuildContext context, index) {
                  return GestureDetector(
                      behavior: HitTestBehavior.translucent,
                      onTap: () {
                       itemNotifier.currentProditem = itemNotifier.itemList[index];
                        Navigator.of(context).push(
                            MaterialPageRoute (builder: (BuildContext context) {
                              return ProductDetail();
                            })
                        );
                        // Navigator.push(context, MaterialPageRoute(builder: (context) => ProductDetail()));
                      },
                      child: Stack(
                        children: <Widget>[
                          Container(
                            margin: EdgeInsets.fromLTRB(40.0, 5.0, 20.0, 5.0),
                            height: 140.0,
                            width: double.infinity,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(20.0),
                            ),
                            child: Padding(
                              padding: EdgeInsets.fromLTRB(
                                  100.0, 10.0, 20.0, 20.0),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Column(
                                    mainAxisAlignment: MainAxisAlignment
                                        .spaceBetween,
                                    crossAxisAlignment: CrossAxisAlignment
                                        .start,
                                    children: <Widget>[
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment
                                            .spaceBetween,
                                        children: <Widget>[
                                          Text(
                                            (itemNotifier.itemList[index].price),
                                            style: TextStyle(
                                                fontSize: 24.0,
                                                color: Colors.black45,
                                                fontWeight: FontWeight.w700
                                            ),
                                          ),
                                          IconButton(
                                            icon: Icon(Icons.favorite),
                                            color: Colors.grey.shade400,
                                            onPressed: () {
                                              setState(() {
                                                print('Go to Favorites');
                                              });
                                            },
                                          ),
                                        ],
                                      ),
                                       Container(
                                          width: 280.0,
                                          child: Text(
                                            (itemNotifier.itemList[index].producttitle),
                                            style: TextStyle(
                                                fontSize: 24.0,
                                                fontWeight: FontWeight.bold
                                            ),
                                            overflow: TextOverflow.ellipsis,
                                            maxLines: 1,
                                          ),
                                        ),
                                      SizedBox(
                                        height: 5.0,
                                      ),
                                    ],
                                  ),
                                  Container(
                                    width: 280.0,
                                    child: Text(
                                      (itemNotifier.itemList[index].description),
                                      style: TextStyle(
                                          color: Colors.grey
                                      ),
                                      overflow: TextOverflow.ellipsis,
                                      maxLines: 2,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          Positioned(
                            left: 20.0,
                            top: 15.0,
                            bottom: 15.0,
                              child: Container(
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.circular(20.0),
                                  boxShadow: [
                                    BoxShadow(
                                      color: Colors.black26,
                                      offset: Offset(0.0, 2.0),
                                      blurRadius: 6.0,
                                    ),
                                  ],
                                ),
                                child: ClipRRect(
                                  borderRadius: BorderRadius.circular(20.0),
                                  child: Image(
                                    width: 110.0,
                                    image: AssetImage(
                                        'image'
                                    ),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                          ),
                        ],
                      )
                  );
                }
            ),
          ),
        );

  }
}

Solution

The problem is you’re recursively calling the set method again inside the set method (hence the stack overflow)

set currentProditem(Proditem proditem){
   currentProditem = proditem; //forgot the underscore,
   // it should be _currentProditem = proditem;
   // To change the variables not the setter again
   notifylisteners();
}

Answered By – EdwynZN

Answer Checked By – Cary Denson (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *