오공완 (with 개발이 재미있는 플러터앱 프로그램밍) #4

// 이곳에 쓴 내용은 앱 만들기라는 버킷리스트를 달성하기 위해 플러터를 공부하면서 정리하고 있는 내용입니다.

플러터에 대해 아는 것이 거의 없기 때문에 정리하면서 오류가 있을 수 있습니다.

오류를 발견하신 분은 댓글 남겨 주시면 감사하겠습니다.

 

 [Structure]를 보면 앱의 구조를 볼 수 있음. 

설정이 다를 수 있지만 나의 경우 alt+7을 누르면 스트럭쳐를 볼 수 있었음.

 

 

머티리얼 디자인 스펙은 아래를 참고하라는데 가봐도 뭘 봐야 할지..^^;;

https://m3.material.io/

Material Design

 

Scaffold 위젯

이 녀석은 지난번에도 배웠듯이 앱바, 바디, 내비게이션바, 플로팅 액션 버튼, 드로어 등을 제공한다.

앱바 왼쪽 상단의 메뉴 버튼을 햄버거 버튼이라고 부르는지 처음 알았다.--;; 와플 버튼은 알았는데..

UI를 그리기 위해 빌드, 레이아웃, 페인트 이렇게 3단계를 거친다고 함.

또다시, 외계어 등장. 노드와 어제 본 파라미터 등

일단, 또 뛰어넘기 신공~

안드로이드 스튜디오에서 위젯 트리를 보는 방법은 오른쪽 탭 모음에서 [Flutter Inspector]를 클릭하면 된단다.

뭔지 모르지만 그럴싸 하다. 다만 궁금한 건 가로 세로 비율이 저 수치와 맞느냐이다. 고정되어서 보여줬음 좋겠는데, 창을 키우면 키우는대로 숫자는 변함이 없고, 상하좌우 보는 비율이 달라진다.

 

위젯 타입은 StatelessWidget과 StatefulWidget으로 나눌 수 있는데, 내가 이해한 것은 값이 변화가 있으면 Stateful로 이해했다. 카운터 앱의 경우 숫자 변화가 생기는 부분은 statefulwidget을 쓰고, 그렇지 않은 부분은 statelesswidget을 썼다.

 

StatefulWidget위젯을 StatelessWidget으로 변경해 보라고 한다. 'this.'를 썼는데, 생성자 함수로 전달하는 파라미터가 로컬 변수가 아닌 클래스의 속성임을 나타낸다고 한다. 역시나 외계어.

 

단축키(단축키가 있다는 건 그만큼 많이 쓴다는 의미겠지~ 잘 기억해 두자.)

StatefulWidget: stful+엔터 or 탭키

StatelessWidget: stl+엔터 or 탭키

 

카운터 앱을 감소하는 기능으로 바꾸기

 

카운터 앱에 플러스, 마이너스 기능 추가

SizedBox(width: 40),

const Spacer(),

위 명령어?를 이용하여 처음 공간을 확보하고, 버튼 둘 간의 공간을 확보하기

 

다행히 성공했다. 숫자가 0보다 작으면 그냥 0으로 세팅하는 명령어도 있는데 그건 적용하지 않았다. 이것만으로도 오늘은 만족한다.

void _decrementCounter() {
  setState(() {
    _counter > 0 ? _counter-- : 0;
  });
}

이것도 작동을 한다. ' ? ',' : ' 의 의미가 0보다 크냐? 그럼, --를 적용해. 아니면 그냥 0 이야 라는 의미인 거 같다.

if 문을 간단하게 정의하는 게 신기하다.

 

Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Flutter Demo',
    theme: ThemeData(

'DEBUG' 마크를 없애는 것까지 오늘은 완벽 그 잡채~^^;;