Flutter Tutorial

How do you make a gesture detector in Flutter?

Gesture Detector

Code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'E-Commerce App',
      theme: ThemeData(primarySwatch: Colors.blue,),
      home: const Home(),
    );
  }
}

class Home extends StatelessWidget{
  const Home({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan.withOpacity(0.5),
      ///////////////////////AppBar ////////////////////////////////
      appBar: AppBar(
        backgroundColor: Colors.deepPurple,
        title: const Text('Home Screen', style: TextStyle(color: Colors.white),),
        leading: const Icon(Icons.home, color: Colors.white,),
      ),

      ///////////////////////End AppBar ////////////////////////////////

      body: Center(
        child:Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
              /////////////////////// GestureDetector ////////////////////////////////
              GestureDetector(
                onTap: (){
                  print('Gesture Clicked');
                },
                onDoubleTap: (){
                  print('OnDoubleTap Clicked');
                },
                child: const Column(
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.people_alt_outlined, color: Colors.amber, size: 50,),
                        SizedBox(width: 10,),
                        Text('Honey', style: TextStyle(color: Colors.white, fontSize: 50, fontWeight: FontWeight.bold),)
                      ],
                    )
                  ],
                ),
              ),
            /////////////////////// End GestureDetector ////////////////////////////////
          ],
        ),
      ),
    );
  }
}

Output

Gesture Detector
Scroll to Top