わんぱく Flutter！ 第二回 Widget を試してみよう！
さて、第一回では、通例のインストールを行いました。最後に動作確認をしましたが、そのアプリケーションをちょこちょこ変更しながら、Flutter に用意されている Widget を試してみましょう。
1. サンプルプログラムの概観
動作確認用に作成した flutter_app を開きましょう。第一回から続けて読んでいる方は、開いている状態でしょう。
恐らく、目の前には main.dart ファイルのプログラムが見えているはずです。見えていない方は、ウィンドウ左側のツリーメニューから、"Project" - "flutter_app" - "lib" - "main.dart" と開いていくと、見つかるはずです。これが、今、作成した動作確認用のサンプルプログラムです。
一番上に、"void main()" と書いてあります。 dart 言語も、C言語と同じように "main()" 関数から開始されます。そして、その中には、"runApp(MyApp());" と書かれてあります。これは、直ぐ下にある "class MyApp" を呼び出しています。
そして、その少し下の方を見てみると、"home: MyHomePage(title: 'Flluter Demo Home Page")" と書かれていますから、この "class MyApp" は、その更に下に書かれてある "MyHomePage" を呼び出していることが解ると思います。
ここで、class と言う言葉を使っていますが、これは、オブジェクト指向プログラミング言語では必ず出てくる word です。クラスとは、数学用語で幾つかの数のまとまりを表しています。クラスとは、数の数、ですから、処理やデータのまとまりを表していると考えて良いでしょう。
また少しスクロールして、"class MyHomePage" を見てみると、"_MyHomePageState" と頭に "_" の付いた似た名前の class を使用しています。そして直ぐ下にはその class が書かれてあります。
つまり、このサンプルプログラムの処理は、この "class _MyHomePageState" 内で行われていることが分かります。
この "=>" は、ファットアロー(fat allow)関数、或いは単に アロー(allow)関数と呼ばれるもので、JavaScript における function() を省略するために考案された表記法（シンタックスシュガー）です。 ここでは詳しくは説明しませんので、興味のある方は調べてみて下さい。
そしてまた、class の前に付いている "_" ですが、こちらは、オブジェクト指向言語における private 修飾子に相当します。
2. アプリケーションを変更して動作を確認してみよう
呼び出しフローを、順番に追ってきましたが、この class の中では、画面のレイアウトと、テキストボックスやボタンのような Widget について書かれています。
英語のコメントで、簡単な説明が書かれてありますが、この "Widget build()" とは、説明すると、テキストボックスやボタンなど（Widget）を構築（build）すると言う意味です。そして、直ぐ下には、"Scaffold()" メソッドが書かれてあります。これは訳すと、「足場」と言う意味です。Widget を構築する足場という意味になります。この中には、アプリケーションの上に表示されるアプリケーションバー "appBar" や、アプリケーションの胴体である "body" などがあります。
試しに、アプリケーションのタイトルを変更してみましょう。この "appBar" の中にある "widget.title" がアプリケーションのタイトルです。これは、プログラムの上の方で書かれてある "class MyApp" の "home: MyHomePage(title: 'Flluter Demo Home Page")" で指定しています。スクロールして、ここを変更してみましょう。
変更箇所は見つかったでしょうか。変更したら、android studio のメニューバーにある実行ボタン "➤" を押してみましょう。android のエミュレータを起動していない方は、"tool" - "AVD Manager" から、AVD を起動しておきます。
どうでしょうか。タイトルは上手く変更されたでしょうか。
タイトルについて指定していたのは、"appBar" の中でした。その少し下には、"body: Center()" と書かれてあると思います。これは、読んで字のごとく、中心（Center）を指定しているのですが、Smart Phone のアプリケーションは、よくご存知の通り、画面の大きさも様々ですし、縦・横と回転もしますから、画面レイアウトを絶対位置で指定するのは、具合がよくありません。そこで、このように相対的な指定をしておくと、画面の大きさや向きに依存しない位置指定ができます。つまり、アプリケーションの胴体は、画面の中心に表示すると言う意味です。上の画像を見ると分かる通り、確かに画面の中心に "0" と表示されていると思います。
その下には、何と書かれてあるでしょうか。"child: Column()" と書かれてあります。 Flutter の Widget は、入れ子のように作っていきます。丁度、ロシア人形のマトリョーシカのような構造です。
ですから、ここでは、"Center()" の中に "child: Column()" と、"Column()" を "Center()" に入れ子のように配置します。 "Column()" とは、つまり、「縦」ですから、Widget を中心から、縦に並べて配置するという意味になります。実際、"You have pushed..." と数字 "0" は、中心から縦に配置されているのではないでしょうか。では、この "Column()" を、"Row()" に変更してみましょう。"Row" とは訳すと、「行」です。変更が終わったら、実行します。
どうでしょうか。横に並んで表示されたでしょうか。画面を回転させたりして、確認してみましょう。
では、一旦、"Row()" から、"Column()" に直しておきます。次は、Widget を追加してみます。 "Column()" の中を見ていくと、"Text()" と書かれた箇所が２つあります。読みにくいですが、それぞれ複数行に渡って、括弧で囲われて記述されています。そう、これは、今、表示されているテキストメッセージと、数字です。
そして、２つの "Text()" は、"children: <Widget>[ ]" の中に入れ子になっています。先程は、"child: " と指定して、Widget を入れ子にしましたが、今度は、"children: " となっています。これは、英語で child の複数形ですから、幾つかの Widget をまとめて追加する場合に使用します。
この figure 07 の 106 行目のところに、コメントで "// Text" と書かれた行があります。この下に "TextField()" を追加してみましょう。 "TextField()" は、入力可能なテキストボックスです。
追加できたら、実行してみます。
文字を入力して確認してみて下さい。
それでは、もう一つだけ、"ElevatedButton()" を追加しましょう。先程の "TextField()" の下の行に、figure 10 のように "ElevatedButton()" 追加して下さい。"TextField()" の後ろに "," を追加するのを忘れずに。
これは、ボタンを作成していますが、ボタンの文字列 "ADD" を入れ子に指定しています。つまり、"ElevatedButton()" の中に "child: " と指定して "Text()" を追加しています。"Text()" は、上でも使用しているのと同じテキストボックスです。また、"onPressed:" は、訳すと「押された時」という意味ですが、ボタンが押された時に行う処理を指定します。ここでは、”_incrementCounter" を指定していますが、これは、少し上の方、"class MyHomePageState" の初めに指定しているメソッドです。ボタンを押すと、数字に加算していきます。
プログラムの変更が終わったら、実行してみましょう。
ボタンは表示されたでしょうか。これは、下の方にある "＋" ボタンと同じように、押すと数値を加算していきます。
Flutter には、たくさんの Widget が用意されています。 Flutter のドキュメントなどを参照しながら、色々試してみましょう。
以上
