색상값 class 만들려면

열심이·2023년 4월 11일

Flutter에서 색상값 클래스를 만들려면 Color 클래스를 확장하면 됩니다. 예를 들어, 다음과 같이 색상 값을 나타내는 MyColor 클래스를 만들 수 있습니다.

import 'package:flutter/material.dart';

class MyColor extends Color {
  const MyColor(int value) : super(value);
  
  static const Color myColor1 = const Color(0xFFE1F5FE);
  static const Color myColor2 = const Color(0xFF90CAF9);
  static const Color myColor3 = const Color(0xFF2196F3);
}

위의 코드에서 MyColor 클래스는 Color 클래스를 상속받습니다. const MyColor(int value) : super(value)는 MyColor 클래스의 생성자입니다. 이 생성자는 부모 클래스 Color 클래스의 생성자를 호출하며, 인자로 전달받은 value를 사용하여 색상 값을 초기화합니다.

MyColor 클래스에서 static const으로 선언된 myColor1, myColor2, myColor3는 클래스 멤버 변수로 선언되었습니다. 이들은 해당 색상 값을 나타냅니다. 이렇게 클래스 멤버 변수로 선언하면, 코드의 여러 부분에서 쉽게 사용할 수 있습니다.

MyColor 클래스를 사용하는 방법은 다음과 같습니다.

import 'package:flutter/material.dart';

import 'my_color.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        backgroundColor: MyColor.myColor1,
        appBar: AppBar(
          backgroundColor: MyColor.myColor2,
          title: Text('My App'),
        ),
        body: Center(
          child: Container(
            color: MyColor.myColor3,
            child: Text(
              'Hello, world!',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드에서 MyColor 클래스는 my_color.dart 파일에 정의되어 있습니다. 이 파일은 import 문으로 가져옵니다.

위 코드에서 MyColor.myColor1, MyColor.myColor2, MyColor.myColor3은 각각 클래스 멤버 변수 myColor1, myColor2, myColor3의 값을 나타냅니다. 이 값을 backgroundColor 또는 color와 같은 속성에 지정하여, 해당 색상으로 화면을 구성할 수 있습니다.

위와 같이 색상 값을 클래스로 관리하면, 여러 곳에서 같은 색상을 사용할 때 일관성을 유지할 수 있습니다. 또한, 색상 값을 변경할 때는 클래스 멤버 변수의 값을 수정하기만 하면 되므로, 코드를 변경하기 쉽고 유지보수도 용이합니다.

profile
열심이하는자

0개의 댓글