简体   繁体   中英

How to make a container 'lighten' on hold / on tap in Flutter?

在此处输入图像描述

I am trying to create an app with a scroll view and the objects are clickable like the google news app. Can anyone answer how to animate the container to have a white glow on holding the tile?

Here is the list view builder I have for the app

                Container(
                  padding: EdgeInsets.only(top: 16),
                  child: ListView.builder(
                      physics: ClampingScrollPhysics(),
                      itemCount: article.length,
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,
                      itemBuilder: (context, index) {
                        return news_tile(
                            imageurl: article[index].urlToimage,
                            news_title: article[index].title,
                            news_desc: article[index].description,
                            web_url: article[index].url
                        );
                      }),
                )

and this is the contents of the tile which the list view builder calls

class news_tile extends StatelessWidget {
  String imageurl, news_title, news_desc,web_url;

  news_tile({this.imageurl, this.news_title, this.news_desc,this.web_url});

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        Navigator.push(context, MaterialPageRoute(
            builder: (context) => article_view(
              web_url: web_url,
            )
        ));
      },
      child: Container(
        margin: EdgeInsets.only(bottom: 16),
        child: Column(
          children: <Widget>[
            ClipRRect(borderRadius: BorderRadius.circular(6), child: Image.network(imageurl)),
            SizedBox(
              height: 8,
            ),
            Text(news_title, style: TextStyle(fontSize: 17,fontWeight: FontWeight.w600)),
            SizedBox(
              height: 8,
            ),
            Text(news_desc, style: TextStyle(color: Colors.black54))
          ],
        ),
      ),
    );
  }
}

You could go with the InkWell Widget. It provides a tapping/holding color effect similar to that. Have a look at the official docs here:

https://api.flutter.dev/flutter/material/InkWell-class.html

Note that you need a Material Widget as an ancestor of your InkWell, but the docs explain that more.

Hope it works for you!

Edit: Sorry, since you are working with a Container, Ink is also important for you: https://api.flutter.dev/flutter/material/Ink-class.html

Check the docs section "The ink splashes aren't visible." for why that is.

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