[Flutter] BorderRadiusについて

勉強の記録を残していく記事です。
Flutter を始めたばかりの人でもわかりやすい記事にするために、動画や画像を使って解説しています。

BorderRadius は、Container などの角を丸くするときに使います。

borderRadius: BorderRadius.circular(60.0),

borderRadius: BorderRadius.circular(100.0),

指定する値が大きくなるとより丸みのある角になります。

  borderRadius: BorderRadius.horizontal(
                 left: Radius.circular(20.0),
                 right: Radius.circular(100.0),
               ),
               
  borderRadius: BorderRadius.vertical(
                 top: Radius.circular(100.0),
                 bottom: Radius.circular(20.0),
               ),

このような書き方もあります。

 borderRadius: BorderRadius.only(
                 topLeft: Radius.circular(80.0),
                 topRight: Radius.circular(20.0),
                 bottomRight: Radius.circular(80.0),
                 bottomLeft: Radius.circular(20.0),
               ),

それぞれの角に違う半径を指定すれば、より細かくデザインすることもできます。