Zenn
🦔

【Flutter】Text, Icons, Imageについて

2023/04/26に公開
Flutter
Dart
tech

Text, Icons, Imageは、Flutterアプリケーションの表示系を管理する重要な機能です。それぞれ簡単な実装例ともに紹介していきます。

参考

Text

Textウィジェットは、アプリケーション内でテキストを表示するための基本的なウィジェットです。以下はTextウィジェットの使用例です。

Textのサンプルコード

Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 24, color: Colors.blue),
)

Icon

Iconウィジェットは、アプリケーション内でアイコンを表示するためのウィジェットです。Material Designアイコンやカスタムアイコンフォントを表示できます。以下はIconウィジェットの使用例です。

Iconのサンプルコード

以下はIcons.favoriteというハートマークのアイコンをサイズは36, 色は赤で設定しています。

Icon(
  Icons.favorite,
  size: 36,
  color: Colors.red,
)

Image

Imageウィジェットは、アプリケーション内で画像を表示するためのウィジェットです。ネットワーク上の画像やアセット内の画像を表示することができます。以下はImageウィジェットの使用例です。

Imageのサンプルコード

インターネット上の画像を使う場合は以下です。

Image.network(
  'https://example.com/image.jpg',
  width: 100,
  height: 100,
  fit: BoxFit.cover,
)

アセットから画像を取り込む場合は、以下のコードの記述と画像ファイルをassets/images配下に置くこと、pubspec.yamlでasset

Image.asset(
  'assets/images/my_image.png',
  width: 100,
  height: 100,
  fit: BoxFit.cover,
)
pubspec.yaml
flutter:
  uses-material-design: true

  assets:
    - assets/image.png

Discussion