flutterでリリースビルドのみ画面が灰色になるエラーに遭遇しました。
こちらのエラーの原因と解決方法を本記事でわかりやすく解説します。
この記事は以下のような方を対象者としています。
- flutterでアプリを開発している方
- flutterで画面が灰色になる現象に遭遇した方
- flutterでリリースビルドのみ画面がグレーになる方
flutterでリリースビルドのみ画面が灰色になる現象 : 症状説明#
まずはこちらをご覧ください。
デバッグビルドの場合
リリースビルドの場合
ご覧の通り、なぜかリリースビルドのみ画面の一部がグレーになります。
ログを見ても特にこのエラーに関するログは出ておらず、原因がわかりませんでした。
グレー部分はタップしても何も起こりません。
flutterでリリースビルドのみ画面が灰色になる現象 : 原因調査#
色々と調査をしてみて、原因が判明しました。
どうやらFlexibleを誤った方法で使ったことが原因で画面の一部がグレー化していたようです。
【本番ビルドのみUIが灰色化する】
— KZY (@KzyRepository) May 31, 2021
◆原因
FlexibleをColumn、Row、Flexの中で使っていないため
◆解決策
Flexible→Containerに変更する
◆備考
リリースビルド時にエラーにならないので原因特定が厄介。
かつ日本語ドキュメントが無い#flutter#備忘録#エラー
上記ツイート内でも触れていますが、Flexibleを使う際にはColumn、Row、Flexのいずれかの内部でのみ利用できるようです。
それ以外で使用するとエラーにはならないものの、リリースビルドで動作確認を行うとFlexibleウィジェット内が全てグレー化します。
flutterでリリースビルドのみ画面が灰色になる現象 : 解決方法#
解決方法としてはFlexibleウィジェットをContainerウィジェットで置き換えます。
<!-- 修正前 -->
class ExampleWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Flexible(
child: Container(
~~~~~~~~~ 省略 ~~~~~~~~~
),
),
);
}
}
<!-- 修正後 -->
class ExampleWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
<!-- FlexibleをContainerに修正 -->
return Container(
child: Container(
~~~~~~~~~ 省略 ~~~~~~~~~
),
),
);
}
}これでリリースビルドを作成し動作確認すると、グレー化した部分が正常に表示されました。
さいごに
ここまでお読みいただきありがとうございました。
私のブログ記事を読んでいる方の中には海外転職・海外移住への興味がある方もいらっしゃるかと思います。
僕はもともと営業職から転職してITエンジニアになり、現在ベトナムで働き始めて7年目になります。
私自身ベトナムで働き始めて7年目になりますが、海外就職を実現するために大事なのは 英語力と開発現場で働いた経験だと感じました。
もし今後海外移住・海外就職を本気で実現させたい方はぜひこれらのサービスを活用してみてください。
また、独学でのベトナム語習得を目指しており現在Youtubeにもベトナム語で動画を更新しております。
日本語字幕もつけて楽しく見れるよう頑張っておりますので、そちらもぜひご興味あればご覧いただけますと幸いです。
ゼロから始めるITエンジニア | テックゲート転職
未経験からITエンジニアを目指すなら「テックゲート転職」がおすすめです。
IT業界に特化したキャリアアドバイザーが、プログラミング未経験者でも安心してスタートできるよう親身にサポートしてくれます。
履歴書・ポートフォリオ作成から面接対策、企業選びまで徹底サポートしてくれるので、キャリアチェンジに不安がある方も安心です。
僕自身も異業種からITエンジニアに転職した経験があるので、第一歩を踏み出すサポートの重要性は痛感しています。
👉「IT業界で働いてみたい」と思ったその瞬間がチャンスです！
▶【公式サイトはこちら】
ゼロから始める英語学習 | スタディサプリENGLISH
ベトナムでITエンジニアとして働く私にとって、英語でのスムーズなやり取りは欠かせません。
スタディサプリENGLISH（新日常英会話コース）は、実践的な会話表現をドラマ仕立てで学べる神アプリ。
1回3分で完結するレッスンだから、忙しい日常でも継続しやすく、自然な表現力が身につきます。英語での雑談や会議がもっとラクになります！
👉今すぐ無料体験して、自信を持って話せる自分に近づきましょう！
▶【公式サイトはこちら】
ゼロから始めるベトナム語学習 | ベトナム語動詞クイズ
ベトナム語動詞検定アプリは、日常会話に必須のベトナム語動詞を効率よく習得できる無料学習ツールです。
四択クイズ形式で出題されるため、ゲーム感覚で語彙力を強化でき、スキマ時間の学習にも最適です。
出題はランダム化されており、繰り返し学習することで自然に記憶が定着します。
初級者から中級者まで対応しており、語彙レベルごとに分かれたカテゴリも充実。
音声読み上げ機能が搭載されているため、発音の練習にも活用可能です。
これからベトナム語を本格的に学びたい方、語学試験対策や留学前の準備をしたい方におすすめのアプリです。
今すぐ「ベトナム語動詞検定」で、語学力アップを目指しましょう！
ゼロから始めるベトナム語学習 | ベトナム語漢越語クイズ
「ベトナム語漢越語発音クイズ」は効率的に語彙力と発音を強化できる無料学習ツールです。
四択クイズ形式で、視覚と聴覚の両方からアプローチし、記憶に残りやすい設計になっています。
日本語の漢字の意味をヒントに、ベトナム語の正しい読み方を選ぶトレーニングができるため、日本人学習者に特化した内容になっています。
音声付きで、ネイティブ発音を繰り返し聞けるのも大きな魅力。発音の基礎を固めたい初心者から、中級者の語彙強化まで幅広く対応しています。
漢越語の理解を深めたい方は、今すぐ「ベトナム語漢越語発音クイズ」で楽しく学習を始めましょう！