Zenn
🧑‍🎨

Iconに縁(枠線)をつける方法【Flutter UI】

2022/11/13に公開
Flutter
UI/UX
Dart
デザイン
UI
tech

やりたいこと

アイコン本体の色を残しつつ、アイコンに枠線を入れたい

やり方

  1. このパッケージを入れ、DecoratedIconをラップし、icon:オプションにIconを置く。
    https://pub.dev/packages/icon_decoration
  • サンプルコード
DecoratedIcon(
 icon: Icon(Icons.arrow_forward,color: Colors.black,),
 decoration: IconDecoration(border: IconBorder(color: Colors.white)),
 )

Iconの方のcolorオプションはアイコン本体の色です。
IconDecorationのcolorは縁・枠線の色です。

outlineIconじゃないアイコンを設定しておくと
うまくいきました。

  • 完成サンプル

以下おまけ

Flutterでアプリ開発を始める上での個人的なオススメをまとめています。
書籍はkindle unlimitedで新しいものを無料で読むのが良いと思います。

オススメ書籍

これから始める場合、flutter 1.x の時に書かれた本を読むのは辞めておいた方がいいです。
理由は、flutter 2.x　以降、null-safetyという仕様が加わり、書き方がガラッと変わりました。

僕は2.xがリリースされたあたりでFlutterを初めて、情報がアテにならずかなり苦戦しました。

これから始める方向け　【kindle unlimitedなら無料！】

スマホで動くアプリを作ろう！ゼロから始めるFlutter実践入門編 ①: シンプルなアプリを作ってみよう
https://amzn.to/3yxutNM

初心者による初心者のためのFlutter詳解
https://amzn.to/39YcpSK

脱初心者向け(課金の実装など、具体的な実装方法や技術が書いてあります)

現場で使える Flutter開発入門
https://amzn.to/3kUXuLv

Discussion