Flutter 위젯

화면에 그려지는 모든 요소가 위젯

플러터 프레임워크는 수십가지 기본 위젯을 제공하고 앱 개발자가 직접 만들어서 쓸 수도 있음

 

5.1 위젯 소개

플러터에서 화면에 보여지는 UI와 관련된 모든 요스는 위젯으로 구성

위젯은 현재 주어진 상태를 기반으로 어떤 UI를 구현할지 정의한다.

 

위젯의 상태가 변경되면 변경 사항에 알맞게 변경된 UI를 화면에 다시 그려준다.

플러터 프레임워크는 기존 상태의 위젯과 새로운 상태의 위젯을 비교해서 UI 변화를 반영할 때 필요한 최소한의 변경 사항을 산출해서 화면에 그린다.

 

자식을 하나만 갖는 위젯

• 대체로 child 매개변수를 입력 받음
• Container 위젯
  • 자식을 담는 컨테이너 역할
  • 배경색, 너비와 높이, 테두리 등의 디자인을 지정할 수 있음
• GestureDetector 위젯
  • 플러터에서 제공하는 제스처 기능을 자식 위젯에서 인식하는 위젯
  • 탭이나 드래그, 더블 클릭 같은 제스처 기능이 자식 위젯에서 인식 됐을 때 함수 실행 가능
• SizedBox 위젯
  • 높이와 너비를 지정하는 위젯
  • Container와 다른 점은 디자인적 요소는 적용 할 수 없고
  • const 생성자로 선언할 수 잇어서 퍼포먼스 측면에서는 더 효율적

자식을 여럿 갖는 위젯 

• children 매개변수를 입력 받음, 리스트로 여러 위젯을 입력할 수 있음
• Column 위젯
  
  • children 매개변수에 입력된 모든 위젯들을 세로로 배치
• Row 위젯
  • children 매개변수에 입력된 모든 위젯들을 가로로 배치
• ListView 위젯 
  • 리스트를 구현할 때 사용
  • children 매개변수에 다수의 위젯을 입력할 수 있으며 입력된 위젯이 화면을 벗어나게 되면 스크롤 가능

child와 children 매개변수에 지속적으로 하위 위젯을 입력하면 크리스마스 트리처럼 위젯 계층이 정리됨

UI를 위젯 트리로 그릴 수 있어야 플러터 앱 프로그래밍을 할 수 있다.

 

5.1.1 Children과 Child의 차이점

플러터는 위젯 아래에 위젯이 계속 입력되는 형태로 위젯 트리를 구성해 UI를 제작함

child 매개변수와 children 매개변수는 위젯에 하위 위젯을 추가할 때 사용함

 

Center 위젯은 child 매개변수에 입력된 위젯을 가운데 정렬해줌

children 매개변수는 여러 위젯을 리스트에 입력 할 수 있음, 입력한 순서대로 화면에 그려짐

 

 

5.3 텍스트 관련 위젯

화면에 글자를 보여주려면 글자를 렌더링 할 수 있는 위젯을 사용해야함

Text 위젯은 글자를 적고 스타일링하는 위젯, 첫번째 포지셔널 파라미터에 원하는 문자열을 작성하고 style이라는 네임드 파라미터를 사용해 스타일을 지정한다.

Text(
	'code factory',
	style : TextStyle(
		fontSize : 16.0, // 글자 사이즈
		fontWeight : FontWeight.w700, // 글자 굵기
		color : Colors.blue, // 글자 색상
	),
)

 

5.4 제스처 관련 위젯

사용자가 키보드로 글자를 입력하는 행위 외의 모든 입력을 플러터에서는 제스처라고 부른다.

화면을 한번 탭한다거나, 두번 탭 한다거나, 길게 누르는 행동 모두 제스처

GestureDetector 위젯은 모든 제스처를 매개변수로 제공해준다. 제스처 관련 위젯은 하위 위젯에 탭이나 드래그처럼 특정 제스처가 입력됐을 때 인지하고 콜백함수를 실행한다.

 

5.4.1 Button 위젯

플러터 머터리얼 패키지에서 기본 제공하는 버튼으로는 TextButton, OutlinedButton, ElevatedButton이 있다.

TextButton, OutlinedButton, ElevatedButton 모두 버튼을 누르면 색깔이 변경되는 리플(파동) 효과가 있다.

// TextButton
TextButton(
	onPressed : () {}, // 클릭시 실행할 함수
    style : TextButton.styleFrom( // 버튼 스타일
    	foregroundColor : Colors.red,
    ),
    child : Text('텍스트 버튼'), // 버튼에 들어갈 위젯b
),

// OutlinedButton
OutlinedButton(
	onPressed : () {}, // 클릭시 실행할 함수
    style : OutlinedButton.styleFrom( // 버튼 스타일
    	foregroundColor : Colors.red,
    ),
    child : Text('아웃라인드 버튼'), // 버튼에 들어갈 위젯
)

// ElevatedButton
ElevatedButton(
	onPressed: (){},
	style: ElevatedButton.styleFrom(
		backgroundColor: Colors.red,
	),
	child: Text('ElevatedButton'),
),

결과

5.4.2 IconButton 위젯

IconButton은 아이콘을 버튼으로 생성하는 위젯, icon 매개변수에 보여주고 싶은 아이콘을 넣을 수 있다.

onPress 매개변수에 IconButton을 누르면 실행할 콜백함수를 작성

아이콘은 글리프(glyph) 기반의 아이콘을 사용할 수 있고, Icons 클래스를 통해 플러터에서 제공하는 기본 아이콘들을 사용할 수 있다.

void main() {
  //runApp(const MyApp());
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: IconButton(
            onPressed : () {}, // 클릭시 실행할 함수
            icon: Icon(
              Icons.home // 플러터에서 기본제공하는 아이콘
            ),
            style : TextButton.styleFrom( // 버튼 스타일
              foregroundColor : Colors.red,
            ),
          ),
          ),
        ),
      ),
  );
}

https://fonts.google.com/icons

5.4.3 GestureDetector 위젯

손가락으로 하는 여러가지 입력을 인지하는 위젯

- onTap : 한번 탭했을 때 실행되는 함수

- onDoubleTap : 두번 연속으로 탭했을 떄 실행되는 함수

- onLongPress : 길게 누르기가 인식 됐을 때 실행되는 함수

- onPanStart : 수평 또는 수직으로 드래그가 끝났을 때 실행되는 함수

- onPanUpdate : 수평 또는 수직으로 드래그가 되는 동안 드래그 위치가 업데이트 될 때마다 실행되는 함수

- onPanEnd : 수평 또는 수직으로 드래그가 끝났을 때 실행되는 함수

- onHorizontalDragStart : 수평으로 드래그를 시작했을 때 실행되는 함수

- onHorizontalDragUpdate : 수평으로 드래그 하는 동안 드래그 위치가 업데이트 될 때마다 실행되는 함수

- onHorizontalDragEnd : 수평으로 드래그가 끝났을 때 실행되는 함수

- onVerticalDragStart : 수직으로 드래그를 시작했을 때 실행되는 함수

- onVerticalDragUpdate : 수직으로 드래그하는 동안 드래그 위치가 업데이트 될 때마다 실행되는 함수

- onVerticalDragEnd : 수직으로 드래그가 끝났을 때 실행되는 함수

- onScaleStart : 확대가 시작됐을 때 실행되는 함수

- onScaleUpdate : 확대가 진행되는 동안 확대가 업데이트 될 때 마다 실행되는 함수

- onScaleEnd : 확대가 끝났을 때 실행되는 함수

5.4.4 FloatingActionButton 위젯

FloatingActionButton과 Scaffold를 같이 사용하면 구현 가능

import 'package:flutter/material.dart'

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

class FloatingActionButtonExample extends StatelessWidget {
	@Override
    Widget build(BuildContext context){
    	return MaterialApp(
        	home : Scaffold(
            	floatingActionButton : FloatingActionButton(
                	onPressed : () {}, // 클릭했을 때 실행할 함수
                    child : Text('클릭'),
               	),
                body : Container(),
           	),
       	);
  	}
}

 

 

5.5 디자인 관련 위젯

5.5.1 Container 위젯

다른 위젯을 담는 용도

위젯의 너비와 높이를 지정하거나 배경이나 테두리를 추가할 때 사용

Container(
	decoration : BoxDecoration(
    	color : Colors.red,
        border : Border.all(
        	width : 16.0,
            color : Colors.black,
        ), // border
        borderRadius : BorderRadius.circular(
        	16.0,
        ), // borderRadius
    ), // decoration
    height : 200.0,
    width : 100.0,
) // Container

5.5.2 SizedBox 위젯

일정 크기의 공간을 공백으로 두고 싶을 때 사용

SizedBox(
	height : 200.0,
    width : 200.0,
    child : Container( // SizedBox는 색상이 없으므로 크기 확인용 Container 추가
    	color : Colors.red,
    ),
)

5.5.3  Padding 위젯

child 위젯에 여백을 제공할 때 사용

Padding 위젯의 padding 매개변수는 EdgeInsets라는 값을 입력해야 함

child 매개변수에 Padding을 적용하고 싶은 위젯을 입력할 수 있음

5.5.4  SafeArea

기기별로 다른 디자인, 특히 아이폰의 노치 디자인

노치에 위젯이 가려지는 것을 막기 위해 사용

SafeArea(
	top : true,
    bottom : true,
    left : true,
    right : true,
    child : Container(
    	color : Colors.red,
        height : 300.0,
        width : 300.0,
    ), // child
) // SafeArea

 

 

5.6 배치 관련 위젯

5.6.1 Row 위젯

5.6.2 Column 위젯

5.6.3 Flexible 위젯

5.6.4 Expanded 위젯

5.6.5 Stack 위젯

 

위젯 요약

1. Text : 글자를 화면에 그릴 때

2. 제스처 관련 위젯

- Button : TextButton, OutlinedButton, ElevatedButton

- IconButton

- GestureButton

- FloatingActionButton

3. 디자인 관련 위젯

- Container : 위젯에 배경, 패딩, 테두리 등 디자인 요소를 추가하는데 사용

- SizedBox : 너비와 높이를 지정할 수있는 위젯, 위젯간 간격을 구현할 때 많이 사용

- Padding : 하위 위젯에 패딩을 적용할 때 사용

- SafeArea : 시스템 UI에 가려지지 않게 위젯을 화면에 그릴 때 사용 

4. 배치 관련 위젯

- Row : 가로로 위젯 배치

- Column : 세로로 위젯 배치

- Flexible : Row나 Column에서 하위 위젯이 비율만큼 공간을 차지할 수 있게 해줌

- Expanded : Row나 Column에서 하위 위젯이 최대한 공간을 차지할 수 있게 해줌

- Stack : 하위 위젯들을 순서대로 겹쳐줌