FlutterのWidgetの基礎part1

はじめに

最近SwiftだけではなくFlutterについても勉強し始めたので、Flutterの基礎を備忘録として書いてみます。

Widget

FlutterのUIを構築しているパーツのことをWidgetと呼びます。
様々なWidgetを組み合わせることでUIを構築していきます。

MaterialApp Widget

MaterialApp Widgetは、Flutterフレームワークで作成されたアプリケーションのルートとなるウィジェットで、アプリのテーマやナビゲーション、ローカライズなどのアプリ全体の管理を行う役割のWidgetです。
このMaterialApp Widgetのおかげでマテリアルデザインでのアプリ開発が容易となっています。
※マテリアルデザインとは、Googleが提唱したデザインシステムの一種で、直感的な操作を可能にし、異なるデバイスやプラットフォーム間での一貫したユーザー体験（UX）を実現することを目指しているものです。

Scaffold Widget

Scaffoldはflutterで頻繁に使われるwidgetの一つで、主にアプリの画面の骨組みを作成する役割があります。
画面上部にAppbar(アプリバー)を表示し、中央にbody(本文)などの様々なwidgetを表示する役割も持っています。
Scaffoldは足場という意味があります。

Appbar Widget

Appbarは、アプリの画面上部に表示されるヘッダー領域を定義するために使用されます。
Appbar内には、タイトル、アクションボタンやアイコンなどのWidget、背景色やAppbarの高さを指定するなどの役割を持っています。

Scaffold(
  appBar: AppBar(
    // 左側のアイコン
    leading: Icon(Icons.arrow_back),
    // タイトルテキスト
    title: Text('Hello'),
    // 右側のアイコン一覧
    actions: <Widget>[
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.favorite),
      ),
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.more_vert),
      ),
    ],
  ),
)

Column Widget

縦にWidgetを並べるときは、Column　Widgetを使います。
childrenプロパティに並べたい複数のWidgetを設定することで、設定したWidgetを縦に並べることができます。

使用例

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 Container(
                   height: 100,
                   width: 200,
                   color: Colors.white,
                   child: Icon(Icons.favorite, size: 50,),
                 ),
                 Container(
                   height: 100,
                   width: 200,
                   color: Colors.green,
                   child: Icon(Icons.favorite, size: 50,),
                 ),
                 Container(
                   height: 100,
                   width: 200,
                   color: Colors.red,
                   child: Icon(Icons.favorite, size: 50,),
                 ),
               ],
          ),
        ),
      ),
    ),
  );
}

縦に並べて配置できるので、画面レイアウトの基本のWidgetとして使用されています。

Row Widget

横にWidgetを並べるときは、Column　Widgetを使います。
childrenプロパティに並べたい複数のWidgetを設定することで、設定したWidgetを横に並べることができます。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 Container(
                   height: 100,
                   width: 200,
                   color: Colors.white,
                   child: Icon(Icons.favorite, size: 50,),
                 ),
                 Container(
                   height: 100,
                   width: 200,
                   color: Colors.green,
                   child: Icon(Icons.favorite, size: 50,),
                 ),
                 Container(
                   height: 100,
                   width: 200,
                   color: Colors.red,
                   child: Icon(Icons.favorite, size: 50,),
                 ),
               ],
          ),
        ),
      ),
    ),
  );
}

横に並べて配置できるので、画面レイアウトの基本のWidgetとして使用されています。

まとめ

今回書いたWidget以外にも基本的なものはありますが、また次回の記事でまとめていきたいと思います。
参考になれば幸いです！
最後までご覧いただきありがとうございました！