はじめてflutterを使ってみて

自分が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言語を使っていて、クロスプラットフォームで開発ができるんだな〜」とだけ覚えてもらえれば！