[코드팩토리의 플러터 프로그래밍] 6장. 기본 위젯 알아보기 - 위젯, child 대표위젯, children 대표 위젯 개념 위주

위젯 

- 현재 주어진 상태를 기반으로 어떤 UI를 구현할지 정의 

- 상태가 변경되면 변경 사항에 알맞게 변경된 UI를 화면에 다시 그려줌. 

- 결과적으로 플러터는 최소한의 리소스를 이용해 120FPS 까지 퍼포먼스 발생 

 

자식 하나만을 가지는 (child) 대표적인 위젯

- Container 위젯 : 자식을 담는 컨테이너 역할을 함.

ㄴ 다만, 단순하게 자식을 담는 역할을 하는게 아니라 배경색, 너비와 높이, 테두리 등의 디자인 지정 

- GestureDetector 위젯 : 제스처 기능을 자식 위젯에서 인식하는 위젯 

ㄴ 탭이나 드래그, 더블 클릭 같은 제스처 기능이 인식됐을 때 함수 실행 가능

- SizedBox 위젯 : 높이와 너비 지정하는 위젯

ㄴ Container 위젯과 다르게 디자인적 요소는 적용할 수 없고 const 생성자로 선언할 수 있어서 퍼포먼스 측에서 더 효율적 

 

 

다수의 자식을 입력할 수 있는 (childeren) 대표적인 위젯 

- Column 위젯 : children 매개변수에 입력된 모든 위젯들을 세로로 배치

- Row 위젯 : children 매개변수에 입력된 모든 위젯들을 가로로 배치 

- ListView 위젯 : 리스트를 구현할 때 사용 

ㄴ 입력된 위젯이 화면을 벗어나게 되면 스크롤이 가능해짐 

 

 

위젯 계층 예시  

column으로 크게 파란/회색 영역을 나누고 회색 영역 안에서 coulmn 3개로 나누는 구조

 

 

 

 

chatgpt에게 물어본 결과, 이렇게 작성된다고 한다. 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            // 상단 큰 사각형 (화면 부분)
            Expanded(
              child: Container(
                color: Colors.blueGrey[50], // 배경색 설정
              ),
            ),
            // 하단 버튼들
            Container(
              color: Colors.grey[300], // 버튼 영역의 배경색
              padding: EdgeInsets.symmetric(vertical: 8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  // "앞으로" 버튼
                  Column(
                    children: [
                      Icon(Icons.arrow_left, size: 40.0),
                      Text("앞으로"),
                    ],
                  ),
                  // "뒤로" 버튼
                  Column(
                    children: [
                      Icon(Icons.arrow_right, size: 40.0),
                      Text("뒤로"),
                    ],
                  ),
                  // "홈" 버튼
                  Column(
                    children: [
                      Icon(Icons.home, size: 40.0),
                      Text("홈"),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

실행화면

 

 

Row와 Column 위젯이 헷갈려서, 반대로 해봤더니 아이콘 모양이 바뀐다. 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            // 상단 큰 사각형 (화면 부분)
            Expanded(
              child: Container(
                color: Colors.blueGrey[50], // 배경색 설정
              ),
            ),
            // 하단 버튼들
            Container(
              color: Colors.grey[300], // 버튼 영역의 배경색
              padding: EdgeInsets.symmetric(vertical: 8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  // "앞으로" 버튼
                  Row(
                    children: [
                      Icon(Icons.arrow_left, size: 40.0),
                      Text("앞으로"),
                    ],
                  ),
                  // "뒤로" 버튼
                  Row(
                    children: [
                      Icon(Icons.arrow_right, size: 40.0),
                      Text("뒤로"),
                    ],
                  ),
                  // "홈" 버튼
                  Row(
                    children: [
                      Icon(Icons.home, size: 40.0),
                      Text("홈"),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

실행화면

 

 

참고로 공식문서에서는 다음과 같이 설명한다. 

 

Layout | Flutter

Layouts in Flutter

row와 column 구분