Flutterの基本:最初のアプリプログラミング(第二部)

第一部はこちら ウィジェットを作成する Flutterアプリのすべてがウィジェットです! したがって、Flutterで画面に表示される全ての要素がウィジェットである。material.dart packageによって提供されるウィジェットには2つのタイプがあり、そのタイプの上で自分のカスタムウィジェットを構築します。それらはStatefulウィジェットとStatelessウィジェットです。 このシリーズの今後の記事では、state、stateful widgets 、およびstateless widgetsについて詳しく説明します。 Flutter and Dartプラグインを設定する場合、IDEまたはエディターで独自のカスタムウィジェットが構築できます。Statelessまたはstatefulを入力するだけで、IDEがそれに応じて提案を行います。 以下の例では、MyAppという名前のstatelessウィジェットを作成します。ウィジェットには任意の名前を選択できます。 この例の通り、独自のカスタムstatelessウィジェットを作成するため、material package によって提供されるStatelessWidgetを拡張しています。@overrideは、material packageによっても提供されるdecoratorです。 ウィジェットはabstract classであり、ビルドメソッドをオーバーライドする必要があります。このメソッドには、Flutterが提供するBuildContextのコンテキストが必要です。このメソッド内で、設立又は表示が必要なウィジェットを返します。 そこで、この例では、Flutterのmaterial.dartパッケージによって提供される組み込みウィジェットでもあるMaterialAppを返します。このウィジェットは、コンストラクターで複数の引数を受け入れます。詳細については、Material App にカーソルを合わせるか、Command+クリック又はCtrl +MaterialAppウィジェットをクリックしてください。 MaterialAppの3つのパラメーター(タイトル、テーマ、ホーム)を定義する必要があります。タイトルは単に文字列を受け入れることです。 値として「First App Demo」を提供します。テーマは、Flutter material packageの組み込み型であるThemeDataデータ型の値が必要です。したがって、次の例のように初期化します。 ThemeDataは、app Default themeを設定するために複数の値を受け入れます。primarySwatchは、MaterialColorタイプの値を受け入れる必須パラメーターです。これも組み込みタイプであり、Flutterがアプリのテーマを構築するためのColors.amberを提供するものです。 次に、ウィジェットタイプを受け入れるようにホームを設定する必要があります。ここで提供したウィジェットが画面に表示されます。そして、次のようなコンテナで初期化します:「home:Container(),」。これはまもなくカスタムウィジェットに置き換えられます。ウィジェットは次のようになります。 Main関数 アプリケーションを実行するには、main関数が必要です。main関数は、(){…}の一般的な構文を使用するか、 ()=>の矢印関数として定義することで記述できます。両方の構文は以下のコードを見て見ましょう。 又は: 上記の両方が正常に実行します。それでも、単一の値を返す必要がある場合は、矢印関数の方が良いと思います。そして、F5またはRun | Debugを押下してアプリケーションを実行すると、空白の画面が表示されます。 Statefulウィジェットを作成する FlutterにはStatelessとStatefulの2種類のウィジェットがあります。そのうち、Statefulウィジェットとは状態を持つウィジェットです。今回はStatefulWidgetを作成する方法を学習しましょう! Statefulウィジェットを作成するには、statefulを入力してTabを押すで、IDE又はEditorのオートコンプリート機能を使用します。例えば、以下のようなDummyWidgetという名前のStatefulウィジェットを作成しています。 StatefulウィジェットはStateless ウィジェットに比べると、違う点があります。 例えば、Statefulウィジェットは内部データの変更に対応し、自体が再レンダリングで変更を反映します。一方、Stateless ウィジェットは自体が再レンダリングしません。そして、この課題については、今後の記事で詳しく説明します。 Statefulウィジェットを理解するには、ある種の内部データが必要です。ここでは、_isGreenという名前のboolean値を使用して、デフォルトでfalseに初期化します。変数の前に_を付けて、Dartでのプライベート変数にし、このクラス内でのみアクセスできるようにしています。 それとともに、Widget build(BuildContext context){…}methodから空のコンテナーを返す代わりに、他の結果を返します!その結果はmaterial packageで提供されるウィジェットであるScaffoldを返すことです。新しい/異なる画面を表示するたびに、Scaffoldを提供する必要があることに注意してください。そして、Scaffoldは、初期化の方法でいくつかのパラメーターを受け入れます。 ここでは、appBarとbodyを提供して、画面にコンテンツをご覧になります。DummyWidgetが次のように表示されます。 このStateful DummyWidgetには、デフォルトがfalseの_isGreenという名前のbool型のprivate変数があります。コンテナを返す代わりに、Scaffoldウィジェットを返ます。そして、appBarとbodyの2つのパラメータを提供しました。

Read More