Flutterでアプリ開発 Hello World編（1/3）

こんにちはー！お肉大好き、さささです！

前回記事は、こちらです。
今週は、Flutterのチュートリアル「Write your first Flutter app, part 1」に挑戦し、Hello Worldしてみました。

Hello Worldしてみた

まずはFlutterProjectを作成しましょう。
Project nameは好きに付けて構いません。

プロジェクトが作成できたら、公式チュートリアルにあるHello Worldのサンプルコードをコピペして、ビルドしてみます。
すると、あっという間に、Hello Worldが表示されます。

以上です。次回は・・・と、これで終わりにしては、あまり意味を為しません。
理解を深めるためにも、Hello Worldのコードリーディングをしてみましょう。

コード読んでみた

どうやって動いているのか、自分なりに読み解いてみたものがこちらになります。

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

// importするpackageは、flutter/packages/flutter/lib 配下にある
import 'package:flutter/material.dart';

// main:エントリーポイント
// runApp:void runApp(Widget app) Widget型を渡すと画面の描画をしてくれる
void main() => runApp(MyAppTest());

// Widget型を継承
// statelessWidget:状態を持たないWidget
// -> 状態を持つWidgetはStatelessWidgetというのがある
class MyApp extends StatelessWidget {
 @override
 // build:UI生成
 // BuildContext:
 //  親のElementになるらしいので、このWidgetが配置される親要素の情報を取得できるって事だろうか
 Widget build(BuildContext context) {
   // MaterialApp:マテリアルデザインを使用するアプリケーション
   return MaterialApp(
     title: 'Welcome to Flutter',
     home: Scaffold(
       appBar: AppBar(
         title: Text('Welcome to Flutter'),
       ),
       body: Center(
         child: Text('Hello World'),
       ),
     ),
   );
 }
}

// runAppで呼び出すクラスは名前は何でも良い
class MyAppTest extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   print(context.runtimeType);
   return MaterialApp(
     title: 'Welcome to Flutter',
     home: Scaffold(
       appBar: AppBar(
         title: Text('Welcome to Flutter'),
       ),
       body: Center(
         child: Text('お肉大好き！！'),
       ),
     ),
   );
 }
}

まず、importされているものは、マテリアルデザインを使うためのパッケージで、そのパッケージ自体は「flutter/packages/flutter/lib」の配下にあります。
公開されているパッケージがたくさんあるようですので、今後importして使っていくものがあることでしょう。

エントリーポイントになるのは、「main()」という処理になります。
「runApp()」にWidget型を渡すと画面の描画をしてくれます。
MyAppTestクラスをWidget型で自作して渡してみると、当然ながら表示されました。クラス名は、自由です。

MyAppで継承している「StatelessWidget」クラスは、状態を保持しないWidgetを生成するクラスになります。
まだ触れていませんが「StatefulWidget」クラスも存在しており、状態に応じたWidgetを生成するクラスもあるようです。（触れる時になったらしっかり調べます）

「build()」を実行してUI生成を行っています。
BuildContextという型で、このWidgetが表示される際の親にあたるElement情報を渡している・・ようですが・・まだ曖昧な所があるので、ここはもう少し使いこなすようになってから、深く読んでみます。

「MaterialApp()」はマテリアルデザインを使用するアプリケーションの生成を行います。
タイトル設定したり、表示作ったりするのは、この中で行います。
中身を見ると、設定できるものが細かくありますが、ここももう少し使いこなせてから深く読んでみることにします。

まとめると、このようになります。
・エントリーポイントはmain()で、runApp()にWidget型のクラスを渡す
・Widget型のクラスの中でbuild()を実行してUI生成をする
・MaterialApp()でマテリアルデザインを使うアプリケーションを生成できる

「Write your first Flutter app, part 1」のStep1だけでになってしまいましたが、本日はここまで。

次回は「Write your first Flutter app, part 1」のStep2以降に挑戦していきます。

お読みいただき、ありがとうございました。