%3Cbr%3E%3Cbr%3Emicomia株式会社の井上です。今回はDesign Systemについて解説していきます。初心者にも分かりやすく解説していくのでぜひご一読ください。%3Cbr%3E%3Cbr%3E%3Cbr%3E%3Cbr%3E1. Design SystemとはDesign Systemとは、簡単にまとめるとアプリのUIを統一されたデザインで作るためのパーツやスタイルの集合になっています。Design Systemを使用することで画面ごとの色、文字、ボタンが統一されたり、複数人で開発してもUIが崩れにくいなどのメリットがあります。%3Cbr%3E%3Cbr%3E2. Design Systemの詳細Design SystemはTheme Settingsにあります。%3Cbr%3E%3Cbr%3Eまず1つ目のBreakpointsはどこからどこまでの画面幅がモバイル扱いで、どこからどこまでの画面幅がタブレット扱いなのかを決められますが、この部分は基本的に変更する必要は無いと考えています。%3Cbr%3E%3Cbr%3E次にLoading Indicatorです。ロード中のアイコン(Previewに表示されているもの)に関する設定をすることができます。%3Cbr%3E%3Cbr%3EデフォルトはよくあるCircularですが、たくさんの種類の中から選んでカラーやサイズも変更することができます。%3Cbr%3E%3Cbr%3E次に、Scrollbar Themeです。これはスクロール時に端に表示されるバーに関する設定をすることができます。%3Cbr%3E%3Cbr%3E例えば、カラーを赤に設定してみるとこのように色が変わります。%3Cbr%3E%3Cbr%3Eその下にあるThicknessはバーの太さを、Border Radiusは角の丸みを、Main Thumb Lengthはつまみの長さを、Main Axis Marginは上下(横向きなら左右)の余白を、Cross Axis Marginはコンテンツとバーとの間隔を設定できます。%3Cbr%3E%3Cbr%3EThumb Always VisibleはONにするとスクロールバーが縦でも横でも常に表示されるようになります。%3Cbr%3E%3Cbr%3EHorizontal Scrollbar Always Visibleは横のスクロールバーだけ常に表示されるようになります。その下のInteractiveはONにするとスクロールバーのつまみをドラッグして動かせるようになります。次に、Pull to Refresh Styleは引っ張った時に更新する表示に関する設定できます。%3Cbr%3E%3Cbr%3E例えば、このようにColor, Background Color, Border Widthを変えることができます。%3Cbr%3E%3Cbr%3E一番下にあるMaterial ThemeはFlutterで用意されているMaterial 3を使用するかどうかに関する設定ですが、Material 3にするとかなりUIが変わるので基本的にOFFのままで良いと考えています。%3Cbr%3E%3Cbr%3E%3Cbr%3E3. さいごに今回はDesign Themeについて解説していきました。機能実装ではないものの、実装の基盤となる重要な部分なのでぜひ本記事を参考にして設定してみてください。本記事の内容を動画で見たい方は以下もご覧ください。%3Cbr%3E%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FaFmGq32cf2M%3Fsi%3Df4Aeh9JSODlQOkYc%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3E%3C%2Fiframe%3E%3Cbr%3E