简体   繁体   中英

How to make interactive icon in flutter?

I have a small problem.

I want to click on my custom icon, and I don't know how to do that :c

after this click, I want to go to another widget, but with that, I can try to work (i hope)

if u can tell me also how to do it with the entire widget.

class secondWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 100,
      margin: EdgeInsets.only(top: 100, bottom: 10),
      color: Colors.pink,
      child: new Icon(const IconData(0xe800, fontFamily: 'Dupa')),
      //this is not working :c
      onPressed: () {
         newWidgetGoBrr();
});
    );

Container doesn't have an onPressed . You need to use a GestureDetector widget with either Container or Icon.

GestureDetector(
  onTap: () {
    // after click logic goes here.
    newWidgetGoBrr();
  },
  child: Container(
    height: 100,
    width: 100,
    margin: EdgeInsets.only(top: 100, bottom: 10),
    color: Colors.pink,
    child: new Icon(const IconData(0xe800, fontFamily: 'Dupa')),
  ),
),

What you need is some type of detector that can detect your gesture. It can be obtained through many widgets but the most frequently used one is GestureDetector and InkWell .

You can wrap your Icon with an either of the widget. These widgets gives you access to the onTap property.

It's better to wrap your Icon with the Inkwell/GestureDector than to wrap the whole container(that depends on your requirement).

You can implement it like this:

class secondWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 100,
      margin: EdgeInsets.only(top: 100, bottom: 10),
      color: Colors.pink,
      child: InkWell(
        onTap: newWidgetGoBrr(), // your logic
        child: Icon(
          const IconData(0xe800, fontFamily: 'Dupa'),
        ),
      ),
    );
  }
}

Note: With the new flutter release you don't need to use the new keyword anymore.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM