노력하지 않아도 돼요.

Flutter를 배우기 시작한 사람이 만나는 벽.

멘타와 플루터대 등에서 플루터를 가르치겠다는 입장이 된 지 4개월이 지났다.
이 가운데 리버포드와 관련한 질문을 받는 경우도 늘었다.
하지만 이들 중에는 왜 리버포드를 사용해야 하는지 모르는 사람도 있다.
이런 상태에 빠진 이유 중 하나는 플랫터를 계속 공부하면 많은 기사가 리버팟을 칭찬한다는 것이다.이 기사들이 과도한 초조감을 부추겼다고 생각한다"며"이 열풍을 따라잡지 못하면 버려질 것 같다"고 말했다.
필요한 도구는 필요할 때 배우는 것 중 가장 잘 파악할 수 있다고 생각했고, 원래부터'왜'이 부분을 사용했다면 공부할 의미가 없다고 생각했다.
지식에 대한 호기심을 충족시키기 위해 혹은 업무상 리버포드를 사용해 지식을 향상하는 것을 배우면 좋은 일이라고 생각합니다.
하지만 그 중에서도 리버포드를 모르고 플레터에 어울리지 않는다고 생각하는 사람도 있다는 것은 슬픈 일이다.
Stateful Widget을 사용하여 Fluter의 상태를 관리할 수 있다면 이루고 싶은 일의 80퍼센트가 될 것이라고 생각합니다.
Riverpod를 배우기 시작하면 막다른 골목에 이르렀으니 Flutter에서 물러나고 싶은 사람은 다시 생각해 보세요.만들고 싶은 앱이 완성되기 전에 리버포드는 그 뒤에 있다.

Stateful Widget을 먼저 파악하는 게 좋을 것 같은 이유.

그럼 무엇부터 공부하는 게 좋을까요?StatefulWidget을 사용하는 곳부터 시작하도록 권장합니다.
공식 문서와 Fluter에 관한 글에 나오는 많은 샘플 코드는 Stateful Widget로 작성되었습니다.
StatefulWidget에 익숙하면 이 코드들을 쉽게 읽을 수 있습니다.
나는 이것이 리버포드를 배우는 것보다 가치가 더 높다고 생각한다.

StatefulWidget 무서워하지 마세요.

내가 Fluter를 시작했을 때 Stateful Widget이 무서웠어.
왜 클라스 두 개를 하지 않으면 역할을 발휘하지 못하는지, 크레이트 스테이트는 무엇을 하는지 모르기 때문에 뇌에 대한 부담이 매우 크다.
하지만 그렇게 깊이 생각할 필요는 없다.
내부 구조에 익숙해져야 이해하기 때문에 괜찮아요.
StatefulWidget의 초기 상태를 살펴보겠습니다.stf 정도 치면 자동으로 형태가 생길 거예요.
그리고 거기에 위젯 이름을 붙여요.
이번에는 Sample라고 명명되었다.

class Sample extends StatefulWidget {
  const Sample({Key? key}) : super(key: key);


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

class _SampleState extends State<Sample> {
  /// ここに変数を書く

  /// ここに関数を書く

  @override
  Widget build(BuildContext context) {
    /// ここにUIを書く
    return Container();
  }
}

초보자들은 우선 어려운 일을 고려하지 말고 하나stf를 쳐서 Stateful Widget을 만들고 위의 댓글에 따라 변수와 함수 UI를 쓰는 것이 좋다.
익숙해지면 각자의 뜻을 조사하고 생각할 수 있다.

Stateful Widget에 걸려 넘어진 곳

초보자는 걸려 넘어질 수 있는 곳이 세 군데 있기 때문에 총괄적으로 설명해 드리겠습니다.

호출setState((){})으로 화면 업데이트

처음에 한 번만 실행하려고 한 경우initState()에 쓰기

수신된 변수는 widget.<変数名>에서 사용할 수 있다

1. setState(() {})를 호출하여 화면 업데이트

아무것도 모르고 Flutter를 시작하면 논리가 적혀 있는데도 UI는 전혀 변하지 않는 벽에 부딪히게 된다.
처음 만들어진 카운터 애플리케이션이라는 댓글에는 설명이 달렸지만 무시하는 사람이 많았다.
이 문제는 setState((){})라고 불러서 해결할 수 있다.
특히 아무 생각 없이 화면을 업데이트하고 싶다면setState((){}) 이렇게 이해해도 괜찮다.
//TODO(kenta-wakasa): 미리 찾기setState((){})의 내부 구조, 참고 문장

2. 한 번 먼저 실행하고 싶을 때 initState()에 쓰기

일단 해보고 싶은 게 많죠?예를 들면 모든 리스트 데이터를 먼저 얻고 싶다거나.
그런 처리는 initState()에 쓰여 있다.
아까 Sample 코드를 확충해 봅시다.

class Sample extends StatefulWidget {
  const Sample({Key? key}) : super(key: key);


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

class _SampleState extends State<Sample> {
  /// ここに変数を書く

  /// ここに関数を書く

  @override
  void initState() {
    super.initState();
    /// ここにはじめに一度だけ実行したいものを書く
  }

  @override
  Widget build(BuildContext context) {
    /// ここにUIを書く
    return Container();
  }
}

이것을 복제하면 사용하기가 매우 간단하다.

3. 받은 변수는widget.<변수 이름 > 에서 사용

나는 바깥쪽에서 변수를 받아들여 사용하는 장면이 있다고 생각한다.
이 경우 state에서 이 변수를 사용할 때 widget.<変数名> 를 써야 합니다.
이것도 Sample 코드로 보세요.

class Sample extends StatefulWidget {
  const Sample({Key? key, required this.title}) : super(key: key);

  /// 例えば外側から文字列でtitleを与えるように書く
  final String title

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

class _SampleState extends State<Sample> {
  /// ここに変数を書く

  /// ここに関数を書く

  @override
  void initState() {
    super.initState();
    /// ここにはじめに一度だけ実行したいものを書く
  }

  @override
  Widget build(BuildContext context) {
    /// ここにUIを書く
    return Scaffold(
      appBar: AppBar(
        // Text(title) とかくとだめ
        // Text(widget.title) といける
        title: Text(widget.title),
      )
    );
  }
}

도저히 안 될 때도 솔로로 치는 방법이 있어요.

Stateful을 사용하면 고통스러워지는데, 여러 화면 사이에서 상태를 공유하고 싶을 때다.
이때 Riverpod를 사용하면 전역 영역에 Provider를 선언할 수 있기 때문에 쉽게 관리할 수 있습니다.
그러나 리버포드는 그에 상응하는 학습 비용이 필요하기 때문에 우선 단식 모델로 이 문제를 해결하는 것이 좋다고 생각한다.
단식은 그 종목에서 하나의 실례만 가지기 위해 설계된 방법이다.
Dart에서는 간단히 단식을 만들 수 있다.

class Manager {
  /// ._() のように書くことで、外部ファイルが Manager インスタンスを作成できないようにすることができる。
  Manager._();

  /// 内部の変数に ひとつだけ Manager のインスタンスを生成し代入する。
  static final instance = Manager._();

  /// ここに複数の画面間で使いたい変数群を書いていく
  String userName = 'こんぶ';
  String userId = 'presssedkonbu';
}

/// 上記シングルトンをWidgetの中で使う場合
class Sample extends StatefulWidget {
  const Sample({Key? key}) : super(key: key);

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

class _SampleState extends State<Sample> {
  @override
  Widget build(BuildContext context) {
    /// ここにUIを書く
    return Scaffold(
      appBar: AppBar(
        title: Text(Manager.instance.userName),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        // 値を更新したければ再代入すればいい。
        Manager.instance.userName = '昆布の名前を変更したよ';
        // 画面を更新したいので setState を呼ぶ
        setState((){});
      }),
    );
  }
}

이렇게 쓰면 어느 화면에서username을 참조할 수 있습니까?

최후

Stateful과 단식을 사용하면 9할 정도의 문제를 처리할 수 있다고 생각합니다.
일단 대충 이해하고, Flutter의 재미를 마음껏 즐겼으면 좋겠다.