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

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

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

 

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

 

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

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

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

 

 

 

저번에 여기까지 한걸로 기억한다

원래는 이것저것 추가해볼 예정이었으나, 바로 버튼부터 만들어보자

 

코드를 수정해 버튼을 만든다.

 

이 코드를 아래와 같이 바꾼다

설명은 나중에 할테니 일단 바꾸자

 

 

코드를 이렇게 바꾸고 나면

 

 

화면이 이렇게 바뀐걸 볼 수 있다

data 보다는 나은 화면이지만 뭔가 부족하다

버튼을 가운데로 가져오도록 하자

 

기존 코드를 수정한다.

 

이때 노가다로 추가하는 방법도 있겠지만

조금 더 개발의 질을 올려주는 방법을 사용하도록 한다

 

알아두면 유용하다 일단 봐두자

 

 

위젯의 첫 부분에 커서를 찍으면 좌측으로 전구모양이 보이는데

해당 전구를 누르면

 

이렇게 여러가지 메뉴를 볼 수 있다.

여기서 바로 Center를 추가할 수도 있겠지만

다양한 방식을 사용할 수 있으니

첫번째

Wrap with widget...을 선택해준다

 

이제 선택된 widget을 바꾸면 된다.

 

cent 만 입력해도 뜬다.

센터로 설정하고 나면 버튼은

 

이렇게 가운데로 오게 된다.

하지만 우리가 원하는건 화면 정 중앙이므로

다른 정렬도 함께 사용해준다.

 

여기서 Column을 이용해 정렬한다.

 

mai 라고 입력하면

mainAxisAlignment 를 입력할 수 있도록 출력되는데 엔터를 눌러주면 된다

그 다음

 

다시 똑같이 mai를 입력하면 여러 메뉴를 볼 수 있는데

각 메뉴에 대한건 사용할 때 마다 설명하는것으로 하고

이번에는 MainAxisAlignment.center 를 선택한다

 

MainAxisAlignment 이 궁금한 사람은

아래 더보기를 눌러보자

 

정렬하는 속성은 크게 두가지가 있다

crossAxisAlignment , mainAxisAlignment 

 

이 두가지는 

Column과 Row 위젯에서 사용하는데

 

Column 위젯에서

· crossAxisAlignment 는 가로 정렬을 의미하고

· mainAxisAlignment 는 세로 정렬을 의미한다

 

반대로 Row 위젯에서

· mainAxisAlignment 는 가로 정렬을 의미하고

· crossAxisAlignment 는 세로 정렬을 의미한다

 

사용은 앞서 작성한것처럼

        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,

이런식으로 사용하게 되며

center에 알맞은 속성이 들어온다.

 

다양한 속성을 설명하기엔 길어지므로 사용할때마다 설명하거나

아니면 직접 학습하는 방식으로 익히길 바란다

백날 이론봐서는 의미없다 직접 써보고

몸으로 익혀 머슬메모리에 기억하는게

제일이다.

 

Column에 옵션을 추가하고 나면

 

아이콘이 가운데로 오는것을 볼 수 있다.

 

이제 다음에는

변수도 추가해보고 테마도 건들여보고

실제로 화면을 변화시켜보자

 

 

끝내며

 

글을 나눠쓰는게 나도 썩 내키진 않지만

글이 길어지면 그만큼 집중력이 떨어진다

이해가 안된다면 반복적으로 학습해보길 바란다