[Flutter]丸いWidgetを作る

2022年4月12日
2022年4月14日
Widget
CircleAvatar, CircleBorder, Dart, ElevatedButton, Flutter, widget

Widget

Flutterを書いていて、丸いWidgetがよく必要になるので、書き方を記録しておきます。

Table of Contents

押さないWidget

CircleAvatarを使用する

        const CircleAvatar(
          child: FlutterLogo(),
        )

色々な例

    Column(
      children: [
        const CircleAvatar(
          child: Text(
            '3',
            style: TextStyle(fontSize: 24),
          ),
          backgroundColor: Colors.blue,
          foregroundColor: Colors.white,
        ),
        const CircleAvatar(
          child: FlutterLogo(),
        ),
        const CircleAvatar(
          child: Text('AI'),
        ),
        const CircleAvatar(
          child: Text('あいう'),
        ),
        const CircleAvatar(
          child: Icon(Icons.add),
        ),
    ]

押すWidget

ElevatedButtonにCircleBorderを適応させる

ElevatedButton(
          style: ElevatedButton.styleFrom(
              primary: Colors.white,
              onPrimary: Colors.grey,
              elevation: 5.0,
              shape: const CircleBorder(
                side: BorderSide(color: Colors.grey),
              ),
              padding: const EdgeInsets.all(12)),
          child: const Icon(
            Icons.add,
            color: Colors.black26,
            size: 32,
          ),
          onPressed: () {},
        ),