BETA

Flutterで吹き出しを作る

投稿日:2020-01-28
最終更新:2020-01-28

吹き出しのライブラリ

Flutterで吹き出しを出すためのライブラリとしてBubbleがあります。こちらを使うと吹き出しを簡単に表示できます。
もう一つSpeechBubbleというライブラリもありますが、Bubbleのほうが色々オプションが設定できます。

Bubble

Bubbleを使うと以下のような吹き出しが簡単に表示できます。

最もシンプルな吹き出しの作り方は以下のようになります。

Bubble(  
  nip: BubbleNip.leftTop,  
  child: Text('Hi, developer!'),  
)  

Bubbleのオプション

Bubbleでは次がオプションとして選べます。

  • 吹き出しの色
  • 吹き出しの形状
  • 吹き出しからちょこんと出ているところの位置
  • マージン、パディング

欲しい機能は一通り揃っていてとても便利です。詳細はBubbleのgithubのページをご覧ください。

Bubbleの不満

素晴らしいライブラリなのですが、ちょっとだけ不満があります。
吹き出しからちょこんと出ているやつ(なんというか知らないんですが)の位置が現状は左上、左下、右上、右下しか選べません。

なので、forkして左中央に位置を指定できるようにしてみました。
https://github.com/opqrstuvcut/bubble

こちらを使うと次のように吹き出しの左中央からちょこんとあれが出せます。

コードは以下の通り。

Bubble(  
  nip: BubbleNip.leftCenter,  
  child: Text('ちょこんとでるのが左中央だよ'),  
)  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@opqrstuvcutの技術とか技術以外のブログ 最近フリーランスになりました

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう