技術記事

micomia株式会社の井上です。今回はTheme Widgetについて解説していきます。

初心者にもわかりやすく解説していくのでぜひご一読ください。

1. Theme Widgetとは

Theme Widgetは開発を効率化、統一感を上げる上で非常に大事なものになっています。

基本的にアプリにおいてボタンなどのWidgetはカラーや形などの統一感が重要な要素になってきます。

2. Theme Widgetの使い方

Theme WidgetはTheme Settingsの箇所から設定できます。

今回はButtonのTheme Widgetを作成していきます。

デフォルトではこのように表示されていますが、WidthやHeight、Radiusを変更することができます。

今回はWidth, Height, Radius, Elevation, Fill Colorを変更してみました。

このTheme Widgetを使用することで毎回Width, Heightなどそれぞれを設定する必要がなくなるので開発の効率化にもつながります。

コピペすれば同じようにできるのではないか？と思う方もいらっしゃるかもしれませんが、コピペで実装していると、例えば途中で「やっぱりカラーを変えよう」と思った時に一度全てのButtonを削除して再度コピペし直す必要があります。

そういった時にTheme Widgetを使用しているとTheme WIdgetの設定で変更するだけで全てのButtonに反映させることができます。

Theme Widgetで作成したWidgetは、いつものWidgetを追加する箇所からTheme Widgetを開くと実装できます。

3. さいごに

今回はTheme Widgetについて解説していきました。Theme Widgetは開発効率化においても、アプリの質向上においても非常に重要な要素なのでうまく活用していきましょう。

本記事の内容を動画で観たい方は以下をご覧ください。