[플러터] 초보자도 다크모드 만들 수 있다 - 3

이 포스트는 시리즈편이다 3편까지 있으며

이게 3편이다.

 

그리고 나는 플러터의 플자도 모른다 싶으면 1부터 따라해보는것을 추천한다.

 

초보자도 다크모드 만들 수 있다 - 1 바로가기

초보자도 다크모드 만들 수 있다 - 2 바로가기

초보자도 다크모드 만들 수 있다 - 3 현재 포스트

 

 

 

저번에 여기까지 만들었다.

이제 버튼을 누르면 화면이 검게 또 한번 누르면 다시 하얗게 만들어지도록 만들자

 

 

변수를 하나 만들어준다

여기서 변수에 대한 설명을 첨부한다

필요하면 열어보길 바란다

 

=================================

  bool isDarkMode = false; // 다크모드가 활성화 되었는지 체크
  
  bool : 변수의 형태다. int, String 등 여러개가 있지만 여기선 bool만 설명한다
  bool은 true와 false 두 가지 값만 가질 수 있다
  다시 말해 진실 혹은 거짓 이 두가지를 이용해 앱의 상태를 관찰하거나 할때 주로 사용한다
  
  isDarkMode : 변수 이름이다. 변수 이름을 i , a , z  이런식으로 설정할 수 도 있는데
  나중에 유지보수할때 못알아본다. 주석 안달아두면 솔직히 컴퓨터 부모님이 와도 잘 못알아본다.
  주석이 있어도 화난다.
  변수는 항상 이름 파익이 쉽도록 만들자
  
   = : 대입할때 쓴다
   비 전공자 입장에서 볼때 = 을 설명하면
   a = 1 는 a 는 1 이다 라고 설명할 수 있겠지만
   
   전공자 입장에서 보면
   a = 1  는 a 에 1을 대입한다 라고 할 수 있다
   즉
   
   isDarkMode에 값을 대입하란 얘기다
   
   false : 앞서 bool 이 가질 수 있는 값중 하나다
   거짓을 담당하고 있으며
   
   이 변수에서는
   
   isDarkMode에 false를 대입하라고 하는 내용과 같다.
   
   // 는 주석이다 변수같은거나 함수같은거엔 주석을 필히 달아두자
   나중에 후회한다

=================================

 

그 다음 함수를 하나 만든다

함수라는건 특정한 기능을 편하게 사용하거나 반복적으로 사용하기 위해

만들어둔 코드집합이라고 볼 수 있다.

 

함수를 다음과 같은 위치에 작성한다

 

함수를 잠깐 분해해서 설명하자면

아래와 같다

 

void : 반환 형태를 얘기한다 void라면 반환하는게 없을때 작성한다 toggleTheme : 함수의 이름이며 , 호출할때 사용한다  setState((){}) : 플러터에서 Stateful 위젯과 함께 사용된다. 상태를 변경되면 위젯을 재 빌드 한다. 따라서 화면이 갱신된다.  isDarkMode = !isDarkMode : isDarkMode 변수값을 뒤집는 역할을 한다 현재 isDarkMode는 false 값을 가지고 있는데 변수 앞에 ! 가 붙으면 해당 내용을 NOT 하는 역할을 한다 쉽게 얘기하면 false를 가지고 있는 isDarkMode는 !isDarkMode가 되어 true가 되는것이다. 이에 대해서는 추후에 변수다루기 할때 집중적으로 설명하도록 하겠다

 

이제 함수를 만들었으니

해당 함수를 버튼에 적용시켜 버튼을 눌렀을때 함수가 실행되도록 만들면 된다.

 

버튼의 onPressed에 작성하면된다.

 

 

적용했다면

버튼을 눌러보자

 

 

아무 변화가 없다

저거 사기치는거 아니야?

할 수 있는데

 

우리가 만든 함수를 보자

 

isDarkMode의 값이

True가 되도록 만든게 고작이다

 

이 함수로 뭘 할 수 있냐고 묻는다면

그냥 false를 true로 바꿀 수 있도록 만든거다

 

그게 전부다

 

실제로 화면의 설정을 바꾸는건 작성하지 않아서 그렇다.

해당 내용을 작성해야한다.

 

테마를 바꿔야하는데

테마를 변경하는건

theme 키워드로 바꿀 수 있다.

다만 해당 키워드는 MaterialApp 에서 사용할 수 있는데

우리는 최 상단에

 

 

이렇게 MaterialApp을 만들어놨다

 

조상님의 머리가 곱슬이냐 아니냐에 따라 후손도 곱슬이냐 아니냐가 결정되듯

우리는 조상님의 설정값을 바꿔주어야 한다.

 

다만 문제가 있는데

runApp에 사용된 MaterialApp은 시조의 격인데

이곳에 지정하려면 복잡한 과정을 거치기에 간단하게 사용하려고 한다.

 

이곳에 있는 Scaffold에 MaterialApp을 씌워주는 작업을 진행하고

그곳에 테마를 지정할것이다.

 

굳이 따지면 증조 격 되는 조상을 하나 만든다고 보면 된다.

 

이 전과 같이

Scaffold 앞에 커서를 두고 전구를 누른다

 

그 다음 Wrap with widget... 을 선택하고

 

다음과 같이 만들어주면 된다

 

변경할 부분은

child를 home으로 바꾸는 작업 그리고 widget이라 작성된 부분을 MaterialApp으로 바꿔주면 된다

 

이 다음 테마를 지정해줄건데

테마는

아래랑 같이 작성하면 된다.

 

 

조금 설명을 해보자면

isDarkMode가 true면 ThemeData.dark()를 실행하고

isDarkMode가 false면 ThemeData.light()를 실행하라는 명령어다

 

보통 이걸 풀어쓰면

if (isDarkMode == true) {

ThemeData.dark();

} else {

ThemeData.light();

}

 

뭐 이런식으로 작성되겠지만

? 키워드를 통해 간결하게 작성할 수 있다

 

풀어 쓰는 건 학습할때 익히고

쓰는법을 익혔다면 키워드를 통해 함축해서 쓰는법을 익혀라

 

그냥 쉽게보면 된다

선언된 변수값이 (isDarkMode)

true면 ThemeData.dark() 를 실행하고

false면 ThemeData.light()를 실행하라는 명령어다

 

그러면 isDarkMode는 어떻게 값이 변화될까

 

앞서 만들어둔 함수가 여기서 빛을 본다

 

구조를 살짝 살펴보면

 

버튼을 눌렀을때 함수가 실행되고

함수가 실행되어 값이 변경되고

값이 변경되었으니 setState가 작동해 화면을 재 빌드한다.

 

그리고 마지막으로 일치하는 값에 있는 다른 명령어를 실행한다.

 

우리는 Theme.Data의 dark() 와 light()를 만든적이 없다.

 

이건 플러터에서 제공하는 기본 테마로

다크모드 / 라이트모드를 지원하도록 되어있다.

 

물론 커스터마이즈도 가능하긴하지만

그건 나중에 시간나면 해보길 추천한다.

 

이제 저장하고 핫리로드 혹은 리스타트를 진행한 다음 버튼을 눌러보면

 

 

화면이 변하는걸 볼 수 있다.

 

멋지다

이제 모드 변경을 지원하는 토글키를 만들었다.

 

다만 뭔가 좀 아쉽다.

버튼을 눌렀을때 아이콘도 바뀐다면 더 멋있지 않을까?

 

그러니까 추가해본다.

 

기존에 만들어둔 아이콘을 수정하도록 한다

이번에는 icon: 을 수정할건데

 

방법은 위에서 테마를 지정한 방식과 같다.

 

isDarkMode 변수가 True면 앞에 있는 값

Icon(Icons.brightness_2)을 실행

 

False면 뒤에 있는 값

Icon(Icons.wb_sunny)를 실행 하도록 한다

 

이렇게 하면 

 

모드가 바뀔때 아이콘도 바뀌는걸 볼 수 있다.

 

좀 더 해볼까,

아이콘 색상도 바꿀 수 있다.

그 전에 크기부터 바꿔보자

 

이제 좀 커졌다

 

색상 지정하는건 

icon 옵션중 color를 지정하면 된다.

그 다음 아래랑 같이 지정해주면 모드에 따라 색상도 변화한다.

 

 

설명하자면

isDarkMode가 True면 아이콘을 흰색으로

isDarkMode가 False면 아이콘을 노란색으로 지정하라는 얘기다

 

 color 옵션에 Colors.white 이렇게 작성되는 이유는

 

나도 모른다. 플러터 개발자한테 따지도록

 

최종적으로 결과물은

 

 

이렇게 나올것이다

잘 만들었다.

 

다음엔 또 다른 기능을 구현해보도록 하자

 

끝내며

 

앞서 얘기했지만

나는 뭐 변수 형태가 어쨌네, 값의 형태가 어쩌네, 바이트가 어쩌고 메가가 어쩌고

이론만 죽어라 공부하면 지루함에 못이겨 떠나게 된다고 생각한다

뭐가 됐던 구현이라도 해봐야 맛이라도 볼것 아닌가

찍먹하는 사람들에게 당부하고 싶다

포기하지 말아라

결국 프로그래머란 직업은

버그를 사랑하는 변태같은 직업이다