現役エンジニアに悩みや疑問を30分間無料で質問し放題!

【Flutter】Iconの使い方|マテリアルアイコンを表示させる

今回は「Icon」の基本的な使い方について紹介します。

Iconを使えばMaterial Designによって提供されているマテリアルアイコンを使用できます!

目次

Material Designでアイコンを探す

Google Fontsの「Iconsセクション」からアプリで使用できるアイコンの名前をメモしておきます。

また、Widget(Icons)でアイコンを指定する際はGoogle Fontsで表示されているアイコン名の「大文字を小文字」に「スペースをアンダースコア」に変換します。

例)「Add Shopping Cart」 =>「add_shopping_cart」

Iconの必須コンストラクタ

Iconはコンストラクタで「Icons」を使用してアイコンを指定します。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Icon'),
        ),
        body: Center(
          child: Icon(
            Icons.add_shopping_cart,
          ),
        ),
      ),
    );
  }

Iconの基本プロパティ

color

colorプロパティでアイコンの色を指定できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Icon'),
        ),
        body: Center(
          child: Icon(
            Icons.add_shopping_cart,
            color: Colors.red,
          ),
        ),
      ),
    );
  }

size

sizeプロパティでアイコンの大きさを指定します。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Icon'),
        ),
        body: Center(
          child: Icon(
            Icons.add_shopping_cart,
            size: 100.0,
          ),
        ),
      ),
    );
  }

以上です。

参考

  • URLをコピーしました!
目次
閉じる