2-2. Flutter 프로젝트 기본 구조 2

다음 내용은 'Doit! 플러터 앱 프로그래밍' 책 내용을 정리한 내용입니다.

 

 

 

 

MyApp 클래스를 수정해보면서 익혀보는 기본 구조 1

위 코드처럼 home을 정의한 부분에 Text() 함수를 넣어 'hello\nFlutter'라는 문자열을 화면에 출력해보자.

Text() 함수는 화면에 텍스트를 출력하는 플러터의 기본 위젯이다.

프로그램을 실행하면 에뮬레이터에서 다음과 같은 화면이 출력된다.

좀 더 자세히 설명하면 검정색 화면에 'hello\nFlutter'라는 빨간색 글자와 노란색 밑줄이 그어진 채로 출력되었다.

플러터는 기본 배경색이 검정색이고 위젯은 왼쪽에서 오른쪽으로, 위에서 아래로 그려진다.

 

다음은 텍스트를 가운데 정렬해보고자 한다.

Text() 함수에 두 번째 인자로 textAlign 속성을 추가하고 TextAlign.center 값을 추가하면 다음과 같이 화면에 표시된다.

 

텍스트를 화면 한 가운데에 놓으려면 Center() 함수 안에 Text() 함수를 넣어주면 된다.

위 사진을 보면 Center() 함수 속 child 옵션에 Text() 함수를 넣었다.

child 옵션은 자신 아래 어떤 위젯을 넣겠다는 의미로, 하나만 넣을 때는 child, 여러 위젯을 넣을 때는 children 옵션을 사용한다.

 

다음은 배경 색 변경과 글자 변경이다

배경 색을 바꾸기 위해서는 Container가 필요하다. Container는 플러터에서 가장 많이 사용하는 위젯 중 하나로 특정 공간을 책임지는 역할을 한다.

그 공간에서 배경색이나 정렬, 여백 등 다양한 역할을 담당하는 만능 위젯이라고 할 수 있다.

Container 에서도 child 또는 children을 넣을 수 있다.

텍스트를 바꾸기 위해서는 Text() 함수 안에 style 옵션을 추가해주면 된다.

style은 TextStyle() 함수로 입력받고 이 함수 안에 color 값과 fontSize, font 등을 바꿀 수 있다.