wake-up-neo.net

Flatter onTap-Methode für Container

Entwickelte eine Flatter-App und baute dynamisch einige Container aus Firebase-Daten auf. Ich wollte wissen, ob es eine Möglichkeit gibt, eine onTap-Methode für Container zu erhalten (oder ein Widget, das keine Schaltfläche ist?

Hier ist ein Codebeispiel:

  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],
              ),
            ),
          ]
        )
      ],
    ),
7
Alexi Coard

Sie können Ihre Container in eine InkWell oder GestureDetector einschließen. Der Unterschied ist, dass InkWell ein Material-Widget ist, das visuell anzeigt, dass die Berührung empfangen wurde, während GestureDetector ein allgemeiner verwendbares Widget ist, das keine visuellen Indikatoren anzeigt.

20
Collin Jackson

umwickeln des Containers in ein Inkwell () Widget könnte das Problem lösen oder sogar GestureDetector () as

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

Verwenden des Gesten-Detektors

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

Abgesehen von dem, was andere in den Antworten gesagt haben, wenn Sie Card in InkWell verwenden, wird InkWell den Ripple-Effekt auf Android verbergen - Sie können sehen, dass dies geschieht im Hintergrund, aber nicht auf der Karte selbst.

Die Lösung hierfür besteht darin, ein InkWell innerhalb des Card zu erstellen.

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

Auf diese Weise können Sie den Ripple-Effekt erzielen und die Tap-Captures auch auf Android durchführen.

Screenshot:

enter image description here


Sie sollten GestureDetector nicht verwenden, da es Ihnen keine Welleneffekte anzeigt (das ist der Kernbestandteil einer Materialdesign-App). Daher können Sie InkWell verwenden. Hier ist das grundlegende Beispiel.

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