如何製作一個帶有顫動圖像的按鈕，當somone按下時突出顯示圖像？

Question

我有一個按鈕，有一個圖像作爲一個孩子。我需要它，以便在按下按鈕的同時，圖像變爲另一個圖像，並且當用戶停止按下按鈕時，圖像會返回到其原始圖像。

基本上我希望它像一個凸起的按鈕，但與自定義圖像的凸起和按下狀態。

下面是相關代碼：

class LoginButton extends StatefulWidget { 
    @override 
    _LoginButtonState createState() => new _LoginButtonState(); 
} 

class _LoginButtonState extends State<LoginButton> { 
    void _onClicked() { 
    setState(() { 
     //I don't know what I should put here to cause the image to redraw 
     //only on button press 

    }); 
    } 

    @override 
    Widget build(BuildContext context) { 
    var assetImage = new AssetImage("assets/loginscreen/btn.png"); 
    var image = new Image(image: assetImage, height: 50.0, width: 330.0); 
    return new Container(
     height: image.height, 
     width: image.width, 
     child: new FlatButton(
     onPressed: _onClicked, 
     child: new ConstrainedBox(
      constraints: new BoxConstraints.expand(), 
      child: image, 
     ), 
    ), 
    ); 
    } 
} 

Answer 1

您可以定義默認的圖像作爲這樣的類_LoginButtonState的屬性

class _LoginButtonState extends State<LoginButton> { 
String _myImage = "assets/loginscreen/btn.png"; ... } 

現在你_onClick方法應包含狀態的變化，只需使用if條件就可以將_myImage的字符串更改爲新圖像

void _onClicked() { 
     setState(() { 
      if (_myImage == "assets/loginscreen/btn.png"){ 
      _myImage = "<my new asset>"; //change myImage to the other one 
      } 
      else { 
       _myImage = "assets/loginscreen/btn.png"; //change myImage back to the original one 
       } 
     }); 
     } 

和窗口小部件的構建中：

var assetImage = new AssetImage(_myImage); 

================================= ==============================================================

更新

我設法做了一個類似的想法，你試圖實現使用GesutureDetector，這裏我用顏色來測試它，但它不應該像改變圖像的鏈接那麼不同，雖然我知道esume重新繪製圖像比改變顏色要慢。

以下是完整的代碼，我用：

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MaterialApp(
    home: new MyApp(), 
)); 
} 

class MyApp extends StatefulWidget { 
    @override 
    _MyAppState createState() => new _MyAppState(); 
} 

class _MyAppState extends State<MyApp> { 
    var _myColor = Colors.blue; 


    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
     title: new Text ("Tap me!"), 
     centerTitle: true, 
    ), 
     body: new GestureDetector(
     onTapDown:(TapDownDetails details) { setState(() { 
     _myColor = Colors.orange; 
    }); 
     }, 
     onTapUp: (TapUpDetails details) { 
      setState(() { 
      _myColor = Colors.blue; 
      }); 
     }, 

     child: new Container (
      color: _myColor, 
     ), 
    ), 
    ); 
    } 
}