[Flutter] 에러 핸들링 - primarySwatch를 사용하여 theme 적용하는데 appBar의 색상이 변경되지 않음

 

<에러 발생 과정>

• flutter project를 생성하면 기본적으로 생기는 demo page에서 테마를 적용하는 실습 중에 발생
• 적용할 테마를 새로운 파일에 만들어서 적용하였음

 

1. 사용할 색상을 새로운 파일로 생성 

• 사용할 컬러 색을 지정할 'pharmacy_colors.dart' 파일 생성
• 'PharmacyColors' 클래스 생성
• 사용할 MaterialColor를 'primaryMaterialColor'라는 변수명으로 선언

 

2. 위에서 생성한 MaterialColor를 활용하여 theme 생성

• 사용할 테마를 정리할 'pharmacy_themex.dart' 파일 생성 
• 'PharmacyThemes' 클래스 생성
• 라이트모드와 다크모드를 각각 'lightTheme'과 'darkTheme'으로 생성
• 앞서 선언한 PharmacyColors클래스의 MaterialColor인 primaryMaterialColor를 primartSwatch로 지정

 

3. 생성한 theme을 main.dart의 MyApp클래스에 적용

• MaterialApp의 theme에 'PharmacyThemes.lightTheme'적용
• 이때 appBar의 색상이 지정한 색으로 변경되어야 하나, 변경이 되지 않는 에러 발생

 

 

반응형

 

<에러 원인 및 해결>

사실 에러라고 표현하기도 애매하지만,

프로젝트를 생성할때 Demo Page가 생성되면서 appBar의 backgroundColor가 지정되어 있었음.

 

위 사진에서 드래그 된 부분을 보면 appBar의 배경색이 지정되어 있음.

 

현재 파일의 colorScheme에 접근하여 inversePrimary를 가지고 온다는 뜻인데,

기존에 있던 colorScheme 코드를 지우고 직접 생성한 테마를 theme에 적용했기 때문에

그 색상값을 찾을 수 없는 것이고, 흰색으로 배경색이 출력된 것이다.

 

따라서 이 부분의 코드를 지워주면 우리가 지정한 테마의 primartSwatch가 정상적으로 적용됨