Flutter - Container onPressed?

后端 未结 6 1650
孤街浪徒
孤街浪徒 2021-01-30 20:01

I have this container:

  new Container(
    width: 500.0,
    padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
    color: Colors.green,
    child: new C         


        
相关标签:
6条回答
  • 2021-01-30 20:08

    Just wanted to add on to The Dumbfounds answer(accepted ans above)

    If you are using GestureDetector or InkWell to handle the click of a group of icon and text, then use Icon widget instead of IconButton to display the icon as the onPressed method of IconButton will take over the onTap method of GestureDetector/InkWell and as a result the onTap then will only work if you click on the text.

    Example -

    @override
      Widget build(BuildContext context) {
        return Row(mainAxisSize: MainAxisSize.min, children: [
          GestureDetector(
            onTap: () {
              _toggleFavorite();
            },
            child: Row(
              children: [
                Container(
                  padding: EdgeInsets.all(0.0),
                  child: _isFavorited ? Icon(Icons.star, color: Colors.red[500]) : Icon(Icons.star_border),
                ),
                SizedBox(
                  width: 18.0,
                  child: Container(
                    child: Text('$_favoriteCount'),
                  ),
                )
              ],
            ),
          )
        ]);
      }
    }
    
    0 讨论(0)
  • 2021-01-30 20:14

    The container itself doesn't have any click event, so to do that there are two ways

    1. InkWell widget
    2. GestureDetector

    In Flutter, InkWell is a material widget that responds to touch action.

    InkWell(
        child: Container(......),
        onTap: () { 
            print("Click event on Container"); 
        },
    );
    

    GestureDetector is a widget that detects the gestures.

    GestureDetector(
        onTap: () { 
            print("Click event on Container"); 
        },
        child: Container(.......),
    )
    

    Difference

    InkWell is a material widget and it can show you a Ripple Effect whenever a touch was received.

    GestureDetector is more general-purpose, not only for touch but also for other gestures.

    0 讨论(0)
  • 2021-01-30 20:17

    The simplest solution is to wrap the Container in a GestureRecognizer, but consider using an InkWell or FlatButton if you are building a Material design app. These widgets will show a visual splash response when touched.

    0 讨论(0)
  • 2021-01-30 20:18

    I guess you can use GestureDetector widget like this:

    new GestureDetector(
            onTap: (){
              print("Container clicked");
            },
            child: new Container(
              width: 500.0,
              padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
              color: Colors.green,
              child: new Column(
                  children: [
                    new Text("Ableitungen"),
                  ]
              ),
            )
        );
    
    0 讨论(0)
  • 2021-01-30 20:24

    Don't use GestureDetector, it doesn't show ripple effect. Use InkWell instead.

    InkWell(
      onTap: () {}, // Handle your callback
      child: Ink(height: 100, width: 100, color: Colors.blue),
    )
    

    Output:

    0 讨论(0)
  • 2021-01-30 20:24

    If you want a simple tap event then you can do it by GestureDetector

    GestureDetector(
        onTap: (){
          print("Container clicked");
        },
        child: new Container(...)          
    );
    

    If you want ripple animation on tap event then use InkWell

    InkWell(
        onTap: (){
          print("Container clicked");
        },
        child: new Container(...)          
    );
    
    0 讨论(0)
提交回复
热议问题