How to highlightColor when on Click on GestureDetector

user_12089796 0
Viewed 1320

I have a GestureDetector as the below code:

GestureDetector(
                    onTapDown: _onTapDown,
                    onTapUp: _onTapUp,
                    child: Transform.scale(
                      scale: _scale,
                      child: _animatedButtonUI,
                    ),
                  ),

So all I need Iwant to high light the color when on click like the FlatButton as it have an attribute highlightColor...

Is there's a way to do something like this...

and here's the related widget for the GestureDetector:

Widget get _animatedButtonUI => Container(
        height: 50,
        width: 320,
        decoration: BoxDecoration(
          border: Border.all(
            color: Color(0xFF9EC33B),
          ),
          borderRadius: BorderRadius.circular(100.0),
          color: Colors.white,
        ),
        child: Padding(
          padding: const EdgeInsets.only(left: 64),
          child: Row(
            children: <Widget>[
              Image.asset(
                'assets/images/icggl.png',
                width: 24,
              ),
              Center(
                child: Padding(
                  padding: const EdgeInsets.only(left: 20),
                  child: Text(
                    'COTINUE WITH GOOGLE',
                    style: TextStyle(
                      fontSize: 13.0,
                      fontWeight: FontWeight.bold,
                      color: Color(0xFF9EC33B),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      );
dart flutter
2 Answers

if you want color effect when clicking on a custom clickable widget you should use InkWell

and change the highlightColor property value if you want

user_31272820

Inkwell should look like this:

InkWell(
    onTap: () {},
    highlightColor: Colors.red,
    child: _Transform.scale(
      scale: _scale,
      child: _animatedButtonUI,
    ),
 );

-- EDIT --

This modified version of your _animatedButtonUI should do what you want it to:

 Widget _animatedButtonUI (){
    return Container(
        height: 50,
        width: 320,
        decoration: BoxDecoration(
          border: Border.all(
            color: Color(0xFF9EC33B),
          ),
          borderRadius: BorderRadius.circular(100.0),
          color: Colors.white,
        ),
        child: Material(
          type: MaterialType.transparency,
          child: InkWell(
            onTap:(){},
            highlightColor: Colors.red,
            borderRadius: BorderRadius.circular(100.0),
            child: Padding(
              padding: const EdgeInsets.only(left: 64),
              child: Row(
                children: <Widget>[
                  Image.asset(
                    'assets/images/icggl.png',
                    width: 24,
                  ),
                  Center(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 20),
                      child: Text(
                        'COTINUE WITH GOOGLE',
                        style: TextStyle(
                          fontSize: 13.0,
                          fontWeight: FontWeight.bold,
                          color: Color(0xFF9EC33B),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
  }
user_71382840
Related