Material 은 모바일, 웹 및 데스크탑 앱을 만드는데 도움이 되는 디자인 시스템입니다.
Flutter 에서 Material Library 는 개발자에게 UI 에 필요한 모든 것을 제공합니다.
Google I/O 2021 에서 Material 3 가 소개된 이후, Flutter 팀은 라이브러리를 빠르게 업데이트 해왔습니다.
이 글을 통해 Material 3 의 새로운 기능과 이를 Flutter 앱에 통합하는 방법을 소개하겠습니다.
Material 3 ?Material 3 를 Flutter 에 적용하기Material 3 의 새로운 위젯 살펴보기Material 3 의 Color Scheme 생성하기Material 3 업데이트 계획 및 참여
Material 3 ?
먼저 모든 최신 Material 3 업데이트를 보려면 샘플 앱을 확인 해보면 됩니다. 모든 위젯을 실시간으로 확인할 수 있습니다.
Material 3 를 Flutter 에 적용하기
Material 3 를 앱에 적용하려면, 테마 생성자로
useMaterial3 플래그를 추가하면 됩니다.class MyApp extends StatelessWidget { @override Widget build (BuildContext context) { return MaterialApp ( theme : ThemeData.light ( useMaterial3 : true ), body : MyHomePage (), ); } }
Material 3 의 새로운 위젯 살펴보기
- NavigationBar 과 NavigationDrawer
BottomNavigationBar 위젯은 NavigationBar 로 대체되었습니다.
이 것은 조금 더 높이(elevation) 가 크고, 그림자가 없어졌습니다.
- Segmented buttons
Segmented buttons 를 이용하면 단일 선택 및 다중 선택을 쉽게 만들 수 있습니다.
- Filled buttons
색상이 채워진 버튼이 추가되었습니다. 이 버튼은 색상이 지정되지 않은 상승 버튼을 만듭니다.
FilledButton.tonalmethod 옵션은 현재 배경을 보조 색상으로 설정합니다.
- Badges
이제 뱃지를 만들기 위해 다른 UI 라이브러리를 사용하지 않아도 됩니다.
- SnackBar, TabBar, Slider, etc.
기타 다양한 위젯이 Material 3 에 적용되었습니다.
Material 3 의 Color Scheme 생성하기
Material 3 를 사용하면, 전체 앱의 색상 테마를 단일 시드 색상으로 설정할 수 있습니다. 테마 생성자에서 색 구성표 시드 매개 변수를 설정하고 해당 항목에서 Flutter는 앱의 모든 위젯에 대해 조화로운 색 구성표를 생성합니다.
아래는 예시코드입니다.
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.light( useMaterial3: true, colorSchemeSeed: Color.fromRGBO(188, 0, 74, 1.0); ), body: MyHomePage(), ); }
만약 커스텀을 하고 싶다면, Material 생성 사이트(앱)를 방문해서 색상을 만들어 내면 됩니다. 만들고 나서 export 하여 바로 사용할 수 있습니다.
Material 3 업데이트 계획 및 참여
현재도 계속 Material 3 로 마이그레이션이 되고 있습니다.
만약, 이후 계획을 살펴보고 싶거나 직접 참여하고 싶다면 아래 사이트에 접속하면 됩니다.
