Google提供のFlutter入門のコードを理解していく

はじめに

Flutterを作成したGoogleが提供している無料オンライン学習ツールです！

下手にUdemyに課金するより断然いいと思います（第一情報を提供しているから）

ここに学習記録を積み上げていきたいと思います。

環境

macOS Big Sur Version 11.5.2
Flutter 2.2.3
Xcode 12.5.1

実装コード

画面の上にタイトル、中央にHelloが配置されている。

全体のソースはこちらです。

// Copyright 2018 The Chromium Authors. 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/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Hello Rectangle',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Rectangle'),
        ),
        body: HelloRectangle(),
      ),
    ),
  );
}

class HelloRectangle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.greenAccent,
        height: 400.0,
        width: 300.0,
        child: Center(
          child: Text(
            'Hello!',
            style: TextStyle(fontSize: 40.0),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

Flutterの基本構造を理解する

import 'package:flutter/material.dart';
 
void main() {
    runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp();
    }
}

これらはほぼテンプレである。

runAppの中ではbuildメソッドを必ず定義しなければならない。

またそのメソッド内でWidgetを返している。

言語的にはC系やJavaなどに似ており、それらを学習していればかなりすんなり入ることができます！

Flutter特有のクラスに関して

これらクラスを駆使してUIを構築していくイメージ。

MaterialApp

マテリアルなデザインをUIに組み込むことのできるクラスである。

このクラスのプロパティ値を自在に操ることでUIを構築することができる。

実装されたアプリでは、タイトルとホームが宣言されているが、

公式ドキュメントにはもっと多くの設定をすることができる。

Scaffold

直訳すると「足場」

マテリアルデザインのUI構造を示している。

ここではAppBar値がTextにて宣言されており、上のタイトルを表示している。

Center

Body値に宣言されたHelloRectangleクラスの返り値にて宣言されている。

子要素を中央揃えしてあげる。

Container

今後の開発でかなりお世話になるであろうクラス。

Web開発でいうDiv的なやつかもしれない。

ペイントやサイズ、配置などを組み合わせたクラスである。