J.BF Story

[Flutter] Widget 생성 시 함수 호출 본문

FrontEnd/Flutter

[Flutter] Widget 생성 시 함수 호출

J.BF 2022. 6. 15. 23:45

StatuefulWidget

  • initState()함수를 override하여 사용한다.
  • initState()함수 사용 시  super.initState() 를 반드시 호출해야 한다.
class TestStatefulWidget extends StatefulWidget {
  const TestStatefulWidget({Key? key}) : super(key: key);

  @override
  _TestStatefulWidgetState createState() => _TestStatefulWidgetState();
}

class _TestStatefulWidgetState extends State<TestStatefulWidget> {
  @override
  void initState() {
    testFunc();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }

  void testFunc() {
    print("Hello World!!");
  }
}

 

 

StatelessWidget

  • StatelessWidget은 원래 상태(state)가 없기 때문에 initState()와 같은 상태 관련 함수도 존재하지 않는다.
  • 그래서 StatefulWrapper이라는 StatefulWidget을 만들어 StatelessWidget에서 전달 받은 함수와 위젯을 생성 시 호출하고 보여줄 수 있도록 연결시켜준다.
// StatefulWrapper
class StatefulWrapper extends StatefulWidget {
  final Function onInit;
  final Widget child;

  const StatefulWrapper({required this.onInit, required this.child});

  @override
  _StatefulWrapperState createState() => _StatefulWrapperState();
}

class _StatefulWrapperState extends State<StatefulWrapper> {
  @override
  void initState() {
    if (widget.onInit != null) {
      widget.onInit();
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}




// TestStatelessWidget
class TestStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StatefulWrapper(
        onInit: () {
          testFunc();
        },
        child: Container(),
    );
  }
  void testFunc() {
    print("Hello World!!")
  }
}

 

 

회고

  • Provider 패턴을 사용하게되면서 Widget에서 직접적으로 상태를 관리하지 않아 StatelessWidget으로 통일해서 사용하고있었다.
    그런데 위젯이 생성될 때 호출해줘야하는 함수가 생겨서 위와 같은 방법을 찾아서 적용하게 되었다.
  • 그냥 상태관리를 위해 StateWidget으로 변경해서 써도 되었을 것같은데.. 우선은 통일성을 위해 StatelessWidget을 사용하였다.
    추후에 리펙토링하면서 더 좋은 방법이 있다면 변경할 예정이다.
Comments