4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Flutter Cardウィジェットの中の画像にBorderRadiusを適応する方法

Posted at

Cardウィジェットの中の画像、角が丸くならない!

スクリーンショット 2021-04-30 8.20.57.jpg

// 省略
 @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => selectMovie(context),
      splashColor: Theme.of(context).primaryColor,
      borderRadius: BorderRadius.circular(10),
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        child: Row(
          children: <Widget>[
            if (posterPath != null)
              Image.network(
                'https://image.tmdb.org/t/p/w154/${posterPath}',
              ),
            Expanded(
              child: Container(
                padding: const EdgeInsets.all(10),
                child: Column(
// 省略

こんな感じのCardウィジェットがあったとします。
CardにBorderRadiusをつけているのですが、画像がない右側の角しか適応されていません!!!

画像がある場合はどうすればいいのでしょうか?

clipBehaviorを併用する

clipBehaviorがどんな役割を持っているのか?は正直詳しくはわかりません。。:sweat_smile:

// 省略
 @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => selectMovie(context),
      splashColor: Theme.of(context).primaryColor,
      borderRadius: BorderRadius.circular(10),
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        clipBehavior: Clip.antiAliasWithSaveLayer, // 追加!!
        child: Row(
          children: <Widget>[
            if (posterPath != null)
              Image.network(
                'https://image.tmdb.org/t/p/w154/${posterPath}',
              ),
            Expanded(
              child: Container(
                padding: const EdgeInsets.all(10),
                child: Column(
// 省略

スクリーンショット 2021-04-30 8.20.34.jpg

これで画像がある領域でも角が丸くなりました!

参考

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?