TIL) Flutter - 위젯 정리

oatraspberry·2023년 9월 17일

TIL flutter

1. child 매개변수를 입력받는 위젯

child - 위젯 하나만 추가할 수 있다.

자식을 하나만 갖는 대표적인 위젯들에 대해 알아보자.

🤍Container 위젯

자식을 담는 컨테이너 역할을 한다.
배경색, 너비, 높이, 테두리 등의 디자인을 지정할 수 있다.

🤍GestureDetector 위젯

플러터에서 제공하는 제스처 기능을 자식 위젯에서 인식하는 위젯이다.
탭, 드래그, 더블클릭 같은 제스처 기능이 자식 위젯에 인식될 때 함수를 실행할 수 있다.

🤍SizedBox 위젯

높이, 너비를 지정하는 위젯이다.
디자인적 요소는 지정 불가하지만 const 생성자로 선언이 가능하다.

2. children 매개변수를 입력받는 위젯

children: 위젯 여러개를 추가할 수 있다.

다수의 자식을 입력할 수 있는 위젯들에 대해 알아보자.

🤍Column 위젯

Column(): children 매개변수에 입력된 모든 위젯들을 세로로 배치한다.
EdgeInsets.fromLTRB: 원하는 숫자로 패딩값 지정
mainAxisAlignment: 앱스크린 내에서 위젯을 세로로 정렬하는 기능

Column 위젯과 Center 위젯이 만나면 Center 위젯은 Column 위젯의 자식들에 대한 세로축 위치에 대해 관여하지 않고, 현재 Column 위젯에 자식 위젯 세로축 높이에 자동으로 고정이 된다.

Column 위젯을 가로축 정중앙에 위치시키려면 Center 위젯 사용
세로축 정중앙에 위치시키려면 Column 위젯 내에서 mainAxisAlignment를 사용하면 된다.

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text("PhotoDays"),
        centerTitle: true,
      ),
      body: const Center(
        child: Column(
          // mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Hello'),
            Text('Hello'),
            Text('Hello'),
          ],
        ),
      ),
    );
  }
}