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

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

다 필요없고 구현하는것만 보고 싶으면 3편을 보는것을 추천한다

 

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

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

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

 

 

앱을 개발하다보면 다크모드 / 라이트모드 전환에 대한 기능이 필요해지기 마련이다

특히 유틸리티의 경우 다크모드를 지원하지 않으면 부족한 앱 처럼 보이기도 한다

 

그래서 다크모드 토글 키를 만들어보려고 한다.

 

나는 프로그래밍에 있어서 변수가 어쩌고 , 연산식이 저쩌고 이런 식으로 서술하는걸 좋아하지 않는다

 

이유는 간단하다

 

지루하다

 

백날 천날 이론만 배워봐라

 

만들 수 있는게 없다

 

그러니까 잘 몰라도 실전으로 들어가서 헤딩 해보는 것도 방법이라 생각한다.

 

각설하고 본론으로 돌아와서

 

이제 설정 해둔 IDE랑 애뮬레이터를 이용해서 뭐라도 만들어보자

 

 

저번에 만들어둔 애뮬레이터를 키고

IDE에서 main.dart의 코드를 실행한다.

 

 

앱이 기기에 설치되고 샘플 코드가 작동하는것을 볼 수 있다.

각 요소나 기능들은 필요할때마다 설명하거나 배워가는식으로 하고

일단 버튼도 눌러보고 하면서 신기함을 즐겼으면 한다

 

필연적인 에러와 각종 버그랑 싸우고 승리하려면

결국 즐겨야한다

 

이게 샘플 코드인데

지금은 몰라도 된다

그냥 뭐가 많구나 하는것만 알면된다.

 

우리는 샘플코드가지고 뭐 할게 아니므로

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

 

이 코드만 빼고 다 지워준다

 

 

지웠다면 우리만의 화면을 만들어야하는데

플러터는

두 가지 화면을 지원한다

StatefulWidget / StatelessWidget

 

간단하게 두 위젯의 차이를 보자면

 

StatefulWidget	StatelessWidget
동적	정적
리소스 소모 많음	리소스 소모 적음

 

이런 차이가 있다

StatefulWidget 의 경우 데이터가 갱신되거나 , 화면이 갱신되면 새롭게 화면을 만들어

변화를 반영한다.

StatelessWidget 는 데이터가 갱신되거나 , 화면이 갱신되어도 변화를 반영하진 않는다.

따라서 어떤 라이브러리들을 함께 사용하는데 그건 나중에 알아보도록 하겠다.

 

오늘은 토글키를 이용해 화면을 즉각적으로 변화시키려고 하기 때문에 StatefulWidget을 이용한다.

 

 

길게 칠 것도 없다 stf만 입력하면 자동으로 완성해준다

 

 

추가를 하면 기본적으로 이름을 변경할 수 있다

F2를 눌러 변경하도록 한다

이름은 아무거나 상관없지만 최소한 이게 뭐하는건지는 알 수 있도록 작성한다

 

 

필자는 그냥 다크모드토글로 정했다

이제

void main() {
  runApp(const MyApp());
}

 

여기 빨간 오류가 거슬린다.

이 오류는 시작점을 찾지못해 오류가 발생한다

앞서 StatefulWidget의 이름을 변경했으므로 변경한 이름과 일치하게 바꿔준다.

 

 

에러가 없어졌으니 이제 테스트를 해본다.

 

 

* 아는 사람은  넘어가자 초심자를 위한 설명이다 *

 

우리가 주목해야 할 버튼은

크게 4가지가 있다

 

	일시중지 버튼 [ 나는 많이 안씀 ]
	핫 리로드 [ 앱을 종료하지 않아도 업데이트 내역이 반영됨 ]
	리스타트 [ 앱을 재 시작함 ]
	스탑 [ 앱 종료 ]

 

이 정도만 알아도 된다.

우리는 리스타트 버튼을 눌러 코드 업데이트를 반영한다

 

 

화면이 시꺼매지는걸 볼 수 있다

Placeholder를 지정하면 화면이 이렇게 생성된다.

 

이렇게 두면 다크모드고 라이트모드고

아무것도 아니니까 코드를 업데이트 하도록 한다

 

그리고 글자를 추가해본다.

 

 

하지만 애뮬레이터 화면은 변경된게 없다.

파란색 경고에 대해서는 따로 설명하지 않겠다.

 

어차피 쓰다보면 알게된다.

그래도 궁금하면 아래를 참고하자

 

컨테이너에는 margin , padding , width , height , decoration 등 옵션이 많은데

옵션을 사용하지 않고 컨테이너를 사용하는 것을 플러터는 싫어한다

그래서 경고를 날려주는건데 딱히 실행하는데 문제 없다

보통 저렇게 지정하면 sizebox라는걸로 알아서 바꿔준다.

 

왜 옵션없이 컨테이너를 쓰지 말라고 하는지는

플러터 개발자한테 물어보도록 하자

 

 

그리고 컨트롤패널을 보면 

 

못보던 친구들이 활성화가 되어있는게 보인다.

보통 이렇게 표시되면 에러가 발생한거다.

 

그래서 업데이트가 반영되지 않은 상태고

디버그모드라서 하나씩 실행해보고 어디서 문제인지 찾을 수 도 있다.

 

이건 나중에 디버그 해보면서 천천히 하나씩 써보고

지금은 원인부터 찾도록 하자

 

대게 에러생기면 여기 표시해준다

근데 표시가 없다면 리스타트를 눌러보도록 하자

 

이제 뭐가 문젠지 정상적으로 출력된다

단순한 에러메세지를 보자면

No Directionality widget found.

이게 문제라고 한다.

 

왜 이런 문제가 발생하냐면

플러터는 MaterialApp 이라고 하는 조상님을 항상 먼저 불러와야 한다.

 

사람도 마찬가지로

조상이 없는데 내가 있을 수는 없는 노릇이다

 

따라서 조상님을 추가해주도록 한다.

 

추가하는 위치는 StatefulWidget 위에 있는 main() 함수에서 진행한다.

 

void main() {
  runApp(const DarkModeToggle());
}

 

기존에 있는 코드를 아래와 같이 변경해준다

 

void main() {
  runApp(
    MaterialApp(
      home: DarkModeToggle(),
    ),
  );
}

 

 

이제 조상님도 추가해줬으니 후손이 존재할 수 있게 되었다.

리스타트로 확인하자

 

 

부담스럽게 data 라는 글씨가 정상적으로 화면에 표시되는걸 확인할 수 있다.

 

여기까지 하면 토글키를 만들 기본 세팅이 끝났다.

 

원래는 쭉 길게 작성하려고 했으나

스크롤이 길어지면 노잼이므로 다음 글로 이어서 작성한다.

 

 

글을 마치며

 

많은 사람들이 개발자에 도전하고 좌절하며 꿈을 이어나간다.

 

개중에는 포기한사람도 있고, 개중에는 성공한 사람도 있다

 

하나 확실한건 끈기를 가지고 덤비면 뭐라도 만들어진다는 것이다.

 

개발자 지망생 혹은 주니어 개발자들이 힘냈으면 하는 바램이다.

 

또 하나

 

이론만 죽어라 공부하면 결국 구구단이나 만들고 있다.

 

실제 서비스 기능을 구현해보자는 마음으로 덤비길 바란다.

 

다음 글에서 보도록 하자