【Flutter】アイコン付き吹き出しを作成し、配置・色を変更するまでの完全ガイド！

import 'package:flutter/material.dart';

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

// MyApp Widgetの定義
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('アイコン付き吹き出しデモ'),
        ),
        body: Center(
          child: ChatBubble(), // ChatBubble Widgetを中央に配置
        ),
      ),
    );
  }
}

// ChatBubble Widgetの定義
class ChatBubble extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10), // 内側の余白を設定
      decoration: BoxDecoration(
        color: Colors.lightBlueAccent, // 背景色を設定
        borderRadius: BorderRadius.circular(12), // 角の丸みを設定
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min, // 子要素の幅に合わせる
        children: [
          Icon(Icons.account_circle, size: 24), // アイコンを配置
          SizedBox(width: 10), // アイコンとテキストの間隔
          Text('こんにちは！'), // テキストを表示
        ],
      ),
    );
  }
}

body: Center(
  child: Align(
    alignment: Alignment.centerRight, // 吹き出しを右側に配置
    child: ChatBubble(),
  ),
),

decoration: BoxDecoration(
  color: Colors.red, // 背景色を赤に設定
  borderRadius: BorderRadius.circular(12),
),