Cardウィジェットの中の画像、角が丸くならない!
// 省略
@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がどんな役割を持っているのか?は正直詳しくはわかりません。。
// 省略
@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(
// 省略
これで画像がある領域でも角が丸くなりました!
参考