ウィジェットを作成する

Flutterアプリのすべてがウィジェットです！ したがって、Flutterで画面に表示される全ての要素がウィジェットである。material.dart packageによって提供されるウィジェットには2つのタイプがあり、そのタイプの上で自分のカスタムウィジェットを構築します。それらはStatefulウィジェットとStatelessウィジェットです。

このシリーズの今後の記事では、state、stateful widgets 、およびstateless widgetsについて詳しく説明します。

Flutter and Dartプラグインを設定する場合、IDEまたはエディターで独自のカスタムウィジェットが構築できます。Statelessまたはstatefulを入力するだけで、IDEがそれに応じて提案を行います。

以下の例では、MyAppという名前のstatelessウィジェットを作成します。ウィジェットには任意の名前を選択できます。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

この例の通り、独自のカスタム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(primarySwatch: Colors.amber,),

ThemeDataは、app Default themeを設定するために複数の値を受け入れます。primarySwatchは、MaterialColorタイプの値を受け入れる必須パラメーターです。これも組み込みタイプであり、Flutterがアプリのテーマを構築するためのColors.amberを提供するものです。

次に、ウィジェットタイプを受け入れるようにホームを設定する必要があります。ここで提供したウィジェットが画面に表示されます。そして、次のようなコンテナで初期化します：「home：Container（）,」。これはまもなくカスタムウィジェットに置き換えられます。ウィジェットは次のようになります。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First App Demo',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: Container(),
    );
  }
}

Main関数

アプリケーションを実行するには、main関数が必要です。main関数は、（）{…}の一般的な構文を使用するか、

（）=>の矢印関数として定義することで記述できます。両方の構文は以下のコードを見て見ましょう。

void main() {
  runApp(MyApp());
}

又は：

void main() =>runApp(MyApp());

上記の両方が正常に実行します。それでも、単一の値を返す必要がある場合は、矢印関数の方が良いと思います。そして、F5またはRun | Debugを押下してアプリケーションを実行すると、空白の画面が表示されます。

Statefulウィジェットを作成する

FlutterにはStatelessとStatefulの2種類のウィジェットがあります。そのうち、Statefulウィジェットとは状態を持つウィジェットです。今回はStatefulWidgetを作成する方法を学習しましょう！

Statefulウィジェットを作成するには、statefulを入力してTabを押すで、IDE又はEditorのオートコンプリート機能を使用します。例えば、以下のようなDummyWidgetという名前のStatefulウィジェットを作成しています。

class DummyWidget extends StatefulWidget {
  @override
  _DummyWidgetState createState() => _DummyWidgetState();
}

class _DummyWidgetState extends State<DummyWidget> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

StatefulウィジェットはStateless ウィジェットに比べると、違う点があります。 例えば、Statefulウィジェットは内部データの変更に対応し、自体が再レンダリングで変更を反映します。一方、Stateless ウィジェットは自体が再レンダリングしません。そして、この課題については、今後の記事で詳しく説明します。

Statefulウィジェットを理解するには、ある種の内部データが必要です。ここでは、_isGreenという名前のboolean値を使用して、デフォルトでfalseに初期化します。変数の前に_を付けて、Dartでのプライベート変数にし、このクラス内でのみアクセスできるようにしています。

それとともに、Widget build（BuildContext context）{…}methodから空のコンテナーを返す代わりに、他の結果を返します！その結果はmaterial packageで提供されるウィジェットであるScaffoldを返すことです。新しい/異なる画面を表示するたびに、Scaffoldを提供する必要があることに注意してください。そして、Scaffoldは、初期化の方法でいくつかのパラメーターを受け入れます。

ここでは、appBarとbodyを提供して、画面にコンテンツをご覧になります。DummyWidgetが次のように表示されます。

class _DummyWidgetState extends State<DummyWidget> {
  bool _isGreen = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _isGreen ? Colors.green : Colors.red,
      appBar: AppBar(
        title: Text('Your First App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              onPressed: () {
                setState(() {
                  _isGreen = !_isGreen;
                });
              },
              child: Text(_isGreen ? 'TURN RED' : 'TURN GREEN'),
            ),
          ],
        ),
      ),
    );
  }
}

このStateful DummyWidgetには、デフォルトがfalseの_isGreenという名前のbool型のprivate変数があります。コンテナを返す代わりに、Scaffoldウィジェットを返ます。そして、appBarとbodyの2つのパラメータを提供しました。

AppBarは、AppBar（）というvalue of type PreferredSizeWidgetを受け入れます。AppBar（）は、設定するための他の多くのパラメーターも受け入れます。しかし、ここでは1つだけのパラメーターを使用してAppBarに表示されるtitleを設定します。そのうえ、Titleはウィジェットタイプを受け入れるため、組み込みのText（）ウィジェットを使用しています。

Bodyはウィジェットタイプも受け入れています。従って、組み込みのColumn（）ウィジェットを使用しています。デフォルトでは、カラムは画面の上から下に伸び、child widgetを囲みます。カラムにはmultiple widgetsをchildrenとして含めます。

ここでは、FlatButton（）というColumn（）ウィジェットの子が1つだけあります。そして、FlatButton（）は、material packageによって提供されるウィジェットでもあります。Flatbutton（）には、1つのonPressedパラメーターと1つのchildパラメーターがあります。onPressedは、無名関数または事前に宣言された関数をその名前で受け入れます。この関数の内に書き込む内容は、ボタンがクリックするときに何が起こるかが決まります。

この無名関数(anonymous function) の内では、再構築ウィジェットを有効にするため、setState（（）{…}）;を使用しています。この場合のように内部で値を変更すると、設定した状態の内でのboolean _isGreenを変更します。各ボタンでは、この値が変更し、Statefulウィジェットを再レンダリング過程を行います。

最後に、FlatButton（…）の子要素としてText（ ‘…’）ウィジェットを提供します。これは、ボタンの内に表示されるものを指定します。

また、StatelessWidget MyAppで、空のコンテナーを返す代わりに、カスタムのStatefulWidgetDummyWidgetを返します。カスタムウィジェットが画面に表示できることです。以下のmain.dartファイルをご覧ください。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First App Demo',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: DummyWidget(),
    );
  }
}

class DummyWidget extends StatefulWidget {
  @override
  _DummyWidgetState createState() => _DummyWidgetState();
}

class _DummyWidgetState extends State<DummyWidget> {
  bool _isGreen = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _isGreen ? Colors.green : Colors.red,
      appBar: AppBar(
        title: Text('Your First App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              onPressed: () {
                setState(() {
                  _isGreen = !_isGreen;
                });
              },
              child: Text(_isGreen ? 'TURN RED' : 'TURN GREEN'),
            ),
          ],
        ),
      ),
    );
  }
}

Flutterは素晴らしいフレームワークですね。この記事を通じて、Flutterを使用して最初のアプリケーションを作成できますね。我が社は、Flutterに関する役立つ情報を提供することを願っています。オフショア開発をご検討されている方々はぜひ一度ご相談ください。

ここまで最初のアプリプログラミング（第二部） は終わりです。次の記事でお会いしましょう!

日本ブログ

株式会社INTS　　開発部　 レー・ジャン