Flutter Takes two taps/clicks to change `ontap` colour change-CodePudding

The parent widget lists the same child widget two times. So there are two clickable SVG images. My intention is to change colour to purple when clicked and colour to grey when clicked again. It's like toggling colours (checking unchecking etc). The issue is when I click one SVG image of first one, then I can't uncheck (change colours) of the second one and vise-versa. It seems like the two widgets use the same svgColourFilled variable. But I'm not quite sure what the real issue of the code is.

Error: No errors, but colour change takes two clicks than one click to change colours if you click 1st image then try to check or uncheck the other one.

Parent Widget

 import 'package:flutter/material.dart';

 final String svgTap1Path = './lib/Assets/svgs/forTools/Tap1.svg';
 final String svgTap2Path = './lib/Assets/svgs/forTools/Tap2.svg';

  
class ToolPanel extends StatefulWidget {
      
const ToolPanel( {Key? key}) : super(key: key);

 @override
  State<ToolPanel> createState() => _ToolPanelState();

  }

  class _ToolPanelState extends State<ToolPanel> {
 
  @override
  Widget build(BuildContext context) {

      return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
          Row(
          
          children: [
            TwoSVGs(
                svgPicPath: svgTap1Path),

            TwoSVGs(
                svgPicPath: svgTap2Path)
                
                
                
                ])]);}}

Child Widget

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

bool svgColourFilled = false;

class TwoSVGs extends StatefulWidget {


final String? svgPicPath;
final Color fillColour ;
final Color emptyColour ;

  const TwoSVGs(
    {Key? key, this.svgPicPath, this.fillColour = Colors.purple, this.emptyColour= Colors.grey}) : super(key: key);

 @override
  State<TwoSVGs> createState() => _TwoSVGsState();

  }

  class _TwoSVGsState extends State<TwoSVGs> {
 
  @override
  Widget build(BuildContext context) {

    

return Column(children: <Widget>[

  Container(

    

child: SizedBox ( width : 80, height : 80, child:


Material(
  
                    color: Colors.transparent,
                    child: InkWell(
                      splashColor: Colors.white,
                      onTap: () {
                                     
                        setState(() {  
                           
                          svgColourFilled = !svgColourFilled;

                          }
                    );
                    }, 

                    child: FittedBox(
                            fit: BoxFit.contain,
                            child: SvgPicture.asset(
                                    widget.svgPicPath!,
                                    color: svgColourFilled == true
                                    ? widget.fillColour
                                    : widget.emptyColour
                                    
                                  )

                          )
                          
                          
                          ))


     ))]
                          ); 
                         } }

CodePudding user response：

On your code snippet, bool svgColourFilled = false;is global and used by both TwoSVGs(), put it inside state class.

class _TwoSVGsState extends State<TwoSVGs> {
  bool svgColourFilled = false;

  @override
  Widget build(BuildContext context) {