[Flutter] Widget정리 #1 Text, 제스처, 디자인

자식이 하나만 있는 위젯과 여러개가 있는 위젯으로 나눠진다.

자식을 하나만 가지는 위젯	자식을 여러개 가지는 위젯
Container   - 자식을 담는 컨테이너, 배경색, 너비,높이 테두리 등의 디자인 지정가능 GestureDetector    - 플러터에서 제공하는 제스처 기능을 자식 위젯에서 인식하는 위젯, 탭, 드래그, 더블클릭 인식 가능 SizedBox   -높이와 너비를 지정하는 위젯, Container 위젯과 다르게 디자인적 요소는 적용할 수 없고 const생성자로 선언해서 퍼포먼스 좋음	Column   - children 매개변수에 입력된 모든 위젯들을 세로로 배치 Row    - children 매개변수에 입력된 모든 위젯들을 가로로 배치 ListView    - 리스트를 구현할 때 사용, 입력된 위젯이 화면을 벗어나게 되면 스크롤

 

Text관련 위젯

Text

한가지 스타일의 텍스트

Text(
    '문자열' ,
    style : TextStyle(
        fontSize : 16.0,
        fontWeight : FontWeigth.w700,
        color : Colors.blue,
    ),
)

RichText

여러가지 스타일의 텍스트

RichText(
    text : TextSpan( 
        text: 'Hello', 
        style : DefaultTextStyle.of(context).style,
        children : const <TextSpan>[
             TextSpan(text : 'bold', style : TextStyle(foncWeight : FontWeight.bold)),
             TextSpan(text : 'world!'),
         ],
    ),
)

 

제스처 관련 위젯

Button

textButton - 텍스트만 있는 버튼

TextButton(
    style: TextButton.styleFrom(
        shape: StarBorder(),
        primary: Colors.blueGrey,
        onSurface: Colors.blueGrey),
    onPressed: () {
        print('Pressed TextButton!');
    },
    child: Text('TextButton')),

TextButton(
    style: ButtonStyle(
       backgroundColor:
           MaterialStateProperty.all(Colors.cyanAccent)),
   onPressed: () {
       print('Pressed TextButton!');
   },
   child: Text('TextButton')
)

OutlinedButton - 테두리가 있는 버튼

OutlinedButton(
    style: OutlinedButton.styleFrom(
        primary: Colors.brown,
        side: BorderSide(color: Colors.blueAccent)),
    onPressed: () {
        print('Pressed OutlinedButton!');
    },
    child: Text('OutlineButton')
)

ElevatedButton - 입체적인 버튼

ElevatedButton(
    style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.orange),
        foregroundColor: MaterialStateProperty.all(Colors.white)),
    onPressed: () {
        print('Pressed ElevatedButton!');
    },
    child: Text('A ElevatedButton')),
ElevatedButton(
    style: ElevatedButton.styleFrom(
        primary: Colors.lightGreen, onPrimary: Colors.white),
    onPressed: () {
        print('Pressed ElevatedButton2!');
    },
    child: Text('A ElevatedButton2')
)

 

 

IconButton

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

IconButton(
    onPressed : () {},
    icon = Icon(
        // 플러터에서 기본으로 제공되는 아이콘은 https://font.google.com/icons 참조
        Icons.home,
    ),
)

 

GestureDetector

제스처를 감지하는 위젯

GettureDetector(
    onTap: () { print('onTap'); },
    onDoubleTap: () { print('on double tap'); },
    onLongPress: () { print('on double tap'); },
    //제스처를 적용할 위젯
    child: Container(
    decoration :BoxDecoration(
        color: Colors.red,
    ),
    width : 100.f,
    heigt : 100.f,
    ),
)

onTap : 한번 탭햇을 때 실행되는 함수
onDoubleTap : 두번 연속으로 탭했을때 
onLongPress : 길게 누르기가 인식됐을 때
onPanStart : 수평 또는 수직으로 드래그가 시작됐을 때
onPanUpdate : 수평 또는 수직으로 드래그를 하는 동안 드래그 위치가 업데이트 될 때마다 수행
onPanEnd : 수평 또는 수직으로 드래그가 끝났을 때
onHorizontalDragStart / onHorizontalDragUpdatre / onHorizontalDragEnd 
onVerticalDragStart / onVerticalDragUpdatre / onVerticalDragEnd 
onScaleStart / onScaleUpdate / onScaleEnd

 

FloatingActionButton

최상위 버튼..

 

디자인 관련 위젯

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

 

Container

다른 위젯을 담는데 사용

 

 

SizedBox

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

 

Padding

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

const Card(
    child : Padding(
        padding : EdgeInsets.all(16.0),
        child : Text ('Hello World!'),
    ),
)

*EdgeInsets 관련
EdgeInsets.all(16.0) - 상하좌우로 매개변수에 입력된 패딩 적용
EdgeInsets.symmetric(horizontal:16.0, vertical:16.0) - 가로와 세로 패딩을 따로 적용
EdgeInsets.only(top:16.0, bottom:16.0, left:16.0, right :16.0) - 위, 아래, 좌, 우 패딩을 각각 적용 
EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0) - 위, 아래, 좌, 우 패딩을 각각 적용  (좌,위,우,아래)

 

safeArea

아이폰 노치 등 안전한 화면에서만 그리기 위한 위젯