🚩

Flutter Webで静的サイトを作ったときのTips

1 min read

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());
}

https://api.flutter.dev/flutter/flutter_web_plugins/PathUrlStrategy-class.html

日本語フォントの表示がおかしい問題

フォントにGoogleのWebフォントを使おうとした際にフォントの表示がおかしい問題に直面しました。原因は、CanvasKitで描画していることのようです。

https://pub.dev/packages/google_fonts

https://flutter.dev/docs/development/tools/web-renderers

一旦HTMLで描画できるようにしました。

開発プレビュー時

$ flutter run -d chrome --web-renderer html

デプロイ時

$ flutter build web --release --web-renderer html

SNSアイコンを簡単に埋め込む

Font Awesome をFlutter Webで利用できるようにpackage導入すればよいです。

https://fontawesome.com/v5.15/icons?d=gallery&p=2

https://pub.dev/packages/font_awesome_flutter

レスポンシブ対応したい

MediaQuery.of(context).size.width で画面幅を取得して、flex-wrap のように使えるWrapウィジェットを使って描画を行いました。

https://api.flutter.dev/flutter/widgets/Wrap-class.html

実際に作成したサイト

https://lp.hhg-exe.jp/

Discussion

ログインするとコメントできます