😊
Flutter widgetbookやdevice_previewでボタンのパディングがおかしくなる件(FlutterWeb)
事象
widgetbookやdevice_previewで特に特別な設定をせずに使用すると
以下のようにボタンのパディングが全く効かず実際の見た目と乖離してしまう
解決方法
ThemeDataに
- materialTapTargetSize
- visualDensity
こちらの設定を明示する
サンプルコード
final _themeDataLight = ThemeData(
brightness: Brightness.light,
materialTapTargetSize: MaterialTapTargetSize.padded,
visualDensity: VisualDensity.standard,
);
解説
widgetbookやdevice_previewの問題というより
そもそもmaterialTapTargetSizeとvisualDensityの設定が
プラットフォームで異なっているので明示することで統一するという感じ
なのでライブラリ固有の問題ではなくFlutterWebで発生する問題です
どうして違うのか全くよくわからんけど
Web側が異なっていると何か都合のいいことがあるのかも？
この辺気になる人はwidgetbookやdevice_previewの時だけ変更するのもいいかもです
参考記事
Discussion