LiangXianBo

LiangXianBo

jike
github

思 | 0から1の初心者向けFlutterアプリ開発のまとめ

image

Flutter に 3 か月接触して、現在 2 つの小さなアプリを作りました。1 つは仕事でイージープログラムを使用している小さなアプリを Flutter で再実装しました。2 つ目のアプリはオープンソースプロジェクトのシンプルな RSS リーダーを模倣したものです。

Flutter フロントエンドフレームワーク#


Flutter は、モバイル、Web、デスクトップ、組み込みプラットフォームに適した美しいアプリを構築、テスト、デプロイするための 1 つのコードベースです。

Flutter に出会ったのは偶然の機会で、スマートフォン版の Google Chrome で一目見て、そのクロスプラットフォームの特性に魅了されました。現在、市場にはほとんどのフロントエンドフレームワークがアプリを作成するか、Web を作成するかのどちらかであり、異なるプログラミング言語を学ぶ必要があります。どれも難易度が高いです。

最初は多くの情報をインターネットで見つけましたが、Flutter の成長は順調で、他の成熟したフレームワークと比較してまだ距離がありますが、クロスプラットフォームの特性を考慮すると、クロスプラットフォームの小さなソフトウェアを作成するのには非常に良い選択肢です。また、Dart 言語も比較的簡単なので、最終的に Flutter を選びました。

最初のアプリ#


最初に Flutter で作成したアプリは、営業担当者向けの計算ツールです。仕事でイージープログラムで作成した小さなアプリがありましたが、パソコンでしか使用できず、営業担当者にとってはスマートフォンで使用する方が便利です。このアプリは営業担当者が使用できる可能性が高いもので、実際のニーズがありますので、これを試してから深入りするかどうかを考えます。

最終的に、このプログラム全体の複製には約 2 か月かかりました。基本的には仕事中は夜に作業し、最初のページを作成するのには 6 週間かかりました。学びながら作業を進める必要がありましたが、一部の一般的なコンポーネントの標準化と画面の適応も行いました。2 番目のページでは、コンポーネントのレイアウトにはあまり時間をかけず、データ処理に 3 晩かかりました。1 週間で完成しました。
image

2 番目のアプリ#


シンプルな RSS リーダーです。

これは私が見つけたオープンソースプロジェクトで、プログラムの書き方を模倣して学ぶために使用しました。特にファイルのフレームワークとコードのフォーマットについて学びました。そのため、不要な機能はすべて削除しました。このプロジェクトでは、フィードの解析に多くの時間を費やしました。これが最も重要な機能であり、それ以外のことは何もありません。ソースコードの解析方法について 1 週間かかり、その後、コードを検証しながら学びました。最も重要ないくつかの機能、フィードソースの解析と追加、タイトルの閲覧、および全文表示のページを作成しました。見た目はいくつかの小さな機能に見えるかもしれませんが、実際には 1 か月かかりました。具体的な作成には 2 週間かかりました。その間に、Isar データベースと Riverpod 状態管理の学習も行いました。フィードのデータを取得するためには、データベースが必要で、これまで関与していなかったため、最初のアプリでは Provider を使用して状態管理を行いましたが、ウィジェットツリーをまたいで状態管理を実現するのはやや複雑で、競合が発生しやすいです。一方、Riverpod 状態管理は Provider のラッパーであり、グローバル変数のように使用でき、ウィジェットツリーの制約を受けません。

最終的には非常にシンプルなアプリを作成しましたが、プロジェクトのソースコードを読むことで、以前よりもファイルのフレームワークの設定についてより理解が深まりました。また、非常に使いやすい Isar データベースにも触れることができました。

GitHub リポジトリのリンク

image

私のプログラミング経験#


それ以前に、Python、C 言語、WeChat Mini Program を趣味として学んだことがありますが、基本的な文法と基本的な使用方法についてです。

大学で卒業プロジェクトでマイコンを使用する必要があり、マイコンは C 言語を使用します。その後、大学の卒業設計で WeChat Mini Program を学びました。当時、卒業設計ではIoT ベースのパワートレーニングカウンターを作成しました。当時、卒業設計ではデバイス上で記録されたデータを WeChat Mini Program で表示する必要があり、卒業設計には 1 か月しか時間がありませんでした。その時は毎日朝から晩まで作業し、関連機能のコード構文の学習には 1 週間もかかりませんでした。マイコンは ESP8266 を使用し、Arduino を使用してモジュールに必要なコードを検証し、それを組み合わせました。また、1 週間かけてケースの設計、製作、組み立てを行い、実際に使用し、修正しました。

また、Python の基本的な文法を学び、オフィスの自動化スクリプトを作成することができます。

Flutter は新しい Dart 言語を使用しており、私は Dart の文法を学ぶ必要はありませんでした。以前の他のプログラミング言語の学習経験に基づいて、初心者には完全に必要ありません。プログラミングの基礎があれば、直接プログラムを書くことができ、プログラムを書くことで最も迅速なフィードバックが得られます。

前述のさまざまな基礎を借りて、Dart の文法を学ぶ必要はなく、いくつかのコードを理解できる程度です。基本的には公式のチュートリアルとドキュメントを見て、理解できない場合は Google で検索します。全体的にはまだ理解が十分ではありませんが、基本的なプログラムを書くことができます。

初心者開発の第 1 ステージ:開発環境の設定#


Flutter は私の最初のフロントエンドフレームワークの開発環境の設定でしたが、Flutter の環境設定プロセスには予想外のさまざまな問題があります。特に Windows を使用している場合、Flutter の環境設定には 4 晩かかりました。

この設定プロセスでは、さまざまな問題に遭遇しますが、ほとんどのインストールチュートリアルでは言及されていません。インストールと設定には少なくとも 8 つの問題があり、いくつかの小さな問題は記録されていませんが、幸いにもすべて解決しました。問題のいくつかは解決策を見つけるのにかなりの時間がかかりました。

最初にインストールしたときは、1 つの問題に遭遇するたびに少なくとも 1 時間かかりました。環境設定のこのステージさえクリアできない場合、Flutter のこのフェーズをクリアできないかもしれません。途中で解決策が見つからない場合、このものを放棄しようと思いましたが、現時点では Flutter はクロスプラットフォームで 1 つのコードベースで解決できるフレームワークですので、頑張って設定しました。後半はスムーズに進んで、そうでなければ本当に諦めていたかもしれません。

最後に言いたいのは、Flutter の開発環境は初心者にはまったく優しくありません。

image

初心者開発の第 2 ステージ:コンポーネントの使用#


開発環境の設定をクリアした後、Flutter のコードで簡単な小さなアプリを書くことにはほとんど問題はありません。Flutter は、すべての UI コンポーネントを構築するために Widget ウィジェットの方法を使用します。コンポーネントのスタイルは、直接ウィジェット内で構築され、インタラクションロジックやビジネスロジックもウィジェット内で書かれます。Flutter では、ウィジェットがすべてのページとコンポーネントになり、Flutter では各コンポーネントやページをウィジェットとして見ることができます。ウィジェットは相互にネストされ、最終的にはウィジェットツリーを形成し、コードを書くときには階層を分けません。詳細については、Flutter の内部原理に関連するため、簡単な理解しかできていませんが、私の使用深度にはまだ関与していません。

コンポーネントの使用については、主に公式ドキュメントを参照しました。公式ドキュメントは比較的詳細ですし、インターネット上には多くのチュートリアルもありますので、基本的な使い方を学ぶことができます。

初心者開発の第 3 ステージ:状態管理#


コンポーネントには相互作用があり、異なる状態が発生します。Flutter では、相互作用が発生したときに状態をリアルタイムに変更する方法はさまざまです。コミュニティにはさまざまな状態管理の解決策があり、それぞれに利点と欠点があります。最初はよくわからなかったので、公式のサードパーティパッケージである Provider を選びました。Provider は、ウィジェットの変化を監視できるクラスをラップする使用方法で、自分で構築するよりも少し便利です。簡単な状態管理を行うには問題ありませんが、ウィジェットツリー(またはページ)をまたいで状態管理を行う場合は使いにくいです。これは大きな制約です。

後で Riverpod を学んでから、それがどれほど強力かを知りました。Riverpod は Provider をラップしたものですが、使用方法はグローバル変数のように簡単で、一般的な状態管理には十分です。また、非常に簡単に始めることができ、ほとんどの場合、チュートリアルを見つけるだけで使用できます。一方、Provider は 4 晩かけて理解するのがやっとで、使い方がわからないと使えません。

初心者開発の第 4 ステージ:アプリのパッケージング#


手元には Windows のコンピュータしかないため、Android アプリと Windows アプリのパッケージングしかできません。

Android アプリのパッケージングは初めての場合、手順は少し複雑です。アプリのインストールパッケージをパッケージングする最も重要な部分は、署名の設定です。Android Studio に組み込まれた機能を使用して署名を作成することもできますが、オンラインのチュートリアルは不完全か理解できないものが多いため、この方法は諦めました。その後、コマンドラインを使用して署名を作成する方法を見つけましたが、これは前の方法よりも簡単で、チュートリアルを見つけて試す時間がかかりました。オンラインには不完全なチュートリアルがたくさんあります。

次に、自動署名のコードを設定するためのオンラインチュートリアルに従います。この部分を実行するだけで、基本的には完了です。最初の設定には時間がかかるかもしれませんが、一度だけ設定すれば、プロジェクトごとに 1 回だけ設定すれば十分です。

Windows アプリのパッケージングは比較的簡単で、特に設定は必要ありません。1 行のパッケージングコマンドラインが必要です。

初心者開発の第 5 ステージ:アプリのディストリビューション#


通常、アプリを完成させるには、主要なアプリストアに登録してディストリビューションする必要がありますが、まだやったことがないので、登録にはかなりの時間がかかります。具体的な方法はよくわかりませんが、[蒲公英] アプリ内テストディストリビューションプラットフォームを使用することができます。基本的には無料で使用でき、登録は必要ありません。

最後に#


基本的には、Flutter のアプリプロジェクトの開発プロセスを簡単にまとめました。全体的には、これが私が初めて完全なアプリを開発し、使用することができるプロジェクトです。より複雑なアプリについては、Flutter が対応できるかどうかはまだわかりませんが、現時点ではよくわかりません。

アマチュアの人にとって、Flutter は良い選択肢であり、開発効率も良いです。すでに多くのものが整っているため、シンプルな小さなアプリには問題ありません。

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。