Hackに参加しました。そこで得られた知見をまとめたいと思います。Hackって?Flutterを使ってスライドパズルを作成するハッカソンです。Challengeに続いて2回目でした。Upというパズルゲームを作成しました。こちらから飛べるので是非遊んでみてください。無駄なリビルドを防ぐレスポンシブデザインパズル生成のアルゴリズムパズルの元ネタはポケモン金銀のこおりのぬけみちなのですが、幅優先探索を用いて解けることに気が付きました。こんなアルゴリズムをDartで実装しパズルを自動生成できるようにしました。並列計算を用いてプレイヤーがパズルを解いている間に次のパズルを事前に計算しています。workerを使う必要がありました。今回はisolated_workerを使いました。並列計算する処理はJavascriptでコードを書く必要があるので面倒でした。無駄なリビルドを防ぐレスポンシブデザイン公式でも推奨されているLayoutBuilderを用いた公式ドキュメントの実装例です。_buildNormalContainer()を出し分けています。_buildNormalContainer()がビルドされます。この例ではWidget自体が小さいので問題にならないですが、ネストが深いWidgetの場合は無駄なリビルドが走るという問題が発生することがあります。この問題を避けるために、レスポンシブによるビルド対象を最低限に留める3つの工夫をしています。Treeの構成を変えないAppの根本でLayoutBuilderを用いている箇所のソースコードを抜粋します。});}ここで重要なのはLayoutBuilder以下のchildで条件分岐を与えていない点です。Treeの構成を変えない方法でレイアウトの切り替えを実現しました。サイズの状態に依存しているWidgetのみリビルド今回は日本ではあまり人気の無いBlocライブラリを使って状態を管理しています。サイズの状態をPuzzleResponsiveCubitとして持たせ、context.watch<PuzzleResponsiveCubit>().state.size.boardDimensionという風にして値を参照することでサイズの状態が変わった際に影響のあるWidgetのリビルドが走ります。Widgetで切り出すことでビルド単位を細分化し、無駄なリビルドを防ぎました。下記の説明が参考になると思います。https://youtu.be/IOyq-eTRhvo学んだこと技術的な学びももちろん色々ありますが、意外と技術以外での学びが大きかったです。アプリ開発びっくりするくらい楽しい開発期間中の2ヶ月間本当に楽しくて、作業中はいつもあっという間に時間が過ぎていきました。自分のアイデアを形にして、世に出すことってこんなにもわくわくするんですね。個人開発にハマってる人の気持ちが少し分かった気がします。誰かと一緒にやるって大切はじめは1人だったのでデザインも自分でやってましたが、デザインが致命的にイケてなかったのでいつもお世話になっているデザイナーさんにお願いして途中で入ってもらいました。デザインが良くなったのはもちろんのこと、コンセプトや機能的なところのご意見も幅広く聞けたことが良かったです。1人でやるとどうしても盲目的になってしまうため、誰かと一緒にやって客観的な目線を取り入れるのがすごく大切だと感じました。さいごに充実した2ヶ月でした。「勝つためじゃなくスキルアップのためというマインドセットで臨もう」と決めており、スキルアップという目標については達成できたかなっと思っているので自分としては満足しています。ちなみに他の参加者の作品を見れるのですが、本当にどれも完成度が高くてすごいので是非見てみてください。https://zenn.dev/tmhk_tnht/articles/cd1e97d3306b27著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。Sitemap🍪このウェブサイトは、あなたが我々のウェブサイトで最高の経験を得ることを確実とするために、クッキーを使います。