今回は「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,
),
),
),
);
}以上です。