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

【Flutter】Bubbleの使い方|バブルチャットの吹き出しを作る

今回は外部パッケージを導入して使用できる「Bubble」の基本的な使い方について紹介します。

Bubbleを使えば簡単にTextなどをバブル型の吹き出しにできます!

目次

外部パッケージの導入

$ flutter pub add bubble
$ flutter pub get

pubspec.yamlにパッケージを追加・更新

import 'package:bubble/bubble.dart';

dartファイルにコピペ

Bubbleの使い方

Bubbleのchildプロパティで吹き出しにしたいWidgetを指定します。スタイルは基本的にContainerと同じように指定できます。BubbleのReadmeが画像付きで分かりやすく説明しているので詳細はそちらをお読みください!

//ソース
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Flutter'),
      ),
      body: Column(
        children: [
          SizedBox(
            width: double.infinity,
          ),
          Bubble(
            margin: BubbleEdges.all(10),
            color: Colors.lightGreenAccent[200],
            alignment: Alignment.centerLeft,
            child: Text(
              'Hello World',
              style: TextStyle(fontSize: 30),
            ),
          ),
          Bubble(
            margin: BubbleEdges.all(10),
            color: Colors.lightGreenAccent[200],
            nip: BubbleNip.leftTop,
            alignment: Alignment.centerLeft,
            child: Text(
              'Hello World',
              style: TextStyle(fontSize: 30),
            ),
          ),
          Bubble(
            margin: BubbleEdges.all(10),
            color: Colors.cyanAccent,
            nip: BubbleNip.rightTop,
            alignment: Alignment.centerRight,
            elevation: 5,
            child: Text(
              'Hello World',
              style: TextStyle(fontSize: 30),
            ),
          ),
          Bubble(
            margin: BubbleEdges.all(10),
            color: Colors.cyanAccent,
            nip: BubbleNip.rightTop,
            alignment: Alignment.centerRight,
            elevation: 5,
            radius: Radius.circular(20),
            child: Text(
              'Hello World',
              style: TextStyle(fontSize: 30),
            ),
          ),
        ],
      ),
    ),
  );
}

以上です。

参考

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