FlutterWebでWebサイトを作ったときのFlutterPackageの一覧

Flutterwebでポートフォリオサイトを作成したとき、使用したFlutterPackageを紹介します
ほぼ自分用のメモみたいな物ですが、参考になれば幸いです😁

作成したサイト

https://tkworksdesign-6ec1c.web.app

Lottie

手軽にLottieアニメーションを導入できるPackage
作成したサイトのトップページに使用しております（現状モバイルのウェブブラウザではうまく動かない為、PCサイズでのみ使用中）
https://pub.dev/packages/lottie
https://lottiefiles.com

導入時に参考にした記事
https://www.kzyrepository.com/2021/05/flutterlottieアニメーションライブラリの使い方をわかりやすく解説/
https://zenn.dev/tsuboi/articles/373e0ae5a9912c

carousel_slider

webサイトでよく見かける横にスクロールしながら画像が変わるカルーセル機能もこのPackageをつかえば簡単に実装できます。
開発ページとポートフォリオページで実装してます。
https://pub.dev/packages/carousel_slider

導入時に参考にした記事
https://ticktickboom.hatenablog.com/entry/2021/03/21/131017

animated_text_kit

アニメーション付きテキストを実装できるPackageです、サイトのトップページにテキストを一文字づつ表示するTypewriterAnimatedTextを使用しています。

https://pub.dev/packages/animated_text_kit

導入時に参考にした記事
https://blog.flutteruniv.com/flutter-animated_text_kit/

flutter_svg

SVG画像を表示する為のPackageです、appstoreダウンロード画像を表示する為に使用しております。

https://pub.dev/packages/flutter_svg

導入時に参考にした記事
https://qiita.com/ikemura23/items/5671bba76136d940b618

導入しようとしたが、使用しなかったPackageも一様書いときます。

glassmorphism

Flutterで磨りガラスのような見た目のUIを実装できるPackage、モバイルのウェブブラウザでレイアウトが崩れた為、今回は実装しませんでした、今後アプリ開発に使いたいPackageです。

https://pub.dev/packages/glassmorphism

参考にした記事
https://blog.flutteruniv.com/package-glassmorphism/

PackageではないがGoogleFontの設定に参考にした記事

Flutter Webでは日本語が正常に表示されないため、フォントファミリーを設定する必要があります
今回は全体のテーマにフォント指定して使用しております

参考にした記事
https://qiita.com/Uking/items/0fc2b969d152fe8ad565

最後に

FlutterWebの開発は今回が初めてなのですが、多彩なPackageを使用することにより開発もスムーズかつ効率的に行うことができました、皆様の参考になれば幸いです。