🚩
Flutter Webで静的サイトを作ったときのTips
Flutter Webでサイトを作ったときに細々困ったことがでてきたので、そのまとめです。
URLに「#」がデフォルトでつくのをやめたい
setUrlStrategy(PathUrlStrategy()) を使えばOK
pubspec.yaml
dependencies:
flutter:
sdk: flutter
+ flutter_web_plugins:
+ sdk: flutter
main.dart
+ import 'package:flutter_web_plugins/flutter_web_plugins.dart';
void main() {
+ setUrlStrategy(PathUrlStrategy());
runApp(MyApp());
}
日本語フォントの表示がおかしい問題
フォントにGoogleのWebフォントを使おうとした際にフォントの表示がおかしい問題に直面しました。原因は、CanvasKitで描画していることのようです。
一旦HTMLで描画できるようにしました。
開発プレビュー時
$ flutter run -d chrome --web-renderer html
デプロイ時
$ flutter build web --release --web-renderer html
SNSアイコンを簡単に埋め込む
Font Awesome をFlutter Webで利用できるようにpackage導入すればよいです。
レスポンシブ対応したい
MediaQuery.of(context).size.width で画面幅を取得して、flex-wrap のように使えるWrapウィジェットを使って描画を行いました。
テキストを選択できるようにしたい
Flutter標準のTextウィジェットだとなぜか範囲選択ができないので、 SelectableText を使いました。 基本的に Text ウィジェットを SelectableText に置き換えるだけで引数はそのまま利用できました。
SelectableText(
'見出し1',
textAlign: TextAlign.center,
style: GoogleFonts.notoSans(
textStyle: Theme.of(context).textTheme.headline1),
);
実際に作成したサイト
Discussion