[Flutter] 위젯

'Everything is Widget'

 

위젯

플러터는 화면에 그려지는 모든 요소가 위젯으로 구성.

위젯은 주어진 상태(데이터)를 기반으로 어떤 UI를 구현할지를 정의.

 

자식을 하나만 갖는 위젯

Container - 자식을 담는 컨테이너 역할, 배경색, 너비와 높이, 테두리 등 디자인을 지정할 수 있음

GestureDector - 제스처 기능을 자식 위젯에서 인식

SizedBox - 높이와 너비를 지정, 디자인적 요소 적용할 수 없음

 

자식을 여러 개 갖는 위젯

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

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

ListView - 리스트 구현 시 사용

 

텍스트 관련 위젯

Text

void main() {
  // runApp(const MyApp());
  runApp(
    CustomTextApp()
  );
}

class CustomTextApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            "Hello, Flutter",
            style: TextStyle(
              fontSize: 16.0,
              fontWeight: FontWeight.w700,
              color: Colors.green
            ),
          ),
        ),
      ),
    );
  }
}

 

제스처 관련 위젯

Button

- TextButton, OutlinedButton, ElevatedButton

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

class CustomGestureApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: [
              TextButton(
                  onPressed: (){},
                  style: TextButton.styleFrom(
                      foregroundColor: Colors.blueGrey
                  ),
                  child: Text("Text Button")
              ),
              OutlinedButton(
                  onPressed: (){},
                  style: OutlinedButton.styleFrom(
                    foregroundColor: Colors.orange
                  ),
                  child: Text("Outlined Button")
              ),
              ElevatedButton(
                  onPressed: (){},
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.lime
                  ),
                  child: Text("Elevated Button"))
            ],
          ),
        )
      ),
    );
  }

}

 

IconButton

 

GestureDetector

onTap	한 번 탭했을 때 실행되는 함수 입력
onDoubleTap	두 번 연속으로 탭했을 때 실행되는 함수 입력
onLongPress	길게 누르기가 인식되었을 때 실행되는 함수 입력
onPanStart	수평 또는 수직으로 드래그가 시작되었을 때 실행되는 함수 입력
onPanUpdate	수평 또는 수직으로 드래그를 하는 동안 드래그 위치가 업데이트될 때마다 실행하는 함수 입력
onPanEnd	수평 또는 수직으로 드래그가 끝났을 때 실행되는 함수 입력
onHorizontalDragStart	수평으로 드래그를 시작했을 때 실행되는 함수 입력
onHorizontalDragUpdate	수평으로 드래그를 하는 동안 드래그 위치가 업데이트될 때마다 실행되는 함수 입력

 

FloatingActionButton

 

디자인 관련 위젯

Container - 다른 위젯을 담는데 사용. 너비와 높이 지정, 배경이나 테두리 추가할 때 주로 사용

SizedBox - 일반적으로 일정 크기의 공간을 공백으로 두고 싶을 때 사용 (Container보다 성능상 이점이 있다)

Padding - child 위젯에 여백을 제공할 때 사용. 매개변수는 EdgeInsets 값을 입력

SafeArea

void main() {
  // runApp(const MyApp());
  runApp(
    CustomFloatingActionButton()
  );
}

class CustomFloatingActionButton extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: (){},
            child: Text("클릭"),
        ),
        body: Center(
          child: Center(
            child: Container(
              decoration: BoxDecoration(
                color: Colors.blue,
                border: Border.all(
                    width: 8.0,
                    color: Colors.black
                ),
                borderRadius: BorderRadius.circular(
                  8.0,
                ),
              ),
              height: 200.0,
              width: 200.0,
              child: Padding(
                padding: EdgeInsets.all(32.0),
                child: SizedBox(
                  height: 100,
                  width: 100,
                  child: Container(
                    color: Colors.lime,
                  ),
                )
              ),
            ),
          ),
        )
      )
    );
  }

 

 

배치 관련 위젯

위젯을 가로, 세로로 배치하거나 위젯 위에 위젯을 겹칠 때 사용

 

Row - 가로로 위젯 배치할 때 사용

Column - 세로로 위젯 배치할 때 사용

Flexible - Row나 Column에서 하위 위젯이 비율만큼 공간을 차지할 수 있도록 해준다

Expanded - Row나 Column에서 하위 위젯이 최대한의 공간을 차지할 수 있도록 해준다

Stack - 하위 위젯들을 순서대로 겹치는 기능 제공

---

https://docs.flutter.dev/reference/widgets

Flutter widget index

https://docs.flutter.dev/ui/widgets

Widget catalog

해당글은 'Must Have 코드팩토리의 플러터 프로그래밍' 책 내용을 학습 후 정리한 내용입니다.