わんぱく Flutter! 第二回 Widget を試してみよう!

f:id:Akihiro_Kashiwagi:20210213124545j:plain

 

 さて、第一回では、通例のインストールを行いました。最後に動作確認をしましたが、そのアプリケーションをちょこちょこ変更しながら、Flutter に用意されている Widget を試してみましょう。

 

 

1. サンプルプログラムの概観

 動作確認用に作成した flutter_app を開きましょう。第一回から続けて読んでいる方は、開いている状態でしょう。

 

f:id:Akihiro_Kashiwagi:20210213140023j:plain

 

 

恐らく、目の前には main.dart ファイルのプログラムが見えているはずです。見えていない方は、ウィンドウ左側のツリーメニューから、"Project" - "flutter_app" - "lib" - "main.dart" と開いていくと、見つかるはずです。これが、今、作成した動作確認用のサンプルプログラムです。

 

f:id:Akihiro_Kashiwagi:20210221183610j:plain

figure 01

 

一番上に、"void main()" と書いてあります。 dart 言語も、C言語と同じように "main()" 関数から開始されます。そして、その中には、"runApp(MyApp());" と書かれてあります。これは、直ぐ下にある "class MyApp" を呼び出しています。

 

そして、その少し下の方を見てみると、"home: MyHomePage(title: 'Flluter Demo Home Page")" と書かれていますから、この "class MyApp" は、その更に下に書かれてある "MyHomePage" を呼び出していることが解ると思います。

 

また少しスクロールして、"class MyHomePage" を見てみると、"_MyHomePageState" と頭に "_" の付いた似た名前の class を使用しています。そして直ぐ下にはその class が書かれてあります。

 

f:id:Akihiro_Kashiwagi:20210221185335j:plain

figure 02

 

つまり、このサンプルプログラムの処理は、この "class _MyHomePageState" 内で行われていることが分かります。

 

この "=>" は、ファットアロー(fat allow)関数、或いは単に アロー(allow)関数と呼ばれるもので、JavaScript における function() を省略するために考案された表記法(シンタックスシュガー)です。 ここでは詳しくは説明しませんので、興味のある方は調べてみて下さい。

 

そしてまた、class の前に付いている "_" ですが、こちらは、オブジェクト指向言語における private 修飾子に相当します。

 

 

2. アプリケーションを変更して動作を確認してみよう

 

 呼び出しフローを、順番に追ってきましたが、この class の中では、画面のレイアウトと、テキストボックスやボタンのような Widget について書かれています。

 

f:id:Akihiro_Kashiwagi:20210221190121j:plain

figure 03

 

英語のコメントで、簡単な説明が書かれてありますが、この "Widget build()" とは、説明すると、テキストボックスやボタンなど(Widget)を構築(build)すると言う意味です。そして、直ぐ下には、"Scaffold()" メソッドが書かれてあります。これは訳すと、「足場」と言う意味です。Widget を構築する足場という意味になります。この中には、アプリケーションの上に表示されるアプリケーションバー "appBar" や、アプリケーションの胴体である "body" などがあります。

 

試しに、アプリケーションのタイトルを変更してみましょう。この "appBar" の中にある "widget.title" がアプリケーションのタイトルです。これは、プログラムの上の方で書かれてある "class MyApp" の "home: MyHomePage(title: 'Flluter Demo Home Page")" で指定しています。スクロールして、ここを変更してみましょう。

 

f:id:Akihiro_Kashiwagi:20210221192057j:plain

figure 04

 

変更箇所は見つかったでしょうか。変更したら、android studio のメニューバーにある実行ボタン "➤" を押してみましょう。androidエミュレータを起動していない方は、"tool" - "AVD Manager" から、AVD を起動しておきます。

 

f:id:Akihiro_Kashiwagi:20210221192740j:plain

figure 05

 

どうでしょうか。タイトルは上手く変更されたでしょうか。

 

タイトルについて指定していたのは、"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" とは訳すと、「行」です。変更が終わったら、実行します。

 

f:id:Akihiro_Kashiwagi:20210221200028j:plain

figure 06

 

どうでしょうか。横に並んで表示されたでしょうか。画面を回転させたりして、確認してみましょう。

 

では、一旦、"Row()" から、"Column()" に直しておきます。次は、Widget を追加してみます。 "Column()" の中を見ていくと、"Text()" と書かれた箇所が2つあります。読みにくいですが、それぞれ複数行に渡って、括弧で囲われて記述されています。そう、これは、今、表示されているテキストメッセージと、数字です。

 

f:id:Akihiro_Kashiwagi:20210221200638j:plain

figure 07

 

そして、2つの "Text()" は、"children: <Widget>[ ]" の中に入れ子になっています。先程は、"child: " と指定して、Widget入れ子にしましたが、今度は、"children: " となっています。これは、英語で child の複数形ですから、幾つかの Widget をまとめて追加する場合に使用します。

 

この figure 07 の 106 行目のところに、コメントで "// Text" と書かれた行があります。この下に "TextField()" を追加してみましょう。 "TextField()" は、入力可能なテキストボックスです。

 

f:id:Akihiro_Kashiwagi:20210221201431j:plain

figure 08

追加できたら、実行してみます。

 

f:id:Akihiro_Kashiwagi:20210221201724j:plain

figure 09

文字を入力して確認してみて下さい。

 

それでは、もう一つだけ、"ElevatedButton()" を追加しましょう。先程の "TextField()" の下の行に、figure 10 のように "ElevatedButton()" 追加して下さい。"TextField()" の後ろに "," を追加するのを忘れずに。

 

f:id:Akihiro_Kashiwagi:20210221202428j:plain

figure 10

 

これは、ボタンを作成していますが、ボタンの文字列 "ADD" を入れ子に指定しています。つまり、"ElevatedButton()" の中に "child: " と指定して "Text()" を追加しています。"Text()" は、上でも使用しているのと同じテキストボックスです。また、"onPressed:" は、訳すと「押された時」という意味ですが、ボタンが押された時に行う処理を指定します。ここでは、”_incrementCounter" を指定していますが、これは、少し上の方、"class MyHomePageState" の初めに指定しているメソッドです。ボタンを押すと、数字に加算していきます。

 

プログラムの変更が終わったら、実行してみましょう。

 

f:id:Akihiro_Kashiwagi:20210221203246j:plain

figure 11

ボタンは表示されたでしょうか。これは、下の方にある "" ボタンと同じように、押すと数値を加算していきます。

 

Flutter には、たくさんの Widget が用意されています。 Flutter のドキュメントなどを参照しながら、色々試してみましょう。

 

flutter.dev

 

以上