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

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

一般的な概念

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新しいコンセプト

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

1。スクロール処理

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

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

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

フラッターでは、 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サイトを展開する場合、通常は年間更新が必要ですが、必要ありませんが、ドメイン名を介してアクセスできます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結論は

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

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

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