Flutterでプロフィールアイコンを作ってみましょう！（CircleAvatar紹介）

今のアプリはほとんどプロフィールが入ってるといっても過言ではないほど幅広く使われているのかプロフィールアイコンです。

もちろんFlutterでも簡単に実装ができますので試してみましょう！

実装に入る前に何をするものなのか知ってから実装するのか理解しやすいので説明から始めます！

CircleAvatarの概念

CircleAvatarは円形のウィジェット で、画像やアイコン、テキストを表示できます。主にユーザーのプロフィール写真やグループアイコン、イニシャル表示などに使用されます。

CircleAvatarで使ってる主なプロパティ

プロパティ	説明
radius	円の半径を指定
backgroundColor	背景色
backgroundImage	円の中に表示する画像 (NetworkImage や AssetImage)
child	アイコンやテキストを表示するときに使用
foregroundColor	child のテキストやアイコンの色

使う例

• 実装結果はDartPadを使いました。

１．基本的な真っ白プロフィール

CircleAvatar(
  radius: 30,
  backgroundColor: Colors.grey[300],
  child: Icon(Icons.person, size: 30, color: Colors.white),
)

プロフィールの基本となるまるができました！

２．デフォルトアイコンがあるプロフィール

CircleAvatar(
  radius: 30,
  backgroundColor: Colors.grey[300],
  child: Icon(Icons.person, size: 30, color: Colors.white),
)

1段階上がってデフォルトアイコンでも使われるアイコンも実装ができます！

３．ボーダーラインがあるプロフィール（インスタグラムに使われてる）

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: Scaffold(body: Center(
  child: Container(
    padding: EdgeInsets.all(2),
    decoration: BoxDecoration(
      color: Colors.blue, // ボーダーの色
      shape: BoxShape.circle,
    ),
    child: CircleAvatar(
      radius: 30,
      backgroundImage: NetworkImage('https://example.com/user.jpg'),
    ),
  ),
))));

この実装はインスタンスでよく見かけました！
グラデーションが入るとストリを表現することができます。

４．ステータスを表示するプロフィール

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: Scaffold(body: Center(
  child: Stack(
    children: [
      CircleAvatar(
        radius: 30,
        backgroundImage: NetworkImage('https://example.com/user.jpg'),
      ),
      Positioned(
        bottom: 0,
        right: 0,
        child: Container(
          width: 12,
          height: 12,
          decoration: BoxDecoration(
            color: Colors.green, // オンライン
            shape: BoxShape.circle,
            border: Border.all(color: Colors.white, width: 2),
          ),
        ),
      ),
    ],
  ),
))));

最後にFacebokのメッセージで使ってることです。
ユーザーが現在接続してるのかどうかを表示することができます。

最後に

簡単にアイコンの色んな種類を実装してみました。

Flutterではアプリケーションで使われてる機能をほとんど実装することができますのでかなり魅力的な言語だと思ってます。

もちろん現在のコードをそのまま使うのもありますが、もっとリアルなアプリを作ってみたいならユーザーが接続してるのかどうかを判断するWebSocket、APIが必要ですので
後ほどこちらに関しての投稿も記載してみます。