🌘
Flutter Web使うときのメモ
テキストが選べない
普通のwebサイトは文字の上をドラッグすると選択できてコピーとかペーストできると思うのですが、Textウィジェットを使用すると選択できないです。
解決法
TextウィジェットではなくSelectableTextウィジェットを使用する。
SelectableTextウィジェットはTextFieldから内容を変更する機能を取り払ったようなもので、結構思い通りに動いてくれます。ブラウザごとの挙動の制御に困る
Edgeのパスワードフォームの目を消したいというのがありました(以下を消すのをFlutterWebでやりたい)
解決法
dart:htmlで無理やり書き換える。
final nodeValidatorBuilder = NodeValidatorBuilder.common()
..allowElement('style');
document.querySelector('head').insertAdjacentHtml(
'beforeend',
'''
<style>
input::-ms-reveal,
input::-ms-clear{
display: none;
}
</style>
''',
validator: nodeValidatorBuilder,
);
FlutterWebの機能のみでブラウザごとの挙動を制御することは無理(多分)なのでdart:htmlでcssを追加します。以下補足。
- cssを追加する際に以下の設定をしておかないとエラーが出る
final nodeValidatorBuilder = NodeValidatorBuilder.common()..allowElement('style');
参考) https://stackoverflow.com/questions/60276170/use-js-library-in-flutter-web
- 本文。headの、最後に、指定したhtml、を追加する感じ。今回はEdgeの目のマーク(reveal)とIEのバツボタン(clear)を消してる。
document.querySelector('head').insertAdjacentHtml(
'beforeend',
'''
<style>
input::-ms-reveal,
input::-ms-clear{
display: none;
}
</style>
''',
validator: nodeValidatorBuilder,
);
リロード(F5)押されると持ってる状態が消える
F5押されるとChangeNotifierやBlocに持ってる要素がリセットされます。ネイティブアプリ作ってるときは気にしなくて良い要素というかFlutterしか触ったことないのでつまづきました。
解決法
sessionStorageを利用する。以下参考にjsのページですがdart版がdart:htmlで使えます。
以下使用例- 保存するとき
// オブジェクトをJsonでsessionStorageに保存
final aaaaJsonMap = aaaaObject.toJson();
window.sessionStorage['キー1'] = jsonEncode(aaaaJsonMap);
- 取り出すとき
// sessionStorageからJson取り出してオブジェクト生成
final aaaaJsonMap = jsonDecode(window.sessionStorage['キー1']);
final aaaaObject = AaaaObject.fromJson(aaaaJsonMap);
// お使いの状態管理の何かに入れる
final aaaaBloc = AaaaBloc.fromObject(aaaaObject);
大体全部sessionStorageに保存しておけば上手くいく気がする。でもWebやってる人ならもっと詳しいのではと思った。
感想
Webも基本的にFlutterそのままの書き方で書けちゃうのはすごいと思った。
ただ気をつけないとすぐに重くなってしまったり(Webだと一画面のWidgetが多くなるため)結局html書かないとできないことがあったりする。
Discussion