flutter build web
でビルドすると、生成されたindex.html
を開いても空白から進みません。
flutter run
でデバッグ実行すると画面が正しく描画されます。
また、flutter run --release
でも正しく表示されます。
デバッグもリリースビルドも、ビルドすること自体は成功しています。
コード
コードは特に変えていません。簡略化するためにいくつか書き換えました。
main.dart
void main() async {
runApp(ProviderScope(child: Example()));
}
class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: Center(child: Text("Test")),
),
);
}
}
index.html
また、web/index
の<base href="">
を様々な形に変更しても結果は変わりませんでした。
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
.... 以下同じ
flutter doctor -v
Webビルドに関しては特に問題はないように見えます。
[√] Flutter (Channel stable, 3.7.12, on Microsoft Windows [Version 10.0.22621.2134], locale ja-JP)
• Flutter version 3.7.12 on channel stable at C:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 4d9e56e694 (4 months ago), 2023-04-17 21:47:46 -0400
• Engine revision 1a65d409c7
• Dart version 2.19.6
• DevTools version 2.20.1
[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
• Android SDK at C:\Users\user1\AppData\Local\Android\sdk
• Platform android-33, build-tools 33.0.2
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[√] Android Studio (version 2022.2)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
[√] VS Code (version 1.81.1)
• VS Code at C:\Users\user1\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.70.0
[√] Connected device (2 available)
• Chrome (web) • chrome • web-javascript • Google Chrome 115.0.5790.173
• Edge (web) • edge • web-javascript • Microsoft Edge 115.0.1901.203
[√] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 1 category.
試したこと
・index.html
のScript内に以下を追記
<script>
if (platform.name.toLowerCase() == "safari" &&
parseInt(platform.version.split(".")[0]) >= 15) {
window.flutterWebRenderer = "html";
} else {
window.flutterWebRenderer = "canvaskit";
}
</script>
https://stackoverflow.com/questions/75908394/flutter-shows-blank-screen-on-chrome
・flutter clean
からのflutter pub get
・Live Serverを用いたローカルサーバーでの実行
https://stackoverflow.com/questions/73359017/flutter-web-release-showing-blank-screen
どなたかわかる方いらっしゃいましたら教えていただけると幸いです。