[flutter] 플러터 Checkbox 테마 설정하기

07 Dec 2023

flutter

플러터(Flutter)에서 Checkbox는 사용자에게 선택 옵션을 제공하는 UI 요소입니다. Checkbox의 테마를 설정하여 앱의 디자인과 일관성을 유지할 수 있습니다. 이번 글에서는 플러터에서 Checkbox 테마를 설정하는 방법을 알아보겠습니다.

테마 적용하기

Checkbox 테마를 설정하기 위해서는 ThemeData 클래스를 이용합니다.

아래의 예제 코드에서는 ThemeData 클래스의 checkboxTheme 속성을 사용하여 Checkbox의 테마를 설정하는 방법을 보여줍니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = ThemeData(
      checkboxTheme: CheckboxThemeData(
        fillColor: MaterialStateProperty.all(Colors.blue), // 체크박스 내부 채우기 색상
        overlayColor: MaterialStateProperty.all(Colors.green), // 체크박스의 터치 잔상 색상
        checkColor: MaterialStateProperty.all(Colors.white), // 체크 아이콘 색상
        side: MaterialStateProperty.all(BorderSide(color: Colors.red, width: 2.0)), // 체크박스 테두리 속성
      ),
    );

    return MaterialApp(
      theme: theme,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Checkbox Theme Example'),
        ),
        body: Center(
          child: Checkbox(
            value: true,
            onChanged: (value) {},
          ),
        ),
      ),
    );
  }
}

위 코드에서는 새로운 테마를 생성하여 CheckboxThemeData의 속성을 설정합니다. 예제에서는 체크박스의 색상, 터치 잔상 색상, 체크 아이콘 색상 및 테두리 속성을 변경하였습니다.

위 코드를 실행하면 앱의 체크박스가 설정한 테마로 표시됩니다.

테마 재사용하기

만약 다른 위젯에서도 같은 테마를 사용하고 싶다면, 테마를 공유하는 방법이 있습니다.

import 'package:flutter/material.dart';

final checkboxTheme = ThemeData(
  checkboxTheme: CheckboxThemeData(
    fillColor: MaterialStateProperty.all(Colors.blue), // 체크박스 내부 채우기 색상
    overlayColor: MaterialStateProperty.all(Colors.green), // 체크박스의 터치 잔상 색상
    checkColor: MaterialStateProperty.all(Colors.white), // 체크 아이콘 색상
    side: MaterialStateProperty.all(BorderSide(color: Colors.red, width: 2.0)), // 체크박스 테두리 속성
  ),
);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: checkboxTheme,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Checkbox Theme Example'),
        ),
        body: Center(
          child: Checkbox(
            value: true,
            onChanged: (value) {},
          ),
        ),
      ),
    );
  }
}

위 예제에서는 테마를 전역으로 선언하여 다른 위젯에서도 동일한 테마를 사용할 수 있게 했습니다.

위 코드를 실행하면 체크박스가 동일한 테마로 표시됩니다.

결론

이번 글에서는 플러터에서 Checkbox 테마를 설정하는 방법에 대해 알아보았습니다. 테마를 설정하여 앱의 디자인과 일관성을 유지할 수 있습니다. 테마를 재사용하면 코드의 간결성과 유지보수성을 향상시킬 수 있습니다. 플러터의 다양한 UI 요소의 테마 설정에 대해서도 더 알아보시길 바랍니다.