はじめに
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的なやつかもしれない。
ペイントやサイズ、配置などを組み合わせたクラスである。
コメント