ChangeNotifier changing but widget not updating with gestureDetector

Question

I have this simple changeNotifierProvider

here it is

import 'package:flutter/material.dart';

class CreatePetProvider extends ChangeNotifier {
  String? _gender = 'Male';
  get gender => _gender;


  set changeGender(String gender){
    _gender = gender;
    // print(this.gender);
    notifyListeners();
  }
}

here is in main.dart

    return MultiProvider(
      providers: [
        ChangeNotifierProvider<CreatePetProvider>(
          create: (_) => CreatePetProvider(),
        )
      ],
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: AppTheme.lightTheme,
        home: const LoginScreen(),
        routes: routes,
      ),
    );
  }
}

Here's my widget which is not being updated

GestureDetector(onTap: () => _genderProvider.changeGender = 'Male', child: GenderButton(title: 'Male', selected: _genderProvider.gender == 'Male')),
GestureDetector(onTap: () => _genderProvider.changeGender = 'Female', child: GenderButton(title: 'Female', selected: _genderProvider.gender == 'Female'))

Those are simply two buttons which change their background when selected.

Here is the widget code

import 'package:flutter/material.dart';

import '../../theme/app_theme.dart';

class GenderButton extends StatelessWidget {
  const GenderButton({
    Key? key,
    required this.title,
    required this.selected,
  }) : super(key: key);

  final String title;
  final bool selected;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        gradient: LinearGradient(
          colors: selected
              ? [AppTheme.gradient1, AppTheme.gradient2]
              : [Colors.white, Colors.white],
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.25),
            spreadRadius: 0,
            blurRadius: 5,
            offset: const Offset(1, 1), // changes position of shadow
          ),
        ],
      ),
      child: Text(
        title,
        style: TextStyle(
          color: selected ? Colors.white : Colors.black,
          fontWeight: FontWeight.w500,
          fontSize: 16,
          fontFamily: 'Montserrat',
        ),
      ),
    );
  }
}

I have no idea what I am doing wrong every other provider in my app is working. I hope you can help me. Thanks in advance!

Answer 1

Code is working fine. I am not facing any problem with this code. button is changing color, also ui gets selected gender perfectly.

check if you initialize provider correctly on ui in build function

 final _genderProvider = Provider.of<CreatePetProvider>(context);