How To Add Image Click Event Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 02-11-2020

Expected : Adding an onClick on images I used GestureDetector but it is throwing error so I need to know what I should use and how.

How To Add Image Click Event Using Flutter Android App

Image Click Event

Step 1: 
  The first step is to create a new folder and name it "assets" at the root of the Flutter project directory as    shown in the image. Now add the image inside the newly created assets directory.


Step 2:
The image added inside the assets/images folder won't be accessible until we list it in the assets section of our pubspec.yaml file. In step 2, list the image file under the assets section of pubspec.yaml as shown below

flutter: 
  assets: 
   - assets/images/

Complete Code For Image Click Event In Flutter
main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int countValue = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
        appBar: AppBar(
          backgroundColor: Colors.blue[700],
          title: Text('Image Click Event'),
        ),
        body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Expanded(
                    child: Center(
                        child: Text(countValue.toString(),
                            style: TextStyle(fontSize: 25.0,color: Colors.white)))),
                GestureDetector(
                  onTap: () {
                    setState(() => countValue += 1);
                  },
                  child: CircleAvatar(
                    backgroundImage: ExactAssetImage('assets/images/images.jpg'),
                    minRadius: 80,
                    maxRadius: 120,
                  ),
                ),
                SizedBox(height: 40)
              ],
            )));
  }
}


 

Related Post