[flutter] 플러터에서의 앱 테마 및 스타일 적용 방법

30 Nov 2023

flutter

Flutter는 사용자 정의 가능한 앱 테마와 스타일을 제공하여 앱의 디자인과 사용자 경험을 개선할 수 있습니다. 이번 글에서는 플러터에서 앱 테마와 스타일을 적용하는 방법에 대해 알아보겠습니다.

앱 테마 적용하기

플러터에서는 Theme 위젯을 사용하여 앱의 전반적인 테마를 설정할 수 있습니다. Theme 위젯은 앱 전체에 영향을 주는 테마 속성을 지정하는 역할을 합니다.

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue,
        accentColor: Colors.orange,
      ),
      home: MyApp(),
    ),
  );
}

위의 예시 코드에서는 ThemeData를 사용하여 primaryColor와 accentColor 를 설정하였습니다. primaryColor는 앱의 기본 색상으로 사용되고, accentColor는 강조할 때 사용되는 색상입니다.

위젯 스타일 적용하기

ThemeData안의 textTheme 프로퍼티를 사용하여 앱의 텍스트 스타일을 지정할 수 있습니다. 다양한 플러터 위젯에서 기본 텍스트 스타일을 사용하는 경우 테마를 사용하여 일관된 스타일을 유지할 수 있습니다.

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          headline2: TextStyle(fontSize: 20, fontWeight: FontWeight.normal),
          bodyText1: TextStyle(fontSize: 16, color: Colors.grey),
        ),
      ),
      home: MyApp(),
    ),
  );
}

위의 예시 코드에서는 textTheme를 사용하여 headline1, headline2, bodyText1 등의 스타일을 지정하였습니다. 이러한 스타일을 플러터 위젯에서 style 프로퍼티를 통해 참조하여 적용할 수 있습니다.

위젯에 테마 적용하기

테마 속성은 Theme.of(context)를 사용하여 위젯 내에서도 참조할 수 있습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Theme and Style'),
      ),
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: Theme.of(context).textTheme.headline1,
        ),
      ),
    );
  }
}

위의 예시 코드에서는 Theme.of(context).textTheme.headline1을 사용하여 Text 위젯에 테마 스타일을 적용하였습니다.

위에서 다룬 내용은 플러터에서 앱 테마와 스타일을 적용하는 기본적인 방법입니다. 더 많은 테마 속성과 스타일을 사용하여 앱을 개선하고 사용자 경험을 향상시킬 수 있습니다. 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.