技術記事

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

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

1. Design Systemとは

Design Systemとは、簡単にまとめるとアプリのUIを統一されたデザインで作るためのパーツやスタイルの集合になっています。

Design Systemを使用することで画面ごとの色、文字、ボタンが統一されたり、複数人で開発してもUIが崩れにくいなどのメリットがあります。

2. Design Systemの詳細

Design SystemはTheme Settingsにあります。

まず1つ目のBreakpointsはどこからどこまでの画面幅がモバイル扱いで、どこからどこまでの画面幅がタブレット扱いなのかを決められますが、この部分は基本的に変更する必要は無いと考えています。

次にLoading Indicatorです。ロード中のアイコン(Previewに表示されているもの)に関する設定をすることができます。

デフォルトはよくあるCircularですが、たくさんの種類の中から選んでカラーやサイズも変更することができます。

次に、Scrollbar Themeです。これはスクロール時に端に表示されるバーに関する設定をすることができます。

例えば、カラーを赤に設定してみるとこのように色が変わります。

その下にあるThicknessはバーの太さを、Border Radiusは角の丸みを、Main Thumb Lengthはつまみの長さを、Main Axis Marginは上下(横向きなら左右)の余白を、Cross Axis Marginはコンテンツとバーとの間隔を設定できます。

Thumb Always VisibleはONにするとスクロールバーが縦でも横でも常に表示されるようになります。

Horizontal Scrollbar Always Visibleは横のスクロールバーだけ常に表示されるようになります。

その下のInteractiveはONにするとスクロールバーのつまみをドラッグして動かせるようになります。

次に、Pull to Refresh Styleは引っ張った時に更新する表示に関する設定できます。

例えば、このようにColor, Background Color, Border Widthを変えることができます。

一番下にあるMaterial ThemeはFlutterで用意されているMaterial 3を使用するかどうかに関する設定ですが、Material 3にするとかなりUIが変わるので基本的にOFFのままで良いと考えています。

3. さいごに

今回はDesign Themeについて解説していきました。機能実装ではないものの、実装の基盤となる重要な部分なのでぜひ本記事を参考にして設定してみてください。

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

動画でもっと知りたい方はこちら