Flutter入門-勉強メモ001-【もっともシンプルなアプリの作成】

最近, Flutterの勉強を始めました. ここでは自分のFlutter勉強メモを公開していきます. 備忘録も含んでいます. というかそれがメインです. もし間違い等あれば優しく教えてくださいm(_ _)m

目次

もっともシンプルなアプリ

全体のコード&実行結果

Flutterの公式ページで紹介されているシンプルなコード

https://flutter.dev/docs/development/ui/widgets-intro

をさらに削り落としました. 笑. これが公式サイトも認めるminimal Flutter appです.

import 'package:flutter/material.dart';

void main() {
  return runApp(
    Text(
      ‘Hello, Flutter!’,
      textDirection: TextDirection.ltr,
    ),
  );
}

これを実行すると, 次のようになります. 右上に「Hello, Flutter!」と書いてあるのがわかりますか?

Flutter
iPhone 11で実行
Flutter
iPhone 8で実行
文字がかすれて見えるのは, 時計の表示とかぶっているためです

「import ‘package:flutter/material.dart’」とは

このコードを詳しく見ていきます. 最初の

import 'package:flutter/material.dart';

は, マテリアルデザインを使えるようするための宣言です. material.dartというパッケージを読み込んでいます.

「void main(){return runApp()}」とは

次に,

void main() {
  return runApp(***);
}

の部分です. ***部分は「Hello, Flutter!」というテキストが入ります.

コードを見ると, はじめにmain()関数が呼び出され, その中でrunApp(***)関数が返されています.

main()とは何でしょう? 公式リファレンスを見てみると,

The main() function
Every app must have a top-level main() function, which serves as the entrypoint to the app. The main() function returns void and has an optional List<String> parameter for arguments.

https://dart.dev/guides/language/language-tour#the-main-function

となっています. 今は後半は気にしないようにします. 前半部分から,

  • すべてのアプリはトップレベル関数main()が必要
  • ここがアプリのエントリーポイント(プログラムの開始場所)

ということがわかります. つまり, このアプリのスタートがrunApp(***)とわかります.

では, このrunApp()とは何でしょう. 先ほどと同様に公式リファレンスを見てみると,

runApp function
Inflate the given widget and attach it to the screen.

https://api.flutter.dev/flutter/widgets/runApp.html

とあります. 短…

つまり, 中身の***を展開し, 表示させる関数がrunAppです.

したがって,

void main() {
  return runApp(
    Text(
      ‘Hello, Flutter!’,
      textDirection: TextDirection.ltr,
    ),
  );
}

というのは,

このアプリは「Hello, Flutter!」というテキストから始まります!

と解釈できます.

voidは関数の戻り値がないときの宣言です. なぜmain()の場合はvoidなんでしょう. 公式リファレンスには次のように書いてありました.

Calling runApp again will detach the previous root widget from the screen and attach the given widget in its place. The new widget tree is compared against the previous widget tree and any differences are applied to the underlying render tree, similar to what happens when a StatefulWidget rebuilds after calling State.setState.

https://api.flutter.dev/flutter/widgets/runApp.html

これを見ると, runApp()もsetStateと似たような振る舞いをするようです. setStateは引数にvoidが戻り値となる関数を渡す必要があるため, main()もvoidでよいみたいです.

「Text()」とは

今回の場合, ***の部分は「Hello, Flutter!」というテキストが入っています. そのコードは

Text(
  ‘Hello, Flutter!’,
  textDirection: TextDirection.ltr,
),

となります.

「textDirection: TextDirection.ltr」はこのテキストの方向性を示しています. 今回は左から始まるいう意味で, ヘブライ語など右から始まる言語の場合は「textDirection: TextDirection.rtl」とします.

これを記述しないと,

No Directionality widget found.

とエラーが出ます. 詳しくは以下を参考にしてみてください.

MaterialAppなどを用いる場合はこの指定はいりません.

もっともシンプルなアプリのコードを省略してみる

実は先ほどのコード

import 'package:flutter/material.dart';

void main() {
  return runApp(
    Text(
      ‘Hello, Flutter!’,
      textDirection: TextDirection.ltr,
    ),
  );
}

は次のように省略することができます.

import 'package:flutter/material.dart';

main() => runApp(Text(‘Hello, Flutter!’, textDirection: TextDirection.ltr,),);

戻り値がvoidの場合, returnはいりません. また, Dartは戻り値の型指定は任意なのでvoidも省略できます.

1つの式だけで書けるような関数は

function(){ここに処理を書く} の代わりに function() => ここに処理を書く

を使うことができます.

もっともシンプルなアプリ改良版

先ほどの例で文字を大きくし, 中央に持ってくると次のようなコードになります. iPhone 11で実行した画面も載せておきます.

import 'package:flutter/material.dart';

void main() {
  return runApp(
    Center(
      child: Text(
        "Hello, Flutter!",
        textDirection: TextDirection.ltr,
        style: TextStyle(fontSize: 45.0),
      ),
    ),
  );
}
Flutter

今回の場合は,

  • TextStyleのfontSizeでテキストの大きさを変更
  • Centerのchildに指定したWidget(今回の場合はText)の位置を中央にする

を利用しています. Text()内でTextAlign.centerを利用した場合は,

import 'package:flutter/material.dart';

void main() {
  return runApp(
    Text(
      ‘Hello, Flutter!’,
      textDirection: TextDirection.ltr,
      style: TextStyle(fontSize: 45.0),
      textAlign: TextAlign.center,
    ),
  );
}
Flutter
Androidで実行しています

と水平方向しか中央によりません.

コメント

コメントする

目次
閉じる