[Flutter] アイコンを表示する

画面上にアイコンを表示したい場合には、 Icon クラスを用います。
今回はアイコンを表示してみたいと思います。

ソース

lib/main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Icon',
      home: Scaffold(
        appBar: AppBar(title: Text('Icon sample'),),
        body: Center(
          child: Icon(
            Icons.star,
            color: Colors.blue,
          )
        ),
      ),
    );
  }
}

解説

アイコンを画面上に表示するには、Iconクラスを利用します。
第一引数に表示するアイコンをIconsから指定し、第二引数で色を指定しています。
意外と簡単そうに見えますが、Widget特有のルールが存在していました。。。

実行結果

Android

iOS

躓いたこと

実は試していたとき、ドキュメントを読まずに試して以下の画面のように失敗をしていました。

import 'package:flutter/material.dart';

void main() {
  return runApp(
    Center(
      child: Icon(
        Icons.star,
        color: Colors.blue,
      ),
    ),
  );
}

こんなコードを書いていたのですが、Iconの親WidgetがDirectionality widgetでないと駄目でした。
MaterialAppのWidgetを親に持たないものは、non-Material Appという扱いで、用意されているWidgetでも、利用できないものもあるようですね。

まだまだ、学ぶことは多そうです。