Flutter技術ブログ

Flutter Draggableで黄色い下線が出る問題の解決法

FlutterでDraggable内のTextに下線

FlutterでMaterialAppを使った際にDraggable内のTextでどうしても黄色い下線が出る問題に遭遇しました。Flutterを始めると割と早い段階でもしかしたら黄色い下線が出る問題に遭遇すると思います。実際私も遭遇しました。なので今回も解決できると思っていました。黄色い下線問題はこの記事で紹介されている3つの方法で大抵は解決できます。

がしかし、今回私が使ったDraggableのfeedbackでTextを含んでいるとどうしても解決しない。こんな感じで黄色い下線も入るし、文字のスタイルすべてが勝手に変更されてします。

しかも、これはドラッグ中にしか発生しない…下の画像のような表示になってしまいます。背景色はデバッグのため入れてるのですが、文字の色や下線は入れていないのに。

Draggable内のTextの装飾が変わる

Draggable内で使用しているTextウィジェット一つ一つにTextDecoration.none指定していけば解決できるようですが、後々面倒になりそうなので諦めずに調べてみるとFlutterのリポジトリにissueが投稿されていた。

このディスカッションの中で一番すっきり解決したのが、

feedback: Material(child: tagContent)

でした。とてもシンプルで感動してしまいました。

なぜドラッグ中だけスタイルが無視されてしまうのか原因は気になるので時間あるときに調べたいと思います。(調べないパターンの言い方^^;)

詳しい方いたらコメントで教えてくれると嬉しいです。