web-dev-qa-db-ja.com

Flutter：カードをクリック可能にする方法は？

new Card(child: new Text('My cool card'))のような単純なCardがあります。CardにはonPressedメソッドがないことを除いて、どこかをクリックして何らかの機能を実行できるようにしたいと思います。下部にボタンを追加することもできますが、これはこの状況には理想的ではありません。

誰もがカード全体をクリック可能にする方法を知っていますか？

material-designflutter
15
Jus10

フラッターは、プロパティよりも合成を使用します。目的のウィジェットをクリック可能なウィジェットにラップして、必要なものを実現します。

いくつかのクリック可能なウィジェット： GestureDetector 、 InkWell 、 InkResponse 。

new GestureDetector(
  onTap: ...,
  child: new Card(...),
);
30
Rémi Rousselet

InkWellGestureDetector とは別に、InkWell() Widget内にカードをラップすることもできると思います

InkWell(
  onTap: (){ print("Card Clicked"); }
  child: new Card(),
);
7
maheshmnj

Flutterは InkWell ウィジェットを提供します。コールバックを登録することにより、ユーザーがカードをクリックしたときに何が起こるかを決定できます（フラッターインタップと呼ばれます）。 InkWell は、材料設計のリップル効果も実装します

Card(
  child: new InkWell(
    onTap: () {
      print("tapped");
    },
    child: Container(
      width: 100.0,
      height: 100.0,
    ),
  ),
),
7
Jossef Harush

Inkwellを使用してsplashColorを挿入できます。ユーザーがクリックすると、選択した色のリバウンド効果がカードに作成されます。これは主にマテリアルデザインで使用されます。

return Card(
  color: item.completed ? Colors.white70 : Colors.white,
  elevation: 8,
  child: InkWell(
      splashColor: "Insert color when user tap on card",
      onTap: () async {

      },
    ),
);
1
AlexPad