Customize the click effect of a widget in Flutter

问题

How to customize the click effect of a widget in Flutter, which can be configured in Android：

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
           android:drawable="@drawable/btn_pressed"
/>
<!-- pressed -->
<item android:state_focused="true"
           android:drawable="@drawable/btn_normal"
/>
<!-- focused -->
<item android:drawable="@drawable/btn_normal"
/>
<!-- default -->
</selector>

I want to ask how to implement it in Flutter. Thanks！

回答1:

Using this you can do custom click effect

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'My App',
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  bool isTapped = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: GestureDetector(
          onTapDown: (value) {
            setState(() {
              print('onTapDown');
              isTapped = true;
            });
          },
          onTapUp: (value) {
            setState(() {
              print('onTapUp');
              isTapped = false;
            });
          },
          onTapCancel: () {
            setState(() {
              print('onTapCancel');
              isTapped = false;
            });
          },
          child: _getImage(),
        ),
      ),
    );
  }

  Widget _getImage() {
    AssetImage image = AssetImage('images/icon.png');
    return Image(
      image: image,
      width: 100.0,
      height: 100.0,
      color: isTapped ? Colors.deepOrangeAccent : Colors.orange,
    );
  }
}

来源：https://stackoverflow.com/questions/54050283/customize-the-click-effect-of-a-widget-in-flutter