Flutter: StatelessWidget 내부의 모든 위치에서 컨텍스트 사용

컨텍스트와 함께 getter를 사용하거나 메서드 간에 컨텍스트를 전달하지 않으려면 여기에 쉽게 만들 수 있는 멋진 솔루션이 있습니다.

갑시다...

빌더 패턴 개념을 사용할 것입니다. 이 패턴은 우리가 찾고 있는 인스턴스를 빌드하기 위해 다른 엔티티(플러터의 클래스)에 대한 책임을 부여합니다.

이 예제에서는 두 개의 멤버만 있는 간단한 버튼 위젯을 사용합니다.
마법은 build 만 반환하는 ButtonBuilder 메서드에 있습니다.

class Button extends StatelessWidget {
  const Button.text({
    Key? key,
    this.text = '',
    this.onPressed,
  }) : super(key: key);

  final String text;
  final VoidCallback? onPressed;

  @override
  Widget build(BuildContext context) {
    return ButtonBuilder(context, this).build();
  }
}

빌더 내부의 마법

이제 ButtonBuilder 에서 무슨 일이 일어나고 있는지 살펴봅시다.

이 클래스에서는 컨텍스트와 위젯을 구성원으로 볼 것입니다. 메소드나 getter가 많은 경우 이와 같은 빌더를 사용하면 모두 아래 예제와 같이 컨텍스트 및 위젯 소품에 액세스할 수 있습니다.

class ButtonBuilder {
  ButtonBuilder(this.context, this.widget);

  final BuildContext context;
  final Button widget;

  Widget get text {
    // Context can be used from any getter or method
    final primaryColor = Theme.of(context).primaryColor; 
    return const Text(widget.text, style: TextStyle(color: primaryColor));
  }

  Widget get icon {
    final secondaryColor = Theme.of(context).secondaryColor;
    return Icon(Icons.home, color: secondaryColor); 
  }

  Widget build() {
    return GestureDetector(
      // Widget can be accessed similar to StatefulWidget
      onTap: widget.onPressed,
      child: Column(
        children: [
          text,
          icon,
        ]
      ),
    );
  }
}

이 방법으로 위젯을 정의하면 앱 구조를 개선하려는 경우 또는 위젯이 크고 복잡한 경우 훨씬 더 많은 도움이 될 수 있습니다. 이를 통해 필요한 경우 위젯 정의와 위젯 빌드를 다른 클래스나 파일로 분리할 수 있습니다.

빌더를 같은 파일에 둘 경우, 이렇게 클래스 이름을 변경하여 private로 만들 수 있습니다_ButtonBuilder.

소스 코드: Gist


저는 Dart를 너무 좋아하고 Flutter와 함께 계속 배우고 있습니다. 최대한 활용하기 위해 노력하고 있으므로 질문이나 관련 주제가 있는 경우 아래에 댓글을 남겨주세요. 최선을 다해 도와드리겠습니다.

잊지 마세요, 연습이 완벽을 만듭니다. 읽어 주셔서 감사합니다.