フロントエンドのWeb開発者向けのフラッター

共通の概念

このセクションには、フロントエンドのWeb開発とフラッターの類似性がリストされています。

1つのユーザーインターフェイス（UI）の実装

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

dart in

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

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

…

Flutterの列および row ウィジェットはディスプレイに相当します：cssのflex 。 mainaxisalignment および Crossaxisalignment プロパティは、 justify-content および align-items スタイルに対応しています。 flex-grow スタイルを調整するには、展開または Flexible で対応する子供ウィジェットをラップできます。

複雑なUIの場合、Flutterは custompaint クラスを提供します。これは、Web開発の canvas APIに相当します。 custompaint を使用すると、任意のUIの描画をカスタマイズできます。 custompaint は通常、非常に複雑なUIまたはウィジェットの組み合わせでは達成できない効果を実装する必要がある場合に使用されます。

2。開発プロセス中に、プラットフォームの違いを考慮する必要があります。各プラットフォームは、同じ機能（カメラ、位置決め、通知など）をさまざまな方法で実装します。

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

Flutterでは、 mediaquery クラスは同様の機能を提供します。デバイスの方向（ランドスケープまたはポートレート）、ビューポートサイズ、などのデバイス情報を取得し、さまざまな画面サイズに従ってアプリケーションのUIを調整するのに役立ちます。 </codepixelratio></p> <h4> <strong> 3デバッグツール、エディター、コマンドラインツール</strong> </h4> <p>デスクトップブラウザーには、検査官、コンソール、ネットワーク監視などがあり、ウェブ開発の効率が向上します。フラッターには、ウィジェットインスペクター、デバッガー、ネットワーク監視、その他の機能など、独自の開発者もあります。 </p> <p> IDEサポートも似ています。 Visual Studioコードは、多くのWeb関連の拡張機能を備えた人気のあるWeb開発IDEです。 Flutterは、VSコードとAndroid Studioもサポートしています。どちらもFlutter Devtoolsをサポートし、Flutterのツールチェーンを非常に完璧にします。 </p> <p>ほとんどのフロントエンドJavaScriptフレームワークには、次のようなコマンドラインインターフェイス（CLI）が付属しています。フラッターには、フラッタープロジェクトの構築、作成、開発、およびコード分析とテストの実行に関する独自のCLIもあります。 </p> <h3> <strong>新しい概念</strong> </h3> <p>このセクションでは、Flutterに固有の概念を紹介します。 </p> <h4> <strong> 1つの処理</strong> </h4> <p>デフォルトのスクロール動作は、ブラウザによって処理され、CSS（<code> overflow 属性など）を使用してスクロールをカスタマイズできます。

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

フラッターは、特別なウィジェットを使用して、 listView 、 singlechildscrollview 、 custourcrollview などなど、スクロールを構成します。これらのスクロール可能なウィジェットは、スクロール挙動を粒状制御します。 customsrollview を使用すると、複雑でプロフェッショナルなスクロールメカニズムを構成できます。

フラッターでは、 scrollview を使用することは避けられません。 AndroidとiOSには、スクロールを処理するために、それぞれ scrollview および uiscrollview があります。フラッターには、レンダリングと開発者エクスペリエンスを統合する方法が必要なため、 scrollview も使用します。

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

2つの開発環境構築

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

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

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

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

3パッケージングと展開

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

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

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

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

各プラットフォームに開発者アカウントを登録する必要があります。

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

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

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

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

フラッターについての特別な考え

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

フラッターは効率的であり、DARTを使用してDARTの機能を構築および利用するため、優れたパフォーマンスを持っています。

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

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

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

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

結論

この記事では、フロントエンドのWeb開発からフラッター開発へのスキル移転と、学習する必要がある新しいアプリケーション開発の概念をレビューします。

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

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