[flutter] 기본 화면 똑같이 구현하기

작성한 것을 Center로 보내기 위해선 다음과 같이 body 부분에 Center 위젯으로 묶어주면 된다.

이제 여러개의 요소들을 넣기 위한 작업을 해보자.
여러개의 요소를 넣기 위해서는 배열을 선언해야 한다.
여러개의 요소를 세로 방향(열방향)으로 넣기 위해 child : Column을 불러오고, 그 내부에 }children: []"을 통해 배열을 넣어보자.

body: Center(
          child : Column(
            children: <Widget>[
              Text(_message, style: TextStyle(fontSize: 30)),
              Text('$_counter', style: TextStyle(fontSize: 30))
            ],
          )
      ));

children
children 속성을 통해 여러 위젯들을 리스트 형태로 포함할 수 있다.

다음과 같은 결과를 얻을 수 있다. center에 있던 것이 위로 올라갔다. 왜일까?

Column같은 경우는, 전체 화면 길이를 채우는 박스를 만들게 된다. 그러므로 배열을 만들 경우 위에서부터 채워지게 된다. 이때 정렬 기준을 설정하면 가운데로 오게끔 할 수 있다.

counter 변수는 int이기 때문에 String만 올 수 있는 해당 부분에 원래 올 수 없지만, '$변수명' 형식을 통해 String으로 선언해주면 올 수 있다.

column 부분에 다음과 같은 정렬 기준을 추가한다.

mainAxisAlignment: MainAxisAlignment.center

mainAxisAlignment?
주 축(main axis)을 따라 자식 위젯들을 정렬하는 방법을 결정하는 속성이다. start, end, center등 여러 속성이 존재한다.

count의 경우, 버튼을 누를때마다 증가 시키기 위해 다음 코드를 추가했다.

void _changeMessage() {
  setState(() { //호출하면 ui를 변경
    _message = "헬로 월드";
    _counter++;
  });
}

다음과 같은 화면을 만들 수 있다.