Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter】ClipRRectを使ってウィジェットを角丸にする
2020.10.14
Flutterに関する記事を毎日投稿しています。
質問があればTwitterにて受け付けているので、いつでも気軽にご連絡ください。
本日は、ClipRRectウィジェットを紹介したいと思います。
まずは、四角のContainerを用意します。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ClipRRect', style: TextStyle(fontSize: 18),),
centerTitle: true,
),
body: Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 200,
height: 100,
color: Colors.red,
),
),
)
);
}
この四角の赤色Containerの角を丸くするには、ClipRRectで囲ってください。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ClipRRect', style: TextStyle(fontSize: 18),),
centerTitle: true,
),
body: Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(30)), // 調節
child: Container(
width: 200,
height: 100,
color: Colors.red,
),
),
),
)
);
}
あとは、borderRadiusをお好みで調節してください。
Flutterラボ
hatchoutschool
Flutter Daily
Flutterに関する記事を日々更新しています (222本)
![【Dart】Stringからint, double, DateTimeに変換する](https://assets.st-note.com/production/uploads/images/34579094/rectangle_large_type_2_57f8b9d22b8edd5dd7bcca6d883ef3fb.jpeg)
【Dart】Stringからint, double, DateTimeに変換する
2020.09.14
![【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ](https://assets.st-note.com/production/uploads/images/34640890/rectangle_large_type_2_9cd3518ec86a8d45eb0db093426082d1.jpeg)
【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18
![【Dart】【Flutter】DateTime型についてのまとめ](https://assets.st-note.com/production/uploads/images/35816882/rectangle_large_type_2_5d153bec6a1387e9a7cd068fa193bae4.jpeg)
【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01
![【Dart】Map型の使い方とよく使うメソッドまとめ](https://assets.st-note.com/production/uploads/images/34593663/rectangle_large_type_2_444b0971465392f471f0be9b1ce9b91b.jpeg)
【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13