世界最大級のオンライン学習サービス「Udemy(ユーデミー)」とは?

【Flutter】CircleAvatarの使い方|丸いプロフィールアイコンを作成

Flutterのウィジェット「CircleAvatar」の使い方を紹介します。

「CircleAvatar」では丸いアイコンを作成したり、画像を丸く切り抜いたりできます。

目次

CircleAvatarの使い方

「CircleAvatar」の「radius」で丸いアイコンの半径を指定できます。

アイコン上に別のウィジェットを表示したい場合は「child」を使用します。

CircleAvatar(
  radius: 100,
  child: Text(
    'FL',
    style: TextStyle(fontSize: 50),
  ),
),

背景色・前景色を変更する

背景色を変更するには「backgroundColor」、背景の手前に適用される色を指定するには「foregroundColor」を使用します。

CircleAvatar(
  radius: 100,
  foregroundColor: Colors.amber,
  backgroundColor: Colors.purple,
  child: Text(
    'FL',
    style: TextStyle(fontSize: 50),
  ),
),

背景画像を指定する

CircleAvatar(
  radius: 100,
  backgroundImage: NetworkImage(
    'https://images.unsplash.com/photo-1544717304-a2db4a7b16ee',
  ),
),

プロフィールアイコン画像などを背景として使用したい場合には「backgroundImage」を使用します。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Center(
          child: CircleAvatar(
            backgroundImage: NetworkImage(
              'https://images.unsplash.com/photo-1544717304-a2db4a7b16ee',
            ),
            radius: 100,
          ),
        ),
      ),
    );
  }
}

以上です。

合わせて読みたい

参考サイト

目次