【Flutter】『line_icons』でイカしたアイコンを使う→UIの見栄えアップを図る✨💖

パッケージ『line_icons』 + ElevatedButton ＝　かっこいいUI📱

パッケージ『line_icons』を利用してElevatedButtonを装飾してイケてる感じにしていきます！

line_iconsは icons8という3万点以上ものおしゃれなアイコンが揃った
アイコン素材サイトの素材Flutterで簡単に使えるように作成されたパッケージです。✨
個人的にものすごく好みのアイコンが多く多用しています💖。

パッケージ『line_icons』の導入

下記コードをVScodeのターミナルへコピペしてエンターキーを押下する

$ flutter pub add line_icons

https://pub.dev/packages/line_icons

『line_icons』の使用方法

LineIconsの後ろに使いたいアイコン名を入力するだけ👨

Icon(LineIcons.twitter)

一番上の画像のTwitterボタンのように、
上にアイコン＋下に文字　という構成にする場合は下記のような感じにする…

SizedBox(
                      width: 100, //横幅
                      height: 100, //高さ
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          primary: Colors.blue, // background
                          onPrimary: Colors.white, // foreground
                        ),
                        onPressed: () {},
                        child: Column(
                          // Replace with a Row for horizontal icon + text
                          children: <Widget>[
                            Spacer(),
                            Icon(LineIcons.twitter,
                                size: 34, color: Colors.white),
                            Text(
                              "Twitter",
                              style: TextStyle(
                                  fontSize: 13.0,
                                  fontFamily: 'IBMPlexMono',
                                  fontWeight: FontWeight.bold),
                            ),
                            Spacer(),
                          ],
                        ),
                      ),
                    ),