일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- Algospot
- 동적계획법
- 문자열
- 이분탐색
- 너비우선탐색
- 알고리즘문제해결전략
- DFS
- 백트래킹
- 스택
- BFS
- backtracking
- 그리디
- 다이나믹프로그래밍
- 세그먼트트리
- union-find
- 완전탐색
- BOJ
- 알고스팟
- stack
- 유니온파인드
- 분할정복
- 누적합
- 백준
- 재귀
- Greedy
- priority_queue
- 종만북
- 분리집합
- acm
- DP
- Today
- Total
DAMPER's 낙서장
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 등을 바꿀 수 있다.
'Flutter' 카테고리의 다른 글
3-1. material design (1) | 2022.02.19 |
---|---|
2-3. 위젯의 생명주기 (1) | 2022.02.17 |
2-1. Flutter 프로젝트 기본 구조 (0) | 2022.02.12 |
1.4 Dart 스트림 통신하기 (0) | 2022.02.12 |
1.3 Dart으로 JSON 데이터 주고받기 (0) | 2022.02.11 |