Ad
Flutter: How To Set Clickable Systems In Each Index At GridView.builder With Navigator.push In Flutter
i want to set clickable system for navigator push in index of GridView builder. but i am not finding the way how to do it because i am new in flutter. please help me. here all source code.
class category_route extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
child: GridView.builder(
itemCount: categoryTitleArray.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: (orientation == Orientation.portrait) ? 3 : 4,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
childAspectRatio: (itemWidth / itemHeight),
),
itemBuilder: (BuildContext context, int index) {
return new Card(
elevation: 0,
color: Colors.transparent,
child: new Column(
children: [
Expanded(
child: Container(
child: Image.asset(
categoryImageArray[index],
fit: BoxFit.contain,
), ), ),
Text(
"${categoryTitleArray[index]}",
)
],), );}, ), ), ),); } }
Ad
Answer
Wrap your Card with gesture detector and use its onTap property
class category_route extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
child: GridView.builder(
itemCount: categoryTitleArray.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: (orientation == Orientation.portrait) ? 3 : 4,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
childAspectRatio: (itemWidth / itemHeight),
),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: (){//navigator push here}
child: new Card(
elevation: 0,
color: Colors.transparent,
child: new Column(
children: [
Expanded(
child: Container(
child: Image.asset(
categoryImageArray[index],
fit: BoxFit.contain,
),
),
),
Text(
"${categoryTitleArray[index]}",
)
],
),
);
)
},
),
),
),
);
}
}
You can also use InkWell instead of gestureDetector which is same but with ripple effect.
Ad
source: stackoverflow.com
Related Questions
- → How do you create a 12 or 24 mnemonics code for multiple cryptocurrencies (ETH, BTC and so on..)
- → Flutter: input text field don't work properly in a simple example..... where am I wrong?
- → Can I customize the code formatting of Dart code in Atom?
- → Is it possible to develop iOS apps with Flutter on a Linux virtual machine?
- → Display SnackBar in Flutter
- → JSON ObjectMapper in Flutter
- → Material flutter app source code
- → TabBarSelection No such method error
- → How do I set the animation color of a LinearProgressIndicator?
- → Add different routes/screens to Flutter app
- → Is there a way to get the size of an existing widget?
- → How to share a file using flutter
- → Is there an easy way to find particular text built from RichText in a Flutter test?
Ad