오늘은 Flutter 강의를 들으며 BMI 계산기를 만들어봤다.
Flutter에서 제공되는 ThemeData 클래스를 활용하면
라이트 테마와 다크테마를 각각 구현하지 않아도 간편하게 switch 할 수 있고
HomePage / ResultPage 로 이루어진 앱을 만들 예정이다.
HomePage에서는 세로로 배치된 구성이므로 Column을 활용하고
각각 AppBar/GenderBox/HeightBox/WeightBox/ElevatedButton 위젯으로 구성돼있다.
HeightBox 와 WeightBox는 구조가 같으므로 위젯 컴포넌트화를 하면 편리하다.
ResultPage도 마찬가지로 세로구성이라 Column을 쓰고
AppBar/ResultGauge/ResultText/OutlineButton 위젯으로 구성한다.
- MaterialApp
- HomePage
- Scaffold
- AppBar
- Column
- GenderBox
- SliderBox(키)
- SliderBox(몸무게)
- ElevatedButton
- ResultPage
- Scaffold
- AppBar
- Column
- ResultGauge
- ResultText
- OutlinedButton폴더트리를 미리 정하면 편리하다.
- lib
- pages
- home
- home_page.dart
- widgets // HomePage 내에서 사용할 위젯들
- result
- result_page.dart
- widgets // ResultPage 내에서 사용할 위젯들
- widgets // 앱 내에서 전체적으로 함께 사용되는 위젯들. 이번 프로젝트에서는 쓸일이 없음.Flutter 에서는 MaterialApp 내의 전반적인 시각적 테마구성을 정의하여 제공한다.
이 ThemeData 클래스를 활용하면 다크테마/라이트 테마를 각각 구현하지 않아도 돼서 편리하다.
ThemeData(
useMaterial3: true, // Material3 디자인 사용여부 2와의 차이는 아래 그림 참조
// ColorScheme 클래스의 fromSeed 생성자를 사용하면
// seedColor 를 기준으로 각각 요소들의 색상을 정해줍니다.
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.purple,
// dark, light 에 따라 디자인이 배경 색상 등이 다크모드, 라이트모드로 달라집니다
brightness: Brightness.dark,
),
// 앱 내에서 사용할 TextTheme 를 정할수도 있는데
// displayLarge, titleLarge 등의 속성별로 정의할 수 있습니다.
textTheme: TextTheme(
displayLarge: const TextStyle(
fontSize: 72,
fontWeight: FontWeight.bold,
),
// ···
titleLarge: GoogleFonts.oswald(
fontSize: 30,
fontStyle: FontStyle.italic,
),
bodyMedium: GoogleFonts.merriweather(),
displaySmall: GoogleFonts.pacifico(),
),
),또한 ElevatedButtonTheme, AppBarTheme, TextButtonTheme 등 flutter 에서 기본으로 제공하는 위젯들의 테마도 지정가능하다.
이때 Container border색상은 ThemeData 내에서 정의할수 없다.
이는 Divider라는 단순히 선을 그어주는 위젯에 사용되는 색상인 dividerColor를 재정의 해서 Container의 Border에 적용하면 된다.
<Slider 위젯>
Slider(
// 값 - 여기서는 테마 확인을 위해 고정값을 넣었지만
// 사용할 때에는 변수를 넣고 onChanged에서 해당 변수의 값을 바꿔주고
// setState 호출해서 사용
value: 1,
onChanged: (v) {},
min: 1, // 최소값
max: 300, // 최대값
)이때 테마는 ThemeData의 sliderTheme속성에 SliderThemeData 클래스를 정의해서 사용한다.
sliderTheme: SliderThemeData(
activeTrackColor: Colors.white30, // 현재값 기준 왼쪽 색상
inactiveTrackColor: Colors.white30, // 현재값 기준 오른쪽 색상
trackHeight: 1, // 막대기 높이(두께)
thumbColor: Colors.pinkAccent, // 동그라미 (현재값)
),