Staggered grid view Flutter onTap is not working on tile in my code

flutter gridview staggered-gridview flutter-onpressed

1,354

Solution 1

E/flutter ( 2640): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: type 'SliverHitTestResult' is not a subtype of type 'BoxHitTestResult'
E/flutter ( 2640): #0      RenderSliverVariableSizeBoxAdaptor.hitTestChildren (package:flutter_staggered_grid_view/src/rendering/sliver_variable_size_box_adaptor.dart:380:27)
E/flutter ( 2640): #1      RenderSliver.hitTest (package:flutter/src/rendering/sliver.dart:1294:11)
E/flutter ( 2640): #2      SliverHitTestResult.addWithAxisOffset (package:flutter/src/rendering/sliver.dart:864:31)
E/flutter ( 2640): #3      RenderSliverEdgeInsetsPadding.hitTestChildren (package:flutter/src/rendering/sliver_padding.dart:221:14)
E/flutter ( 2640): #4      RenderSliver.hitTest (package:flutter/src/rendering/sliver.dart:1294:11)
E/flutter ( 2640): #5      RenderViewportBase.hitTestChildren.<anonymous closure> (package:flutter/src/rendering/viewport.dart:645:24)
E/flutter ( 2640): #6      BoxHitTestResult.addWithRawTransform (package:flutter/src/rendering/box.dart:808:31)
E/flutter ( 2640): #7      BoxHitTestResult.addWithPaintTransform (package:flutter/src/rendering/box.dart:736:12)
E/flutter ( 2640): #8      RenderViewportBase.hitTestChildren (package:flutter/src/rendering/viewport.dart:641:33)
E/flutter ( 2640): #9      RenderBox.hitTest (package:flutter/src/rendering/box.dart:2142:11)
E/flutter ( 2640): #10     RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:120:19)
E/flutter ( 2640): #11     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2142:11)
E/flutter ( 2640): #12     RenderIgnorePointer.hitTest (package:flutter/src/rendering/proxy_box.dart:3121:31)
E/flutter ( 2640): #13     RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:120:19)
E/flutter ( 2640): #14     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2142:11)
E/flutter ( 2640): #15     RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:120:19)
E/flutter ( 2640): #16     RenderProxyBoxWithHitTestBehavior.hitTest (package:flutter/src/rendering/proxy_box.dart:167:19)
E/flutter ( 2640): #17     RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:120:19)
E/flutter ( 2640): #18     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2142:11)
E/flutter ( 2640): #19     RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:120:19)
E/flutter ( 2640): #20     RenderProxyBoxWithHitTestBehavior.hitTest (package:flutter/src/rendering/proxy_box.dart:167:19)
E/flutter ( 2640): #21     RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:120:19)
E/flutter ( 2640): #22     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2142:11)
E/flutter ( 2640): #23     RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:120:19)
E/flutter ( 2640): #24     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2142:11)
E/flutter ( 2640): #25     RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:120:19)
E/flutter ( 2640): #26     RenderCustomPaint.hitTestChildren (package:flutter/src/rendering/custom_paint.dart:508:18)
E/flutter ( 2640): #27     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2142:11)
E/flutter ( 2640): #28     RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:120:19)
E/flutter ( 2640): #29     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2142:11)
E/flutter ( 2640): #30     RenderBoxContainerDefaultsMixin.defaultHitTestChildren.<anonymous closure> (package:flutter/src/rendering/box.dart:2495:24)
E/flutter ( 2640): #31     BoxHitTestResult.addWithRawTransform (package:flutter/src/rendering/box.dart:808:31)
E/flutter ( 2640): #32     BoxHitTestResult.addWithPaintOffset (package:flutter/src/rendering/box.dart:765:12)
E/flutter ( 2640): #33     RenderBoxContainerDefaultsMixin.defaultHitTestChildren (package:flutter/src/rendering/box.dart:2490:33)
E/flutter ( 2640): #34     RenderCustomMultiChildLayoutBox.hitTestChildren (package:flutter/src/rendering/custom_layout.dart:409:12)
E/flutter ( 2640): #35     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2142:11)
E/flutter ( 2640): #36     RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:120:19)
E/flutter ( 2640): #37     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2142:11)
E/flutter ( 2640): #38     RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:120:19)
E/flutter ( 2640): #39     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2142:11)
E/flutter ( 2640): #40     RenderPhysicalModel.hitTest (package:flutter/src/rendering/proxy_box.dart:1767:18)
E/flutter ( 2640): #41     RenderProxyBoxMixin.hitTestChildren (package:flutt

Solution 2

Use InkWell in Place of Gesture

InkWell(
           onTap:(){
             Navigator.push(context,
               MaterialPageRoute(builder:(context)=>resetPage()),
             );
           },
           child: myItems(Icons.border_color,"Blogs"),
         ),

1,354

Author by

Nns_ninteyFIve

Updated on December 01, 2022

Comments

Nns_ninteyFIve over 1 year

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:landregapp/HomePage.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:landregapp/TypeofLands.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "landRegistration App",
      theme: new ThemeData(primarySwatch: Colors.amber),
      home: landReg(),
    );
  }
}

class landReg extends StatefulWidget {
  @override
  _landRegState createState() => _landRegState();
}

class _landRegState extends State<landReg> {
  Material myItems(IconData icon, String heading )
  {
    return  Material(
      color: Colors.amber,
      elevation: 14.0,
      borderRadius:  BorderRadius.circular(24.0),
      child:Center(
        child:Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Padding(
                   padding: const EdgeInsets.all(1.0),
                    child: Icon(
                      icon,
                    ),
                  ),

                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      heading,
                      style: TextStyle(
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),


                ],
              )
            ],
          ),
        )
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Home page"),
        elevation: 5.0,
      ),

     drawer:  new Drawer(
       child: new ListView(
         children: <Widget>[

           new UserAccountsDrawerHeader(

               accountName: new Text("MLHUD"),
               accountEmail: new Text("[email protected]"),
             currentAccountPicture: new CircleAvatar(
               radius: 90.0,
               backgroundImage: AssetImage('asset/image/uganda.jpg'),
                 backgroundColor: Colors.transparent,
             ),
           ),
           new ListTile(
             leading: Icon(Icons.home),
             title: new Text("Home"),
           ),
           new ListTile(
             leading: Icon(Icons.assignment),
             title: new Text("Terms and Conditions"),

           ),
           new ListTile(
             leading: Icon(Icons.info),
             title: new Text("About App"),

           ),

           new ListTile(
             leading: Icon(Icons.phone),
             title: new Text("Contact Us"),
           ),

           new ListTile(
             leading: Icon(Icons.share),
             title: new Text("Share"),
           ),

           new ListTile(
             leading: Icon(Icons.exit_to_app),
             title: new Text("Exit"),
           ),
         ],
       ),
     ),

     body:StaggeredGridView.count(
         crossAxisCount: 2,
         crossAxisSpacing: 12.0,
         mainAxisSpacing: 12.0,

       padding: EdgeInsets.symmetric(horizontal: 10.0,vertical: 8.0),
       children: <Widget>[

         InkWell(
           onTap:(){
             Navigator.push(context,
               MaterialPageRoute(builder:(context)=>resetPage()),
             );
           },
           child: myItems(Icons.graphic_eq,"Recent Updates"),
         ),
         InkWell (
           onTap:(){
             Navigator.push(context,
               MaterialPageRoute(builder:(context)=>HomePage()),
             );
           },
           child: myItems(Icons.library_books,"MMD Exams"),
         ),
         GestureDetector(
           onTap:(){
             Navigator.push(context,
               MaterialPageRoute(builder:(context)=>resetPage()),
             );
           },
           child: myItems(Icons.border_color,"Blogs"),
         ),

         myItems(Icons.assignment,"APPLICATION STATUS"),
         myItems(Icons.event_note,"REGISTRATION STATUS"),
         myItems(Icons.location_on,"PARCEL LOCATOR"),
         myItems(Icons.crop_square,"AREASIZE CONVERTER"),
         myItems(Icons.help,"HELP"),


       ],
       staggeredTiles: [
         StaggeredTile.extent(1, 170.0),
         StaggeredTile.extent(1, 170.0),
         StaggeredTile.extent(1, 170.0),
         StaggeredTile.extent(1, 170.0),
         StaggeredTile.extent(1, 170.0),
         StaggeredTile.extent(1, 170.0),
       ],
      )
    );
  }
}

Here, ontap is not working on StaggeredgridviewTile. What's the problem in my code?

GestureDetector(
   onTap:(){
     Navigator.push(context,
       MaterialPageRoute(builder:(context)=>resetPage()),
     );
   },
   child: myItems(Icons.border_color,"Blogs"),
 ),

gridview is not working with onTap(). What is the problem?

Deepak Ror almost 4 years

have you solved your problem?
Nns_ninteyFIve almost 4 years

no@DeepakKanyan
Yomal Amarathunge almost 4 years

How to use Image ,instead of an icon here?

Nns_ninteyFIve almost 4 years

when i clicked on the grid tile it does not go to the next page
Nns_ninteyFIve almost 4 years

when i clicked on the grid tile icon ,it does not go to the next page ,plz help
KuKu almost 4 years

Is there a log when tap tile or icon? I made a empty page and when tap tile it goto empty page well.
Nns_ninteyFIve almost 4 years

"I used both (InkWell & GestureDetector )but still not going to next page " same problem
Nns_ninteyFIve almost 4 years

@KuKu this is log report when tap to that tile or icon
Nns_ninteyFIve almost 4 years

" please help "
KuKu almost 4 years

Hm... There is a same problem like you.
KuKu almost 4 years

gitmemory.com/issue/letsar/flutter_staggered_grid_view/49/… Just try to flutter clean
KuKu almost 4 years

or look into below link. github.com/letsar/flutter_staggered_grid_view/issues/…