Udemyセール開催中! 対象コースが1,220円から

【Flutter】CircleAvatarの使い方|丸いプロフィールアイコン・テキストを表示

今回は「CircleAvatar」の基本的な使い方について紹介します。

CircleAvaterを使えばプロフィール用のアイコン画像やテキストを表示できます!

目次

CircleAvatarの基本プロパティ

radius

radiusプロパティでサークルアイコンの半径を指定できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CircleAvatar(
            radius: 100,
          ),
        ),
      ),
    );
  }

backgroundColor

backgroundColorプロパティでアイコンの背景色を指定できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CircleAvatar(
            radius: 100,
            backgroundColor: Colors.orange,
          ),
        ),
      ),
    );
  }

backgroundImage

backgroundImageプロパティで背景画像を指定できます。ImageProviderで画像を指定します。

ImageProvider:AssetBundleImageProvider, MemoryImage, NetworkImage, etc.

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CircleAvatar(
            radius: 100,
            backgroundColor: Colors.blueGrey,
            backgroundImage: NetworkImage(
                "https://flutternyumon.com/wp-content/uploads/2022/02/blue-bird.png"),
          ),
        ),
      ),
    );
  }

child

childプロパティで指定したWidgetはbackgroundColor, backgroundImageの手前に表示されます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CircleAvatar(
            radius: 100,
            child: Text(
              "AB",
              style: TextStyle(
                fontSize: 50,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }

foregroundColor

foregroundColorプロパティでTextのデフォルト色を指定できます。

//ソース

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CircleAvatar(
            radius: 100,
            foregroundColor: Colors.red,
            child: Text(
              "AB",
              style: TextStyle(
                fontSize: 50,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }

以上です。

参考

  • URLをコピーしました!
目次
閉じる