FlutterのContainerで角丸のUIを実装する方法

image

この記事は、【 可茂IT塾 Advent Calendar 2021 】の5日目の記事です。

FlutterでのContainerで角丸を実装する方法をサクッと解説します。

Containerの角丸

全体に角丸

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(10),
  ),
)

img1

一部に角丸

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(50),
    ),
  ),
)

img2

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.red,
    shape: BoxShape.circle,
  ),
)

img3

お知らせ

8月6日開催のアプリ開発講座の参加者募集中!!

8月6日開催のアプリ開発講座の参加者募集中!!

8月6日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

お知らせ

8月6日開催のアプリ開発講座の参加者募集中!!

8月6日開催のアプリ開発講座の参加者募集中!!

8月6日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More