provider

flutter의 상태관리를 위해 provider를 이용해보자.

 

 

StatefulWidget 을 사용해서 setState() 를 통해 상태관리를 한다면 위젯트리 내 다른 위젯이 동일한 값을 사용하기 위해 파라미터로 값을 넘겨 받으면서 사용한다. 여기서 setState() 를 사용하면 경로에 있는 모든 위젯들이 재빌드 된다.

 

provider 를 사용하면 해당 provider를 사용하고 있는 위젯만 재빌드 되면서 동일한 값을 다 가질 수 있게 된다.

 

 

 

provider 패키지를 설치한다.

provider | Flutter Package

 

 

텍스트 필드에 입력된 값을 바로 보여주는 기능을 위한 provider 클래스를 작성한다.

class TextProvider extends ChangeNotifier {
  String text = "";

  void onChangedText(String text) {
    this.text = text;
    log(this.text);
    notifyListeners();
  }
}

ChangeNotifier 를 사용하여 클래스를 생성하면 notifyListeners() 를 사용할 수 있다. notifyListeners() 를 통해 해당 provider를 사용하고 있는 위젯에 변화를 알려줄 수 있다.

 

 

여러개의 provider 를 사용하기 위해 최상단 위젯에 MultiProvider 를 이용해서 등록해준다.

class WritePage extends StatelessWidget {
  const WritePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Container(
            width: double.infinity,
            height: 100,
            child: Text(context.watch<TextProvider>().text),
          ),
          Container(
            decoration: BoxDecoration(
              border: Border.all(width: 1)
            ),
            child: TextField(
              onChanged: (value) {
                context.read<TextProvider>().onChangedText(value);
              },
            )
          ),
        ],
      ),

    );
  }
}

provider의 기능 및 값을 사용하기 위해서는 read, watch, select 기능을 사용한다.

 

read: 상태값만 읽는다. 함수를 호출할 때 많이 사용한다.

watch: 상태값의 변화를 감지하고 나타내준다.

select: 상태값의 특정 부분만 감지하고 나타내준다.

 

 

 

텍스트를 입력받는 페이지를 만들고 provider의 함수과 값을 사용한다.

class WritePage extends StatelessWidget {
  const WritePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Container(
            width: double.infinity,
            height: 100,
            child: Text(context.watch<TextProvider>().text),
          ),
          Container(
            decoration: BoxDecoration(
              border: Border.all(width: 1)
            ),
            child: TextField(
              onChanged: (value) {
                context.read<TextProvider>().onChangedText(value);
              },
            )
          ),
        ],
      ),

    );
  }
}