Flutterラボの

プレミアム会員になる

【Flutter】ClipRRectを使ってウィジェットを角丸にする

2020.10.14

Flutterに関する記事を毎日投稿しています。
質問があればTwitterにて受け付けているので、いつでも気軽にご連絡ください。

本日は、ClipRRectウィジェットを紹介したいと思います。
まずは、四角のContainerを用意します。

画像1

@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,
         ),
       ),
     ),
   )
 );
}

画像2

あとは、borderRadiusをお好みで調節してください。

Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ Nuxtラボ:https://flutterlabo.tech/nuxt