[flutter] 플러터 훅 위젯을 활용한 앱 전체 테마 설정 방법

21 Dec 2023

flutter

플러터 앱에서 앱 전체적으로 일관된 디자인을 적용하고자 할 때, 훅 위젯을 활용하여 간편하게 테마를 설정할 수 있습니다. 이 글에서는 플러터의 훅 위젯을 이용하여 앱 전체 테마를 설정하는 방법에 대해 알아보겠습니다.

1. 훅(Hooks)이란?

훅은 플러터의 stateful 위젯에서 상태와 빌드 메서드를 분리하여 관리할 수 있도록 도와주는 기능입니다.

useTheme() {
  // 테마 관련 로직을 이곳에 작성할 수 있음
}

2. 훅을 활용한 앱 전체 테마 설정

앱 전체 테마를 설정하려면 다음과 같이 훅을 사용하여 테마 관련 로직을 작성합니다.

useAppTheme() {
  // 앱 전체 테마를 설정하는 로직을 작성
}

훅을 사용하여 앱 전체 테마를 설정하면, 모든 화면 및 위젯에 일관된 디자인 테마를 적용할 수 있습니다.

3. 예제 코드

다음은 훅을 활용하여 앱 전체 테마를 설정하는 예제 코드입니다.

import 'package:flutter/material.dart';

useAppTheme() {
  final themeData = ThemeData(
    primaryColor: Colors.blue,
    backgroundColor: Colors.white,
    // 기타 테마 설정
  );
  return themeData;
}

void main() {
  runApp(
    MaterialApp(
      theme: useAppTheme(),
      home: MyHomePage(),
    ),
  );
}

class MyHomePage extends StatelessWidget {
  @override
  build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('앱 전체 테마 설정'),
      ),
      body: Center(
        child: Text('앱 전체 테마를 설정하는 예제'),
      ),
    );
  }
}

4. 마치며

위의 예제 코드와 설명을 참고하여, 플러터의 훅 위젯을 활용하여 앱 전체 테마를 설정하는 방법에 대해 알아보았습니다. 훅을 효과적으로 활용하면 앱의 테마를 간편하게 일관되게 설정할 수 있으며, 개발 생산성을 향상시킬 수 있습니다.

참고 자료