Ad
How Can I Use OnTap In GridView?
I want to use onTap() with GridView and searched in google.
But I did not apply this code.
Therefore could you suggest any solutions?
Recently I started use Flutter and programming.
I think that my question is abstract, so If you have any questions regarding this.
Please feel free to ask me.
Thanks
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title,
style: TextStyle(fontFamily: 'OpenSans'),
),
centerTitle: true,
),
body: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget> [
GridView.count(
primary: true,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
shrinkWrap: true,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
child: const Text("He'd have you all unravel at the"),
color: Colors.teal[100],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Heed not the rabble'),
color: Colors.teal[200],
),
Container(
padding: const EdgeInsets.all(8),
child: const Text('Sound of screams but the'),
color: Colors.teal[300],
),
],
),
],
),
)
),
);
}
}
Ad
Answer
you can use inkwell to make anything clickable
InkWell(
onTap: () {
print('1 was clicked');
},
child: Container(
padding: const EdgeInsets.all(8),
child: const Text('Sound of screams but the'),
color: Colors.teal[300],
),
here is all of you need
import 'package:flutter/material.dart';
import 'package:testflow/clickaletexsheet.dart';
import 'package:testflow/paint.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
widget.title,
style: TextStyle(fontFamily: 'OpenSans'),
),
centerTitle: true,
),
body: Container(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
GridView.count(
primary: true,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
shrinkWrap: true,
children: <Widget>[
Material(
color: Colors.teal[100],
child: InkWell(
onTap: () {
print('1 was clicked');
},
child: Container(
padding: const EdgeInsets.all(8),
child: const Text("He'd have you all unravel at the"),
),
),
),
Material(
color: Colors.teal[200],
child: InkWell(
onTap: () {
print('2 was clicked');
},
child: Container(
padding: const EdgeInsets.all(8),
child: const Text('Heed not the rabble'),
),
),
),
Material(
color: Colors.teal[300],
child: InkWell(
onTap: () {
print('3 was clicked');
},
child: Container(
padding: const EdgeInsets.all(8),
child: const Text('Sound of screams but the'),
),
),
),
],
),
],
),
)),
);
}
}
i also defined the inkwell
as child of a material
widget and passed the color
of container to material instead of container itself because in that way when you click on one of those, the splash will work if you don't do that user won't find out when clicked on it
read more about inkwell hereinkwell
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