Flutterチュートリアルパート1:Flutterアプリをゼロから構築する

flutterチュートリアルシリーズの最初の部分であるFlutterアプリケーションの作成を開始する方法を学びます。

パート1:フラッターアプリをゼロから構築する方法

このチュートリアルシリーズでは、フラッターを使用してeコマースモバイルアプリケーションを作成する方法を順を追って説明します。モバイルアプリケーションは、Aviacommerceプラットフォームのオープンソースアプリになります。チュートリアルでは、このアプリケーションに焦点を当て、フラッターフレームワークの重要な概念を紹介します。

このチュートリアルは、フラッターチュートリアルシリーズの最初の部分です。

  1. フラッターアプリをゼロから構築する方法
  2. フラッターでアプリケーションをレイアウトする方法(近日公開予定)
  3. フラッターでデータを整理する方法(近日公開予定)
  4. フラッターでデータを一覧表示(近日公開予定)

今後のコンテンツの最新情報。

ブログでは、レイアウトを作成し、状態を段階的に紹介する方法を説明します。コードに直接飛び込むために、プロジェクト全体がAviaCommerceの傘の下でGithubで利用可能です。気軽にフォークして遊んでください。

AviaCommerceでは、ソフトウェア開発を再定義する新しいフレームワークを積極的に探しています。私たちのチームは、最初のベータリリース以降、Flutterのアクティビティを詳細に追跡しています。

GoogleはついにFlutter 1.0を発表しました。これは、単一のコードベースからiOSおよびAndroid用の美しいネイティブエクスペリエンスを作成するためのUIツールキットの最初の安定したリリースです。

Flutterには、開発環境をセットアップするための優れたドキュメントがあります。この公式インストールガイドに従ってください。

セットアップが完了したら、新しいテストプロジェクトを開始できます。 Flutterに統合された完全なIDEエクスペリエンスを提供するAndroid Studioが好きです。 Android Studioには、Dartのエディタープラグインが必要です。

Android Studioを起動します。新しいFlutterベースのプロジェクトを初期化するオプションが表示されます。

設定のリストからFlutter Applicationを選択します。

初めてのFlutterアプリの仮名を考えてください。または、私のようなものに名前を付けるのが苦手な場合は、タイマーを使用してください。

プロセスの最後のステップであるダイアログでは、アプリケーションのパッケージ名を尋ねられます。

このステップの後、Flutter SDKはアプリケーションの初期ディレクトリ構造を作成します。すべてのアクションはlibフォルダー内で行われ、main.dartはアプリ実行の開始点です。

Flutterでは、すべてがウィジェットです。 Flutterアプリの画像、アイコン、テキストはすべてウィジェットです。他のウィジェットを配置、制約、整列する行、列、グリッドなどのレイアウト要素でさえ、ウィジェットそのものです。

良い点は、Flutter SDKはアプリケーションのルート自体にインタラクティブなウィジェットを作成することです。物事を少し簡単にするために、それを削除して、最小限のデザインから始めましょう(Hello World!)。

main.dartファイルは次のようになります。

Androidエミュレーターを起動すると、「Hello World!」というテキストウィジェットが表示されます。

ここでフォーカスされているウィジェットに注目してください。 MaterialAppの本体を変更して、インターフェイスを思いどおりに引き出そうとします。元のバージョンは次のとおりです。

Flutterのレイアウト要素(ウィジェット)は、単一のウィジェットを収容するか、ウィジェットの配列を保持できるかに基づいて、2つのタイプに大きく分類できます。コンテナ、パディングは前者に属し、行、列などは後者に属します。

タイプテキストウィジェットの3つの子を持つ行レイアウトを導入します。

コンポーネントのスタイルを設定する前に、DRYの原則に従うように、スタイルを処理する新しいウィジェットを作成することをお勧めします。

3つの子を、後で同じファイルで定義されたカスタムウィジェットに置き換えます。 main.dartファイルは次のようになります

タイマーは今、少し当たり障りのないように見えます。私はユーザーインターフェースがあまり得意ではありませんが、最善を尽くしてみましょう。テキストウィジェットをコンテナ内にパックし、要素をスペースで区切るためのパディングとともに背景色でコンテナを装飾します。

また、3つのスタイル付きテキストウィジェットの下にタイマーでアクションを実行するボタンを挿入します。変更されたコードは次のようになります。

ここで、アプリの最も不可欠な部分である状態が表示されます。 Stateは、タイマーの現在の値と、タイマーがアクティブ(実行中)かどうかを保持します。状態の維持とウィジェットツリーの構築を担当するTimerStateクラスを考え出しました。

ボタンを押すとisActive変数が切り替わります。

Dartには、非同期操作用のエレガントなモジュールが付属しています。 Timerクラスを使用して、秒をインクリメントできます。変更されたTimerAppStateを以下に説明します。非同期モジュールのTimerクラスとのあいまいさを防ぐために、TimerクラスをTimerAppにリファクタリングしたことに注意してください。

アプリは完全に機能するようになりました。 main.dartの完全なコードはこちらにあります。 Flutterフレームワークの基本が明らかになることを願っています。

フルターフォーラム:フルター開発者のたまり場

FlutterForumは、フラッター開発者が集まって会話や質問をする場所です。

https://flutterforum.coをご覧ください

このチュートリアルを楽しんだ場合は、ボタンをクリックして共有し、他の人が見つけられるようにしてください。以下にコメントを残してください。