Weekly Flutter

Flutter와 Material 3

marsg6 2023. 7. 18. 18:26

flutter는 Android의 Material Design을 프레임워크 전반에 기본적으로 적용시킨다. 물론 원한다면 ios의 Cupertino Design을 사용할 수도 있지만, 탑재된 위젯의 양과 수준이 다르다.

 

Material Design이라는 것은 무엇일까?

 

다음 사이트(https://developer.android.com/guide/topics/ui/look-and-feel?hl=ko)에 따르면, Material Design은 일종의 디자인 가이드라인이다. 여러 위젯 구성 요소나, UX의 측면에서 어떤 요소들을 어떻게 구성해야 하는 지 방향성을 제시해준다. 또한 Android 개발 단계에서는 Material Design을 구현하기 위한 일련의 추상화된 클래스들도 몇 가지 제공한다.

 

flutter는 Material Design의 모체인 Android보다 Material Design에 대한 강력한 지원을 하는 것으로 보인다. 특히, 2022년 8월 이후부터는 Material You로 일컬어지는 Material Design 3를 지원하기 시작했다.

 

flutter에서 Material Design 3를 적용하는 것은, Materal Design 2를 적용하는 것과 다를 것이 없다. 즉, 기존에 flutter를 사용하면서 Material Design 2를 적용해왔던 사람이라면 단순히 MaterialApp에 useMaterial3 파랄미터를 true로 설정한 ThemeData를 설정하기만 하면 된다.

 

다음 사이트들을 참고하여 Material 3가 Material 2에 비해 달라진 점들을 알아보고, flutter에서 Material 3가 어떤 식으로 적용될 수 있는지 알아보도록 하자.

 

https://blog.codemagic.io/migrating-a-flutter-app-to-material-3/

https://flutter.github.io/samples/web/material_3_demo/#/

https://m3.material.io/theme-builder#/custom

https://m3.material.io/

 

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io

 

material_3_demo

 

flutter.github.io

 

Migrating a Flutter app to Material 3 | Codemagic Blog

What’s new in Material 3, how to migrate your Flutter app from Material 2, and everything else you wanted to know about Material Design.

blog.codemagic.io