自分がflutterを使ってみた所感をつらつらと書いていこうと思います。
Flutter概要
2017年にGoogleが発表したオープンソースのモバイルアプリケーションフレームワーク。
Flutterを用いれば、iOS/Android/Webなどを全く同じコードで開発することができます。
ただしiOSをシミュレートするにはMac必須（AndroidはWindows, Macの両方できる）。
現状、Webはあまり実用的ではないようです。(実行速度が遅い、SEO対策ができないetc...)
言語はDartを使用。
2021年5月の時点で、過去30日でリリースされたGooglePlayの1/8のアプリがFlutterでできているそうです。
Dartについて軽くお勉強
Dartは元々JavaScriptの問題点を解決させた後継言語を目的に設計されているので、エンジニアには馴染みのある文法がよく見られます。
また、クラスベースのオブジェクト指向をサポートしており、中〜大規模開発に適していると言われています。
まずは触ってみましょう。
dartpad を利用すれば簡単にDartで遊べます。
初めてアクセスする場合、以下のようになっていると思います。Runをクリックすれば右側に結果が表示されます。
Dartの変数と関数の扱い方
変数の指定はCやJavaと同じ様に指定します。
// [変数の型] [変数の名前] = [代入する値];
// 例
int age = 19;
String name = "tarou";
関数の定義は以下のように指定します。
// [返り値の型] [関数の名前]（[引数]） {
// return [返り値];
// }
// 例
int fibonacci(int n) {
return n < 2 ? n : (fibonacci(n - 1) + fibonacci(n - 2));
}
関数の例に使ったfibonacch()はdartpadの右上にsampleから「fibonacci」を選択し、表示されたサンプルから拝借しました。
他にもサンプルがいろいろあるので是非見てみてください。（個人的お気に入りはSunflower）
練習問題
Dartに慣れてみましょう。実際に自分もやった問題です。
Q1.
引数 x, y をとり x + y の計算結果を返すadd関数を作成する。
x, yは整数をとる。
main関数からadd関数に24, 34を渡して58を出力する。
.
.
.
.
(思考中)
.
.
.
.
できましたか？解答の一例を見てみましょう
解答
void main() {
print(add(24, 34));
}
int add(int x, int y) {
return x + y;
}
なんかみたことあるなぁ〜くらいの文法だったのではないでしょうか。
FlutterのHelloWorld
Flutterに話題を戻します。
Flutterのコード構造
FlutterはWidgetと呼ばれるコンポーネントの組み合わせによって画面を構築しています。
さらにそのWidgetをツリー状に組み合わせることでUIを実現しています。
例えば、dartpadのsampleからCounterを選択しましょう。
これはFlutterを初めてインストールした際の最初のコードと同等です。いわゆるHello Worldですね。
この構造はこのようになっています。
ソースコードをみていく
下記順番で呼ばれていきます。
- main関数
- runApp()
- MyApp
- MyHomePage
- MyHomePageState
紫：インポート文
青：main関数
runAppを呼び出しているだけ
緑：MyApp
アプリのタイトルや色のテーマを決め、画面の中身を呼び出している
茶色：MyHomePage
状態管理を利用、今回ので言えばプラスボタンを押したら数字の状態が増えていく。
状態管理を行うことで、画面の更新ではなくWidgetごとに更新することができる。
今はRiverpodを使った状態管理が主流かも（？）
黄色：MyHomePageState
実際の画面の中身の部分。
AppBarが上に表示されている青いバー。
その下bodyから入れ子構造になっているのがなんとなくわかると思う。
まとめ
「Dart言語を使っていて、クロスプラットフォームで開発ができるんだな〜」とだけ覚えてもらえれば！