🐷

シュミレータの白画面を直したい。

2024/06/11に公開

スクラップの方でシュミレータを起動できたはいいものの中身が写らず白画面のまま出てきたのでなんとか現時点の中身を反映させたい。

問題の前に今どんなことやってるんですか。

今取り組んでいるのは10個の動画をブックマークで見れるようにし、ブックマークやコメント機能などもついているアプリ制作である。ボトムナビゲーションをセットしてホーム、ブックマーク、アカウントの三つのボタンを作り画面遷移。ホームには10個の動画が並べられていてそこからまた別の動画視聴ページに飛べるようにして、ブックマークをつけれるボタン、またコメント欄を追加してコメントができるようにする。
ブックマークボタンをつけたらブックマークページにその動画が記録されて、コメント機能はアカウントページから名前をとってきてコメントを打った時に反映されるような仕組みにしようとしています。

原因はなんだろうか。

本題、本来映るはずのホームページ、ボトムナビゲーションが出てこない、真っ白の状態で出てくるということは細かな機能部分の不具合ではなくもっとmainな場所で不具合が起きているのではないか?
と思い、main.dart、またボトムナビゲーションを作成してるapp.dartを見てみる。
小一時間ほど原因はなんなのかと考えていたら、
app.dartのページにて、

class _MyStatefulWidgetState1 extends State<MyStatefulWidget1> {
  static final _screens =[
    const MyHomePage(title: 'title', url: 'url'),
    const PageB(),
    const AccountPage(name: 'name', passward: 'passward'),
  ];

_screensの文字がなんか薄い。

ボトムナビゲーションの設定の部分で_screensが機能してないんじゃないだろうか。そう思い参考にしていたサイトのボトムナビゲーションの作り方と比較してみたら。

@overrideのWidget build の中に_screensが定義されていなくて代わりに別の設定が書かれていました。

(参考にさせていただきました。)
https://dev.classmethod.jp/articles/flutter-bottom-navigation/

_screensを定義してみました。
これでいけたかなと思いシュミレータを起動しましたがまたもや白画面。
今度はなんでしょうか。

また小一時間、いや小三時間ほどパソコンにへばりつきながら考えていたら、

class MyApp extends StatelessWidget {
  MyApp ({Key? key}):super(key:key);

   final FirebaseFirestore firestore = FirebaseFirestore.instance;

参考にしているボトムナビゲーションのサイトを参考に比較すると、

二行目のMyAppの前にconstってついてるんやけど。

って思いました、しかしその通りにconstと打っても

error: Can't define the 'const' constructor because the field 'firestore' is initialized with a non-constant value.

とエラーが発生、一体どうしたものかと小何時間ぶつぶつ言いながら進めていたら、
他のコードとかに習って三行目のfinalの前にstaticつけてみようと思いつけてシュミレータを起動したら

うまくいきました

、、、、、、おっふ。
突然のことだったので衝撃。
調べてみればstaticの性質としては「クラスのフィールド変数に指定し、その変数がインスタンスごとに保持されるのではなく、クラスで1つの実体を持つことを宣言する。」とと記載されており、
インスタンス化せずにfinalを定義していたのでその上にstaticをつけたことでうまくいった。という形にまとまった感じ、でしょうか。

(参考にさせていただきました。)
https://terupro.net/flutter-dart-grammar-static/

ということで内容を反映させることができました。
また動画欄ページやブックマークなどの内容を反映させれるようにしていきます。

Discussion