フロントエンドのWeb開発からフラッター開発に変身しますか？この記事では、私の経験を共有して、移行を簡単にするのに役立ちます。両方に共通する概念と、フラッターで學(xué)ぶための新しい概念を指摘します。そのため、どのエコシステムを選択するかを心配する必要はもうありません。

一般的な概念

このセクションでは、フロントエンドのWeb開発とFlutterの類似點と、すでに持っているスキルがどのようにFlutterをより速く開始するのに役立つかをリストします。

1。ユーザーインターフェイス（UI）実裝

フロントエンドのWeb開発では、HTML要素を使用してUIを構(gòu)築し、CSSでスタイリングします。 Flutterでは、ウィジェットを使用してUIを構(gòu)築し、プロパティでスタイリングします。

DARTのColorクラスは、CSSのような「RGBA」および「ヘックス」カラー値をサポートしています。フラッターは、CSSなどのスペースおよびサイズユニットとしてピクセルを使用します。

フラッターは、ほぼすべてのCSSプロパティとその値に対応するDARTクラスと列挙を提供します。

• BorderRadius
• BoxShadow
• FontWeight
• Opacity
• Padding
• …

FlutterのColumnとRowウィジェットはdisplay: flex in CSSに相當(dāng)します。 MainAxisAlignmentおよびCrossAxisAlignmentプロパティはjustify-contentとalign-itemsスタイルに対応しています。 flex-growスタイルを調(diào)整するには、対応する子供ウィジェットをExpandedまたはFlexibleで包むことができます。

複雑なUIの場合、FlutterはWeb開発のCanvas APIに相當(dāng)するCustomPaintクラスを提供します。 CustomPaint使用すると、任意のUIの描畫をカスタマイズできます。通常、 CustomPaint 、非常に複雑なUIまたはウィジェットの組み合わせで不可能な効果を?qū)g裝する必要がある場合に使用されます。

2。マルチスクリーン解像度の適応

ウェブサイトはブラウザで実行され、モバイルアプリはデバイスで実行されます。開発プロセス中に、プラットフォームの違いを考慮する必要があります。各プラットフォームは、同じ機能（カメラ、位置決め、通知など）をさまざまな方法で実裝します。

Web開発者として、Webサイトのレスポンシブデザインに精通しており、メディアクエリを使用して、さまざまな畫面サイズでWebサイト表示効果を処理できます。

Flutterでは、 MediaQueryクラスは同様の機能を提供します。デバイスの向き（ランドスケープまたはポートレート）、ビューポートサイズ、 devicePixelRatioなどのデバイス情報を取得でき、さまざまな畫面サイズに従ってアプリケーションのUIを調(diào)整することができます。

3。デバッグツール、編集者、コマンドラインツール

デスクトップブラウザには、検査官、コンソール、ネットワーク監(jiān)視などの開発者ツールがあり、これがWeb開発の効率を向上させます。フラッターには、ウィジェットインスペクター、デバッガー、ネットワーク監(jiān)視、その他の機能など、獨自の開発者もあります。

IDEサポートは似ています。 Visual Studioコードは、多くのWeb関連の拡張機能を備えた人気のあるWeb開発IDEです。 Flutterは、VSコードとAndroid Studioもサポートしています。どちらもFlutter Devtoolsをサポートし、Flutterのツールチェーンを非常に完璧にします。

ほとんどのフロントエンドJavaScriptフレームワークには、次のようなコマンドラインインターフェイス（CLI）が付屬しています。AngularCLI、Create React App、Vue CLIなどフラッターには、フラッタープロジェクトの構(gòu)築、作成、開発、およびコード分析とテストの実行に関する獨自のCLIもあります。

新しいコンセプト

このセクションでは、Flutterに固有の概念を紹介します。これは、Web開発には存在しないか、さまざまな方法で実裝されています。

1。スクロール処理

Web開発では、デフォルトのスクロール動作はブラウザによって処理され、CSS（ overflowプロパティなど）を使用してスクロールをカスタマイズできます。

しかし、フラッターでは、ウィジェットグループはデフォルトでスクロールしません。ウィジェットグループがオーバーフローする場合は、スクロールを積極的に構(gòu)成する必要があります。

Flutterは特別なウィジェットを使用して、 ListView 、 SingleChildScrollView 、 CustomScrollViewなど、スクロールを構(gòu)成します。これらのスクロール可能なウィジェットは、スクロール挙動を粒狀制御します。 CustomScrollView使用すると、複雑で専門的なスクロールメカニズムを構(gòu)成できます。

フラッターでは、 ScrollViewの使用は避けられません。 AndroidとiOSには、スクロールを処理するために、それぞれScrollViewとUIScrollViewがあります。フラッターには、レンダリングと開発者エクスペリエンスを統(tǒng)合する方法が必要であるため、 ScrollViewも使用します。

考え方を変えて、ドキュメント構(gòu)造の流れについて考えるのをやめてください。ただし、アプリケーションはデバイスのネイティブ描畫メカニズムのオープンキャンバスと考えてください。

2。開発環(huán)境構(gòu)築

簡単なWebサイトを作成するには、 .htmlファイルを作成してブラウザで開くだけです。フラッターははるかに複雑です。フラッターSDKをインストールし、テストデバイス用のフラッターを構(gòu)成する必要があります。 Android用のフラッターアプリを開発する場合は、Android SDKをセットアップし、少なくとも1つのAndroidデバイス（エミュレーターまたは物理デバイス）を構(gòu)成する必要があります。

同じことがiOSデバイス（iOSおよびmacOS）についても當(dāng)てはまります。 MacにFlutterをインストールした後、Xcodeを設(shè)定する必要もあります。フラッターアプリをテストするには、少なくとも1つのiOSシミュレーターまたはiPhoneも必要です。デスクトップフラッターの設(shè)定も非常に複雑です。 Windowsでは、Visual Studioを使用してWindows Development SDKをセットアップする必要があります（VSコードではありません）。 Linuxでは、より多くのパッケージをインストールする必要があります。

フラッターは、追加の設(shè)定に頼らずにブラウザで実行されます。したがって、ターゲットデバイスの追加設(shè)定を無視する場合があります。ただし、ほとんどの場合、モバイルアプリ開発にFlutterを使用するため、AndroidまたはiOS環(huán)境をセットアップする必要があります。 Flutterは、開発環(huán)境の設(shè)定ステータスを報告するためにflutter doctorコマンドを提供して、必要な設(shè)定を理解するのに役立ちます。

しかし、これは、フラッターの発達が遅いことを意味するものではありません。 Flutterには強力なエンジンがあり、 flutter runコマンドにより、エンコード中にテストデバイスにホットリロードが可能になります。ただし、Rを押してホットリロードを?qū)g行する必要があります。 FlutterのVSコード拡張機能により、ファイルが変更されたときに自動ホットリロードが可能になります。

3。パッケージングと展開

ウェブサイトの展開は、モバイルアプリを展開するよりも安価で簡単です。 Webサイトを展開する場合、通常は年間更新が必要ですが、必要ありませんが、ドメイン名を介してアクセスできます。

多くのプラットフォームでは、 .ondigitalocean.comなどの無料のホスティングサービスを提供しています。これらのドメイン名を使用して、ブランディングに焦點を當(dāng)てていないWebサイトまたはWebサイトを作成できます。

Flutterのモバイルアプリケーション開発では、通常、アプリケーションを2つのプラットフォームに展開する必要があります。

• App Store（iOSデバイス）
• Google Play（Androidデバイス）

通常、各プラットフォームに開発者アカウントを登録する必要があります。通常、料金またはサブスクリプションと認証が必要です。

App Storeでは、Apple開発者プログラムにサインアップし、年間99ドルのサブスクリプション料金を支払う必要があります。 Google Playには、25ドルの1回限りの登録料が必要です。

これらのアプリストアは、アプリがオンラインになる前にレビューします。

さらに、ユーザーはアプリの更新を自動的に取得するわけではなく、インストールされたアプリを手動で更新する必要があります。これは、Web上のユーザーがWebサイトの最新バージョンを自動的に表示できるWebとは異なります。

展開されたアプリケーションの管理は、展開されたサイトを管理するよりも比較的面倒です。ただし、これは、これらのストアに何百萬ものアプリがすでに展開されていることを怖がらせるべきではありません。

フラッターに関する追加の考え

Flutterは、デスクトップ、モバイル、またはWebアプリケーションを構(gòu)築するためのクロスプラットフォームツールです。フラッターアプリケーションにはピクセルレベルの精度があり、各プラットフォームで同じUIをレンダリングします。各フラッターアプリケーションには、フラッターUIコードをレンダリングし、ターゲットプラットフォームと通信してイベントとインタラクションを処理するフラッターエンジンが含まれているためです。

フラッターは効率的であり、DARTの機能を構(gòu)築して活用するため、うまく機能します。

多くの利點があるため、フラッターは多くのアプリケーションに最適です。クロスプラットフォームアプリケーションは、生産とメンテナンス中のお金と時間を節(jié)約します。ただし、フラッター（およびクロスプラットフォームソリューション）は、場合によっては最良の選択ではない場合があります。

ユーザーにプラットフォーム開発者ツールを使用してアプリケーションと対話する場合は、Flutterを使用しないでください。ここのプラットフォーム開発者ツールは、Android開発者オプションやブラウザー開発者ツールなどのデバイス固有のツールを參照しています。

ブラウザ拡張機能がWebサイトと対話することを期待する場合は、Web開発にFlutterを使用しないでください。

さらに、Flutterをコンテンツが豊富なWebサイトに使用しないでください。

結(jié)論は

この記事では、フロントエンドのWeb開発からFlutter開発へのスキル移転、および學(xué)習(xí)する必要がある新しいアプリケーション開発の概念をレビューします。

Flutterは、Web開発者がUIの実裝を伴うため、Web開発者にとっては比較的簡単です。 Flutterを試してみると、開発者エクスペリエンスが提供されることがわかります。フラッターでモバイルアプリを構(gòu)築してみて、結(jié)果を紹介してください！

以上がフロントエンドのWeb開発者向けのフラッターの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。