1-2.ウィジェット

Flutter

2020.11.082020.11.14

Flutterにはウィジェット（Widget）という概念があります。

ウィジェットとはアプリの構造上の要素を表していて、レイアウトやボタンなどのコンポーネントなどほとんど必要な要素をパズルのように組み合わせることでアプリの構造を作成することができます。

前回、dog_list_appというプロジェクトを作成しましたが、作成するとプロジェクト名と同じ名前のフォルダが作成されて、左側のアイコンの列の一番上のアイコンをクリックするとそのフォルダの中身を見ることができます。

その中のmain.dartというファイルがあり、作成時にはフローティングボタンを押すとカウントされるプログラムが記載されていますが削除して以下のコードを入力（またはコピペ）しましょう。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('DogList'),
        ),
      ),
    );
  }
}

説明する前にまずは実行してみましょう。

そうすると次のようなアプリが表示されます。

それではコードの説明を始めますと、1行目のコードは事前に用意されているmaterial.dartを利用するということを表しています。

これはマテリアルデザインというデザインを使うことを宣言しています。

import 'package:flutter/material.dart';

ほかにもCupertinoというiOSデザインがありますが、このアプリではマテリアルデザインを採用します。

一旦、3行目のコードの説明を飛ばします。

5行目以降にはMyAppというStatelessウィジェットを作成しています。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('DogList'),
        ),
      ),
    );
  }
}

8行目のMaterialAppウィジェットはマテリアルデザインを使用することを宣言しています。

9行目のhome下のScaffoldウィジェットには基本的なマテリアルデザインのビジュアルレイアウト構造を実装します。

10行目にbody下のCenterウィジェットは中のコンポーネントを中央に表示します。

11行目にchild下のTextウィジェットではDogListという文字列を表示しています。

またchild下のウィジェットが複数存在する場合はchildではなくchildren<widget>[ ]内に入力します。

戻って3行目のコードでは5行目以降のMyAppをrunAppで呼び出します。

void main() => runApp(MyApp());

おまけでDogListの文字を大きくして色を変えてみたいと思います。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
　　　　　　　'DogList',
            style: TextStyle(
              fontSize: 50,
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}

11行目にTextウィジェットの中にTextStyleウィジェットを追加してfontSizeでサイズを指定してcolorで色を指定するとDogListが大きく赤い字になっているはずです。

今回はウィジェットのほんの一部を利用して、簡単なアプリを作成しました。

次回からは少しづつdog_list_appを作り上げていきましょう。