[플러터] 11. 위젯 종류

1. 텍스트 관련 위젯

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

Text(
	'텍스트 내용',
    style: TextStyle(
    	fontSize: 16.0,
        fontWeight: FontWeight.w700,
        color: Colors.blue,
    ),
)

 

2. 제스처 관련 위젯

 - 키보드로 글자를 입력하는 행위 외의 모든 입력을 제스처라고 한다.

 - 탭, 더블 탭, 길게 누르기, 드래그 등 모두가 제스처

 - 제스처 관련 위젯은 하위 위젯에 제스처가 입력됐을 때 인지하고 콜백 함수를 실행한다.

 

2-1. Button 위젯

▶ 텍스트만 있는 버튼

TextButton(
	onPressed: (){},
    style: TextButton.styleFrom(
    	foregroundColor: Colors.red,
    ),
    chlid: Text('텍스트 버튼'),
)

 

▶ 테두리가 있는 버튼

OutlinedButton(
	onPressed: (){},
    style: OutlinedButton.styleFrom(
    	foregroundColor: Colors.red,
    ),
    child: Text('테두리가 있는 버튼'),
)

 

▶ 입체적으로 튀어나온 느낌의 배경이 들어간 버튼

ElevatedButton(
	onPressed: (){},
    style: ElevatedButton.styleFrom(
    	backgroundColor: Colors.red,
    ),
    child: Text('입체적인 버튼'),
)

 

2-2. IconButton 위젯

 - 아이콘을 버튼으로 생성하는 위젯

 - onPressed 변수에 아이콘을 누르면 실행 할 콜백 함수 제공

IconButton(
	onPressed: (){},
    icon: Icon(
    	Icons.home,
    ),
)

 

2-3. GestureDetector 위젯

 - 앱은 모든 입력을 손가락으로 한다.

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

GestureDetector(
	onTap: (){
    	print('한 번 탭하기.');
    },
    onDoubleTap: () {
    	print('더블 탭하기.');
    },
    onLongPress: () {
    	print('길게 탭하기.');
    },
    onPanStart() {
    	print('수평 또는 수직으로 드래그가 시작됨.');
    },
    onPanUpdate() {
    	print('수평 또는 수직으로 드래그하는 동안 위치가 업데이트 될때마다 실행.');
    },
    onPanEnd() {
    	print('수평 또는 수직으로 드래그가 끝났을 때.');
    },
    onHorizontalDragStart() {
    	print('수평으로 드래그가 시작됨.');
    },
    onHorizontalDragUpdate() {
    	print('수평으로 드래그하는 동안 위치가 업데이트 될때마다 실행.');
    },
    onHorizontalDragEnd() {
    	print('수평으로 드래그가 끝났을 때.');
    },
    onVerticalDragStart() {
    	print('수직으로 드래그가 시작됨.');
    },
    onVerticalDragUpdate() {
    	print('수직으로 드래그하는 동안 위치가 업데이트 될때마다 실행.');
    },
    onVerticalDragEnd() {
    	print('수직으로 드래그가 끝났을 때.');
    },
    onScaleStart() {
    	print('확대가 시작됨.');
    },
    onScaleUpdate() {
    	print('확대가 진행되는 동안 위치가 업데이트 될때마다 실행.');
    },
    onScaleEnd() {
    	print('확대가 끝났을 때.');
    },
    child: Container(
    	decoration: BoxDecoration(
        	Color: Colors.red,
        ),
        width: 100.0,
        height: 100.0,
    ),
)

 

2-4. FloatingActionButton 위젯

 - 화면의 오른쪽 아래에 동그란 플로팅 작업 버튼 구현.

import 'package:flutter/material.dart'

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

class FloatingActionButtonExample extends StatelessWidget {
	@override
    Widget build(BuildContext context) {
    	return MateralApp(
        	home: Scaffold(
            	floatingActionButton: FloatingActionButton(
                	onPressed: (){},
                    child: Text('클릭'),
                ),
                body: Container(),
            ),
        );
    }
}

 

3. 디자인 관련 위젯

 - 배경을 추가하거나 간격을 추가하거나 패딩을 추가하는 등 디자인적인 요소를 적용

 

3-1. Container 위젯

 - 말 그대로 다른 위젯을 담는데 사용.

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

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

 

3-2. SizedBox 위젯

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

 - Container 위젯을 사용해도 공백을 만들 수 있지만 SizedBox 는 const 생성자를 사용했을 때 성능상의 이점을 얻을 수 있음.

SizedBox(
	height: 200.0,
    width: 200.0,
    
    // 크기를 확인하는 예제로 Container 추가.
    child: Container(
    	color: Colors.red,
    ),
)

 

3-3. Padding 위젯

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

 - Padding 위젯의 상위 위젯과 하위 위젯 사이의 여백을 둘 수 있음.

Container(
	color: Colors.blue,
    child: Padding(
    	padding: EdgeInsets.all(
        	16.0,
        ),
        child: Container(
        	color: Colors.red,
            width: 50.0,
            height: 50.0,
        ),
    ),
)

 

Margin 과 Padding 같이 사용하는 예제

// 최상위 Container : margin 이 적용되는 대상)
Container(
	color: Colors.black,
    child: Container(
    	color: Colors.blue,
        
        // margin 적용 위치
        margin: EdgeInsets.all(16.0),
        
        // padding 적용
        child: Padding(
        	padding: EdgeInsets.all(16.0),
            
            // padding 이 적용된 Container
            child: Container(
            	color: Colors.red,
                width: 50,
                height: 50,
            ),
        ),
    ),
)

 

3-4. SafeArea 위젯

 - 기기별로 예외 처리를 하지 않고도 안전한 화면에서만 위젯을 그릴 수 있음.

SafeArea(
	// true 이면 적용 : 안전한 영역만 사용(노치 영역을 사용하지 않음)
    // false 이면 미적용: 안전하지 않은 영역까지 사용(노치 영역을 고려하지 않고 사용)
	top: true,
    bottom: true,
    left: true,
    right: true,
    child: Container(
    	color: Colors.red,
        height: 300.0,
        width: 300.0,
    ),
)

 

 

4. 배치 관련 위젯

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

 

4-1. Row 위젯

 - 가로로 위젯을 배치

 - 여러개의 child 위젯을 입력 받을 수 있는 children 매개변수 사용.

import 'package:flutter/material.dart';

class RowWidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SizedBox(
          height: double.infinity,
          child: Row(
            // 주축 정렬 지정
            mainAxisAlignment: MainAxisAlignment.start,
            // 반대축 정렬 지정
            crossAxisAlignment: CrossAxisAlignment.center,
            // 넣고 싶은 위젯 입력
            children: [
              Container(
                height: 50.0,
                width: 50.0,
                color: Colors.red,
              ),
              // SizedBox는 일반적으로 공백을
              // 생성할 때 사용
              const SizedBox(width: 12.0),
              Container(
                height: 50.0,
                width: 50.0,
                color: Colors.green,
              ),
              const SizedBox(width: 12.0),
              Container(
                height: 50.0,
                width: 50.0,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

4-2. Column 위젯

 - 세로로 위젯을 배치

import 'package:flutter/material.dart';

class ColumnWidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SizedBox(
          width: double.infinity,
          child: Column(
            // 주축 정렬 지정
            mainAxisAlignment: MainAxisAlignment.start,
            // 반대축 정렬 지정
            crossAxisAlignment: CrossAxisAlignment.start,
            // 넣고 싶은 위젯 입력
            children: [
              Container(
                height: 50.0,
                width: 50.0,
                color: Colors.red,
              ),
              // SizedBox는 일반적으로 공백을 생성할 때 사용
              const SizedBox(width: 12.0),
              Container(
                height: 50.0,
                width: 50.0,
                color: Colors.green,
              ),
              const SizedBox(width: 12.0),
              Container(
                height: 50.0,
                width: 50.0,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

4-3. Flexible 위젯

 - Row 나 Column 에서 사용하는 위젯.

 - Flexible 에서 제공된 child 크기를 최소한으로 차지하게 함.

import 'package:flutter/material.dart';

class FlexibleWidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            children: [
              Flexible(
                // flex는 남은 공간을 차지할 비율을 의미합니다.
                // flex값을 값을 제공하지 않으면 기본값은 1입니다.
                flex: 1,

                // 파란색 Container
                child: Container(
                  color: Colors.blue,
                ),
              ),
              Flexible(
                flex: 1,

                // 빨간색 Container
                child: Container(
                  color: Colors.red,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

4-4. Expanded 위젯

 - Flexible 위젯을 상속하는 위젯.

 - Expanded 를 사용하면 위젯이 남아있는 공간을 최대한으로 차지.

import 'package:flutter/material.dart';

class ExpandedWidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            children: [
              Expanded(
                child: Container(
                  color: Colors.blue,
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.red,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

4-5. Stack 위젯

 - 위젯을 겹치는 기능

 - 플러터의 그래픽 엔진인 스키아 엔진은 2D 엔진이기 때문에 겹친 두께를 표현하지는 못하지만 Stack 위젯을 사용하면 위젯 위에 위젯을 올린 듯한 효과를 줄 수 있음.

import 'package:flutter/material.dart';

class StackWidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Stack(
            children: [
              Container(
                height: 300.0,
                width: 300.0,
                color: Colors.red,
              ),
              Container(
                height: 250.0,
                width: 250.0,
                color: Colors.yellow,
              ),
              Container(
                height: 200.0,
                width: 200.0,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}