[Flutter] 기본 위젯2 정리

오준석님의 생존코딩을 보고 위젯 내용을 정리합니다.

---

입력

TextField

- edittext같은 입력용 위젯, 글자를 받음

: decoration

InputDecoration

- TextField를 꾸며주는 위젯

: border(OutlineInputBorder), labelText,

 

CheckBox

- 체크박스

 

Switch

- 스위치 on/off

 

Radio

- 그룹 내에서 하나만 선택

: value, groupValue(이 값이 동일한 라디오 위젯끼리 소통), onChanged

 

RaidoListTile

- Radio는 해당 위젯만 클릭해야 반응하지만, Tile은 라디오 버튼의 수평 방향의 화면을 터치해도 반응

- widte:match_parent같은 -

 

DropDownButton

- 스피너, 목록을 나열하여 선택

: value(표시할 값 지정), items(인스턴스 리스트)

: 상태를 가지고 있으니 StatefulWidget으로 만든다..........................

 

DropDownMenuItem

- DropDownButton items에 사용되는 위젯

: value, child

 

---

팝업, 다이얼로그, 모달

AlertDialog

- showDialog함수를 사용하며, builder파라메터에서 생성해준다.

showDialog(context: context, builder: builder)

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text('다이얼로그 제목'),
    content: SingleChildScrollView(
      child: ListBody(
        children: <Widget>[
          Text('AlertDialog'),
          Text('press OK'),
        ],
      ),
    ),
    actions: [
      ElevatedButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        child: Text('OK'),
      ),

      ElevatedButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        child: Text('Cancel'),
      ),
    ],
  ),
);

 

 

DatePicker

- 날짜 선택

- showDatePicker()함수로 호출

showDatePicker(
  context: context,
  firstDate: firstDate,
  lastDate: lastDate,
);

Future<DateTime?> selectedDate = showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2021),
  lastDate: DateTime(2024),
);

 

 

TimePicker

- 시간 선택

- showTimePicker함수로 호출

Future<TimeOfDay?> selectedTime = showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
);

 

---

이벤트

GestureDetector

- 위젯에 이벤트를 발생 시킴

 

InkWell

- ripple효과를 내어 이벤트 발생

 

---

애니메이션

Hero

- 자연스럽게 다음 화면 넘어갈 때 애니메이션을 줌

- Hero위젯으로 감싸고, tag를 동일하게 해주면 동작함

 

AnimationContainer

- Hero는 넘어갈 때 애니메이션을 주지만, AnimationContainer는 현재 화면에서 애니메이션을 주는 경우 사용

: duration(Duration(seconds:)), width, height, child, curve(Curves.fastOutSlowIn: 애니메이션 효과)

 

SliverAppBar, SliverFillRemaining

- 헤더가 스크롤에 의해 작아졌다 커졌다 함, 앱 바의 애니메이션 효과랄까

child: CustomScrollView(
  slivers: [
    SliverAppBar(
      pinned: true,   // 축소시 앱바가 고정되는지
      expandedHeight: 180.0,
      flexibleSpace: FlexibleSpaceBar(  // 늘어나는 영역 UI
        title: Text('Sliver'),
      ),
    ),

    SliverFillRemaining(
      child: Center(
        child: Text('center'),
      ),
    )
  ],
),

 

리스트로 표현할 경우

child: CustomScrollView(
  slivers: [
    SliverAppBar(
      pinned: true,   // 축소시 앱바가 고정되는지
      expandedHeight: 180.0,
      flexibleSpace: FlexibleSpaceBar(  // 늘어나는 영역 UI
        title: Text('Sliver'),
      ),
    ),
    SliverList(delegate: SliverChildListDelegate(_items)),
  ],
),