Question 361026 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – how to add gesture in appbar

I want to implement gestures detector in appBar. When user click image or name and it direct to another page. But it display error Found this candidate, but the arguments don't match. GestureDetector({ ^^^^^^^^^^^^^^^ Try again after fixing the above error(s).

I was trying many things but I get only errors. I am new in all of that and I would appreciate some help.

This my appBar code

Widget build(BuildContext context) {
    return  MaterialApp(
      home: Scaffold( 
        appBar: AppBar(
          flexibleSpace: GestureDetector(
            onTap: (){
              Navigator.pushNamed(context, LoginPage.routeName);
            },
          
        title: Row(
          children: [
            const CircleAvatar(
              radius: 20,
              backgroundImage: NetworkImage(
                  'https://i1.sndcdn.com/artworks-79AS3zNyDuB420uC-pKTA2w-t500x500.jpg'),
            ),
            const SizedBox(
              width: 10,
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  'Welcome Back!',
                    style: TextStyle(
                        fontSize: 13,
                        fontWeight: FontWeight.w400,
                        color: Colors.black87)
                ),
                Text('Guest',
                    style: TextStyle(
                        fontSize: 19,
                        fontWeight: FontWeight.w600,
                        color: Colors.black87
                            )),
              ],
            ),
          ],
          )),
        forceMaterialTransparency: true,
      ),
      body: Container(

      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/images/header_home.jpg'),
          fit: BoxFit.cover,
        ),
      ),
        child: SingleChildScrollView(
          padding: EdgeInsets.symmetric(vertical: 16),
          child: Column(
            children: [
              filterField(),
            ],
          ),
        ),
      ),
    ),
    );
Tags:

2

Answers


  1. 0

    GestureDetector requires a child Widget to execute, the Gesture behaviour will execute on the child widget.

    Whatever widget you want clickable, just wrap with the GestureDetector and add onTap and other required property.

    Basic example:

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: GestureDetector(
            onTap: () {
              print('AppBar title tapped!');
            },
            child: Text('Gesture Detector Example'),
          ),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              print('Container tapped!');
            },
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Tap me!',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    this is what you need to do. referring to ankushlokhande answer

    keep in mind to change these parts to adapt to your code needs

    Navigator.pushNamed(context, LoginPage.routeName);

     child: Row(
        children: [
          GestureDetector(
            onTap: () {
              Navigator.pushNamed(context, LoginPage.routeName);
            },
            child: const CircleAvatar(
              radius: 20,
              backgroundImage: NetworkImage(
                  'https://i1.sndcdn.com/artworks-79AS3zNyDuB420uC-pKTA2w-t500x500.jpg'),
            ),
          ),
          const SizedBox(
            width: 10,
          ),
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                'Welcome Back!',
                style: TextStyle(
                    fontSize: 13,
                    fontWeight: FontWeight.w400,
                    color: Colors.black87),
              ),
              GestureDetector(
                onTap: () {
                  Navigator.pushNamed(context, LoginPage.routeName);
                },
                child: Text('Guest',
                    style: TextStyle(
                        fontSize: 19,
                        fontWeight: FontWeight.w600,
                        color: Colors.black87)),
              ),
            ],
          ),
        ],
      ),
    ),
    forceMaterialTransparency: true,
  ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search