開発

【Flutter】吹き出しを作る【ShapeDecoration Bubble ボーター】

こんにちは。

スマホアプリをメインに開発しているロッキーカナイです。

今回はFlutterで外枠ボーダーのふきだしのWidgetを作る必要がありましたので、調べた事や関連する情報、作ったものを紹介します。

 

Flutterで吹き出しを使う

手っ取り早く吹き出しを使いたい場合は、こちらのbubbleというライブラリがおすすめです。評価も高く、パラメータも豊富なのでカスタム性もありそうです。

ただ、ボーダーの吹き出しはできなそうなので、自作する事にします。

 

 

Flutterで吹き出しを作る上での参考サイト

こちらのContainerでふきだしを作成する方法に概要がありました。

Containerのdecorationプロパティでボーダーラインを描画する

なるほど。

ContainerのdecorationにShapeDecorationを指定し、自作のShapeBorderを設定で実装できそうという事が分かりました。

ふきだしの形を作るのは、ShapeBorderのgetOuterPath()メソッド内のPathになります。

ただ、ボーダーの吹き出しに関しては書かれてませんでした。(こちらの記事では塗り潰し前提のふきだしで、角丸パーツとふきだしパーツを組み合わせているのでボーダーにすると2つのパーツが枠線されます。)

 

もう一点、

こちらのFlutterで始めるアプリ開発/Flight BookingでPathやShapeBorderに関して、とても参考になりましたので紹介させて頂きます。

 

Flutterでボーダー吹き出しを作る

まず、ShapeBorderを継承したクラスを作ります。

getOuterPath()で、吹き出しのPathを作ります。ボーダーで表現する為に一筆書きの様にPathを組む必要があります。

 

使う際は、こちらの感じで。

 

このコードを使う場合は、必ずこのテキストを使ってくださいw

うそですw

ABOUT ME
ロッキーカナイ
ロッキーカナイ
SwiftやObjective-CでiOS開発や、Flutterを用いたiOS/Androidアプリ開発、PHPでLaravelを使ったWebアプリ開発などをしてます。趣味は猫と戯れる事、キックボクシングにハマってます。ちなみに名前のロッキーカナイは以前よく昼飯を食べてた所。