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をお好みで調節してください。