私はフロントエンド Web 開発者としてスタートし、その後、 フラッター デベロッパー。 Flutter をより簡単に採用するのに役立ついくつかの概念があったと思います。 また、これまでとは異なる新しいコンセプトもいくつかありました。
この記事では、私の経験を共有し、概念がどのように引き継がれ、新しい概念が学習可能であるかを示すことで、エコシステムを選択することに麻痺していると感じている人を鼓舞したいと思います.
引き継がれた概念
このセクションでは、フロントエンド Web 開発と Flutter が似ている場所を示します。 Flutter を始めると有利になる、すでに持っているスキルについて説明します。
1. ユーザー インターフェイス (UI) の実装
特定の UI をフロントエンド Web に実装するには、HTML 要素を作成し、CSS でスタイルを設定します。 Flutter で UI を実装するには、次のように構成します。 ウィジェット そしてそれらをスタイリングする プロパティ.
CSS のように、 Color Dart のクラスは「rgba」と「hex」で動作します。 また、CSS と同様に、Flutter はスペースとサイズの単位にピクセルを使用します。
Flutter には、ほぼすべての CSS プロパティとその値に対応する Dart クラスと列挙型があります。 例えば：
フラッターにもあります Column & Row ウィジェット。 これらはFlutterに相当します display: flex CSSで。 構成するには justify-content & align-items 使用するスタイル MainAxisAlignment & CrossAxisAlignment プロパティ。 を調整するには flex-grow スタイル、影響を受ける子ウィジェットをラップします Column/Rowで、 Expanded or Flexible.
高度な UI の場合、Flutter には CustomPaint クラス – Flutter には Canvas API Web開発です。 CustomPaint 任意の UI を自由に描画できるペインターを提供します。 通常は使用します CustomPaint 本当に複雑なものが必要な場合。 また、 CustomPaint ウィジェットの組み合わせが機能しない場合の頼りになる方法です。
2. 複数人向けの開発 画面の解像度
Web サイトはブラウザーで実行され、モバイル アプリはデバイスで実行されます。 そのため、どちらのプラットフォーム向けに開発する場合でも、プラットフォームを念頭に置く必要があります。 各プラットフォームは、同じ機能 (カメラ、場所、通知など) をさまざまな方法で実装しています。
Web 開発者は、Web サイトの応答性について考えます。 メディア クエリを使用して、Web サイトが小さい画面や広い画面でどのように表示されるかを処理します。
モバイル Web 開発から Flutter に移行すると、 MediaQuery ヘルパー クラス。 の MediaQuery クラスは現在のデバイスを提供します orientation (横または縦)。 また、現在のビューポートも提供します size devicePixelRatioなどのデバイス情報があります。 これらの値を組み合わせると、モバイル デバイスの構成に関する洞察が得られます。 これらを使用して、さまざまな画面サイズでのモバイル アプリの外観を変更できます。
3. デバッガー、エディター、およびコマンド ライン ツールの使用
デスクトップ ブラウザーには開発者ツールがあります。 これらのツールには、インスペクター、コンソール、ネットワーク モニターなどが含まれます。これらのツールは、Web 開発プロセスを改善します。 フラッターにも独自の DevTools. ウィジェットインスペクター、デバッガー、ネットワークモニターなどの機能があります。
IDE サポートも同様です。 Visual Studio Code は、Web 開発用の最も一般的な IDE の XNUMX つです。 VS Code には Web 関連の拡張機能が多数あります。 Flutter も VS Code をサポートしています。 そのため、移行中に IDE を変更する必要はありません。 VS Code には Dart と Flutter の拡張機能があります。 Flutter は Android Studio でもうまく機能します。 Android Studio と VS Code の両方が Flutter DevTools をサポートしています。 これらの IDE 統合により、Flutter ツールが完成します。
ほとんどのフロントエンド JavaScript フレームワークには、 コマンドラインインターフェイス（CLI） 例えば： 角度CLI, Reactアプリを作成する, CLIビュー、などフラッターも専用 CLI. Flutter CLI を使用すると、Angular プロジェクトをビルド、作成、および開発できます。 Flutter プロジェクトを分析およびテストするためのコマンドがあります。
新しい概念
このセクションでは、Web 開発では簡単または存在しない Flutter 固有の概念について説明します。 Flutter に入る際に心に留めておくべきアイデアについて説明します。
スクロールの処理方法
Web 用に開発する場合、デフォルトのスクロール動作は Web ブラウザーによって処理されます。 ただし、CSS を使用して自由にスクロールをカスタマイズできます ( overflow).
これは Flutter には当てはまりません。 デフォルトでは、ウィジェット グループはスクロールしません。 ウィジェット グループがオーバーフローする可能性があると感じた場合は、事前にスクロールを構成する必要があります。
Flutter では、スクロールを許可する固有のウィジェットを使用してスクロールを構成します。 例えば： ListView, SingleChildScrollView, CustomScrollViewなど。これらのスクロール可能なウィジェットを使用すると、スクロールを細かく制御できます。 と CustomScrollViewを使用すると、アプリケーション内で高度で複雑なスクロール メカニズムを構成できます。
Flutter側では、 ScrollViews 不可避です。 Android と iOS には ScrollView & UIScrollView スクロールを処理します。 Flutter には、レンダリングとデベロッパー エクスペリエンスを統合する方法が必要です。 ScrollViews、 それも。
ドキュメント構造の流れについて考えるのをやめて、代わりにアプリケーションをデバイスのネイティブ ペインティング メカニズムのための開いたキャンバスと見なすことが役立つ場合があります。
2. 開発環境のセットアップ
最も単純な Web サイトを作成するには、 .html 拡張子を付けてブラウザで開きます。 フラッターはそれほど単純ではありません。 Flutter を使用するには、Flutter SDK をインストールする必要があります & テストデバイス用に Flutter を構成しました。 したがって、Android 用の Flutter をコーディングする場合は、次のことを行う必要があります。 Android SDK をセットアップする. また、少なくとも XNUMX つの Android デバイス (Android エミュレーターまたは物理デバイス) を構成する必要があります。
これは、Apple デバイス (iOS および macOS) の場合と同じです。 Flutter を Mac にインストールした後も、先に進む前に Xcode をセットアップする必要があります。 また、iOS で Flutter をテストするには、少なくとも iOS シミュレーターまたは iPhone が必要です。 Flutter for Desktop もかなりの設定です。 Windows では、(VS Code ではなく) Visual Studio で Windows 開発 SDK をセットアップする必要があります。 Linux では、追加のパッケージをインストールします。
特別な設定をしなくても、Flutter はブラウザーで動作します。 その結果、ターゲット デバイスの追加設定を見落とす可能性があります。 ほとんどの場合、モバイル アプリの開発には Flutter を使用します。 したがって、少なくとも Android または iOS をセットアップする必要があります。 フラッターには flutter doctor 指図。 このコマンドは、開発セットアップのステータスを報告します。 そうすれば、必要に応じて、セットアップで何に取り組むべきかがわかります。
これは、Flutter での開発が遅いという意味ではありません。 Flutter には強力なエンジンが付属しています。 の flutter run コマンドは、コーディング中にテスト デバイスへのホット リロードを許可します。 しかし、それからあなたは押す必要があります R 実際にホットリロードします。 これは問題ではありません。 Flutter の VS Code 拡張機能 ファイル変更時の自動ホットリロードを許可します。
3. パッケージ化と展開
Web サイトの展開は、モバイル アプリケーションの展開に比べて安価で簡単です。 Web サイトを展開するときは、ドメイン名を介して Web サイトにアクセスします。 これらのドメイン名は通常、毎年更新されます。 ただし、オプションです。
今日、多くのプラットフォームが無料のホスティングを提供しています。
例： DigitalOcean で無料のサブドメインを提供します .ondigitalocean.com.
ドキュメント Web サイトを構築している場合は、これらのドメインを使用できます。 ブランディングを気にしない場合にも使用できます。
Flutter のモバイル アプリケーションの世界では、通常、ほとんどの場合、アプリを XNUMX つの場所にデプロイします。
これらのプラットフォームごとに開発者アカウントを登録する必要があります。 開発者アカウントを登録するには、料金またはサブスクリプションと本人確認が必要です。
App Store の場合、Apple Developer プログラムに登録する必要があります。 維持する必要があります 年間サブスクリプション 99 ドル. Google Play の場合は、 25 ドルの XNUMX 回払い アカウントのために。
これらのストアは、公開前にレビューされたすべてのアプリをレビューします。
また、ユーザーはアプリの更新を簡単には使用しないことにも注意してください。 ユーザーは、インストール済みのアプリケーションを明示的に更新する必要があります。 これは、デプロイされた最新バージョンの Web サイトを誰もが見ることができる Web とは対照的です。
展開されたアプリケーションの管理は、展開された Web サイトの管理よりも比較的要求が厳しいものです。 しかし、これはあなたを怖がらせるべきではありません。 結局のところ、どちらのストアにも何百万ものアプリが展開されているため、自分のアプリも追加できます.
フラッターに関する追加の考え
Flutter は、デスクトップ、モバイル、または Web アプリケーションを構築するためのクロスプラットフォーム ツールです。 Flutter アプリはピクセル パーフェクトです。 Flutter は、ターゲット プラットフォームに関係なく、各アプリで同じ UI を描画します。 これは、各 Flutter アプリに Flutter エンジンが含まれているためです。 このエンジンは、Flutter UI コードをレンダリングします。 Flutter は各デバイスにキャンバスを提供し、必要に応じてペイントできます。 エンジンは、ターゲット プラットフォームと通信して、イベントと対話を処理します。
フラッターは効率的です。 それは高性能レベルを持っています。 これは、Dart で構築されており、Dart の機能を活用しているためです。
これらの多くの利点により、Flutter は多くのアプリケーションに適しています。 クロスプラットフォーム アプリは、生産とメンテナンスの費用と時間を節約します。 ただし、場合によっては、Flutter (およびクロスプラットフォーム ソリューション) が最適な選択ではない場合があります。
ユーザーがアプリケーションでプラットフォーム開発者ツールを使用できるようにする場合は、Flutter を使用しないでください。 ここでのプラットフォーム開発者ツールとは、Android 開発者オプションのようなデバイス固有のツールを意味します。 また、ブラウザー開発者ツールも含まれています。
ブラウザ拡張機能が Web サイトとやり取りすることが予想される場合は、Flutter for Web を使用しないでください。
また、コンテンツの多いウェブサイトには Flutter を使用しないでください。
まとめ
これは、フロントエンド Web 開発から Flutter の操作に引き継がれるスキルのレビューでした。 また、Web 開発者として学ばなければならないアプリ開発の概念についても説明しました。
どちらも UI の実装を伴うため、Flutter は Web 開発者にとってよりシンプルです。 Flutter を起動すると、優れた開発者エクスペリエンスが得られることがわかります。 フラッターを試してみてください！ それを使用してモバイルアプリを構築し、もちろん、構築したものを紹介します.
乾杯！
