web-dev-qa-db-ja.com

コンテナのFlutter onTapメソッド

フラッターアプリを開発し、Firebaseデータからコンテナを動的に構築しています。コンテナ（またはボタンではないウィジェット）のonTapメソッドを取得する方法があるかどうかを知りたかったのです。

コードサンプルは次のとおりです。

  child: new Container(

    //INSERT ONTAP OR ONPRESSED METHOD HERE

    margin: const EdgeInsets.symmetric(vertical: 10.0),
    child: new Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        new Container(
          margin: const EdgeInsets.only(right: 16.0),
          child: new GoogleUserCircleAvatar(snapshot.value['images'][0]),
        ),
        new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children : [
            new Container(
              padding: const EdgeInsets.only(bottom: 8.0),
              child: new Text("${snapshot.value['name']}",
                style: new TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
             ),
            new Text("${snapshot.value['description']}",
              style: new TextStyle(
                color: Colors.grey[500],
              ),
            ),
          ]
        )
      ],
    ),
user-interfacebuttondartflutter
14
Alexi Coard

Containerを InkWell または GestureDetector でラップできます。違いは、InkWellはタッチが受信されたことを視覚的に示すマテリアルウィジェットであるのに対し、GestureDetectorは視覚的なインジケータを表示しないより汎用的なウィジェットです。

37
Collin Jackson

コンテナをInkwell（）ウィジェット内にラップすると、問題を解決できたり、GestureDetector（）として

  InkWell(                        
        child: Container(...),                        
        onTap: () {                          
        print("tapped on container");
        },                      
     );

Gesture Detectorの使用

GestureDetector(
  onTap: () { print("Container was tapped"); },
  child: Container(...),
)
10
maheshmnj

他の人が答えで言ったこととは別に、Card内でInkWellを使用すると、InkWellはAndroidの波及効果を隠します。これはバックグラウンドで発生していることがわかります。しかし、カード自体にはありません。

その解決策は、InkWell内にCardを作成することです。

return Card(
  child: InkWell(
    child: Row(
      // Row content
    ),
    onTap: () => {
      print("Card tapped.");
    },
  ),
  elevation: 2,
);

これにより、波及効果を得て、Androidもタップキャプチャを実行できます。

1
Afzaal Ahmad Zeeshan

スクリーンショット：

enter image description here

GestureDetectorを使用しないでください。リップル効果（マテリアルデザインアプリのコア部分）は表示されないため、InkWellを使用できます。基本的な例を次に示します。

Widget _buildContainer() {
  return Material(
    color: Colors.blue,
    child: InkWell(
      onTap: () => print("Container pressed"), // handle your onTap here
      child: Container(height: 200, width: 200),
    ),
  );
}
1
CopsOnRoad