자니노트

Flutter dynamic_color 라이브러리 설명 및 사용법 본문

모바일 개발/Dart&Flutter

Flutter dynamic_color 라이브러리 설명 및 사용법

zaninote 2023. 8. 22. 14:39

flutter_dynamic_color는 Flutter의 표준 패키지가 아닙니다. 

그러나 "dynamic color"라는 개념이나 관련 패키지를 참조하고 있다면, 

그것은 아마 iOS 13+의 Dynamic Color 기능을 Flutter에서 사용하려는 것일 수 있습니다. 

이 기능을 사용하면, 앱이 light mode와 dark mode 사이에서 전환될 때 자동으로 색상을 조정할 수 있습니다.

Flutter에서 이러한 기능을 사용하려면, 기본적으로 ThemeData의 colorScheme 속성을 사용하여 

light mode dark mode에 대한 색상을 지정할 수 있습니다.

다음은 Flutter에서 light mode와 dark mode에 대한 동적 색상을 설정하는 방법의 예입니다:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dynamic Color Demo',
      theme: ThemeData.light().copyWith(
        colorScheme: ColorScheme.light(
          primary: Colors.blue, // Light mode에서의 주요 색상
          secondary: Colors.red, // Light mode에서의 보조 색상
          // 다른 색상들...
        ),
      ),
      darkTheme: ThemeData.dark().copyWith(
        colorScheme: ColorScheme.dark(
          primary: Colors.blueGrey, // Dark mode에서의 주요 색상
          secondary: Colors.deepOrange, // Dark mode에서의 보조 색상
          // 다른 색상들...
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Color Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: Text('Click Me!'),
        ),
      ),
    );
  }
}

위의 예제에서 ThemeData.light()와 ThemeData.dark()는 각각 light mode와 dark mode에 대한 기본 테마 설정을 제공합니다. copyWith 메서드를 사용하여 이러한 기본 설정을 재정의하고, colorScheme 속성을 사용하여 특정 색상을 지정할 수 있습니다.

이렇게 설정하면, 사용자의 시스템 설정에 따라 앱이 light mode와 dark mode 사이에서 자동으로 전환되며, 

지정한 색상이 적절하게 적용됩니다.

Comments