Let's Code Flutter: 3가지 유용한 위젯

매우 많은 위젯이 있으며 각 위젯은 많은 작업을 수행합니다. 많은 경우 위젯을 다른 위젯에 대한 다양한 업그레이드로 생각할 수 있습니다. 그리고 Flutter가 최적화된 것처럼 보이는데, 다른 위젯에 적용할 수 있는 위젯 수에는 제한이 없습니다. 최근에 작업을 완료하는 데 도움이 되는 세 가지 위젯이 있습니다.

제스처 감지기

개인적으로 이 이름은 약간 기만적이지만 순수한 Android 개발 배경에서 왔기 때문입니다. 하지만 이 편리한 작은 위젯은 대부분의 다른 위젯처럼 동작합니다. 자식에 동작을 추가합니다.

Android에서 누름에 반응하도록 하려면 onClickListener 를 지정합니다. 충분히 간단하며 모든 뷰가 이를 지원합니다. 마찬가지로 Flutter에서는 이러한 누름을 처리하려는 자식을 GestureDetector 위젯에 래핑합니다.

@override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => handleTap(),
      child: Container(),
    );
  }

백만 가지(인용 필요)의 다른 유형의 제스처도 처리할 수 있습니다.



다음은 모든 것GestureDetector이 제공하는 작은 스니펫입니다. 탭을 처리할 뿐만 아니라 슬라이더가 작동하는 방식과 유사하게 패닝을 처리하는 데 사용했습니다.

LayoutBuilder

때로는 부모의 크기에 따라 달라지는 자식 위젯이 필요합니다. build 중에는 일반적으로 사용할 수 없습니다. 그러나 자식을 LayoutBuilder 위젯에 래핑하여 필요한 것을 얻을 수 있습니다.

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Container(
                margin: EdgeInsets.all(5.0),
                child: LayoutBuilder(
                  builder: (context, BoxConstraints layout) {
                    return Container(
                      width: layout.maxWidth / 3,
                      height: layout.maxHeight / 3,
                      child: Container(),
                    );
                  },
                )
            )
        )
    );
  }

Scaffold 내부, SafeArea 내부, 여백이 있는 컨테이너 내부에서 우리는 남은 공간의 제약 조건에 따라 행동하기를 원합니다. 제약 조건에는 사용 가능한 최소 및 최대 너비와 높이가 포함됩니다.

ValueListenableBuilder

이것은 저에게 새로운 위젯이며, 여전히 최상의/최적 사용 사례를 파악하려고 노력하고 있습니다. In my original post about switching to Flutter , 사용하는 대부분의 위젯을 구성하는 "빵과 버터"가 될 것으로 생각되는 몇 가지 위젯을 나열합니다. 그 목록에서 내가 언급한 StreamBuilder 는 스트림을 가져오고 스트림이 항목을 내보낼 때마다 빌더를 호출하는 위젯입니다.

A ValueListenableBuilder 는 a ValueNotifier 를 수신한 다음 값이 변경될 때마다 빌더에 해당 값을 내보낸다는 점을 제외하면 거의 동일한 방식으로 수행됩니다.

ValueNotifier<bool> _showEmptyView = ValueNotifier(false);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          ValueListenableBuilder<bool>(
            valueListenable: _showEmptyView,
            builder: (context, _showEmptyView, child) {
              if (_showEmptyView) {
                return Container(
                    color: Colors.red,
                    child: ...
                );
              } else {
                return Container(
                    color: Colors.blue,
                    child: ...
                );
              }
            },
          ),
          ElevatedButton(
            onPressed: () {
              _showEmptyView.value = !_showEmptyView.value;
            },
            child: Text("Press me"),
          )
        ],
      ),
    );
  }

레이아웃 및 최적화 요구 사항에 따라 이 위젯을 무시하고 setState 를 호출하여 표시/숨기기 부울을 업데이트할 수 있습니다. 또는 실제로 ValueListenableBuilder가 무엇인지 상태를 처리하는 사용자 지정 StatefulWidget을 만들 수 있습니다.

이 위젯에 대한 통찰력이 있다면 공유해 주세요!


이 놀라운 위젯에 대한 자세한 내용은 Flutter 공식 문서로 이동하세요.

GestureDetector

LayoutBuilder

ValueListenableBuilder ValueNotifier와 함께

최근에 사용하고 있는 위젯은 무엇입니까? 의견을 통해 알려주고 함께 플레이할 수 있는 새로운 것을 찾도록 도와주세요!