지금 당장 사용하고 싶은 분들을 위한 Provider의 사용법[Fluter]

이마
안녕하세요, 고등학생 프로그래머 길건입니다.
이 글은'Provider'를 사용하는 상태 관리 방법을 Fluter 초보자에게 설명한다.
그럼에도 불구하고 나도 첫 번째 학자다.
처음에는 Provider를 이해하기 위해 고생을 많이 했어요.
솔직히 아직 이해하지 못한 게 많아..
하지만 이해는 뒤에 두고 어쨌든 쓸 수 있게 되었다.
그래서 이 보도는
이어 "지금 당장 쓰고 싶은 분들을 위해 자세한 해설 없이 실천적인 프로바이더의 기사를 배울 수 있도록 하겠다"고 덧붙였다.
좀 더 본질적으로 이해하고 싶은 사람에게는 적합하지 않다.양해해 주십시오..
그럼 우선 컨디션 관리부터 말씀드리겠습니다.
상태 관리란?
상태 관리에는 각양각색의 견해가 있다.
UI를 다시 그릴 때의 생각, UI 상태를 관리할 때의 생각 등...
솔직히 완전 첫 학자인 나한텐 깡패야.
그리고 최종적으로 얻은 결론은'원본 코드를 분류할 때의 생각'이었다.
개인적으로 이게 제일 잘 어울려요!
분류 소스 코드는 어떻게 된 겁니까?다시 설명해 드릴게요.
응용 프로그램의 기본 동작은 주로 입력-처리-출력이다.

'알람 프로그램' 을 예로 들다
기상시간 설정... 입력
현재 시간 계산... 처리
소리 내기... 출력
이런 느낌.많이 생략했지만 왠지 알 것 같아?
예전의 BASIC 같은 것을'수수형 프로그램 디자인'이라고 불렀는데 위에서 아래까지 일련의 소스 코드로 다양한 동작을 썼다.
그런데 그러면 고장난 곳을 찾기도 어렵고 기능을 추가하기도 힘들겠죠?
그래서 어쨌든 지금은 대상형 프로그래밍 방식이 주류가 되고 있다.
대상을 대상으로 한 경우 방금 알람시계의'기상시간 설정','현재 시간 계산','소리 울리기'등 각 동작을 분리해 소절로 나누어 쓴다.
이렇게 하면 예를 들면'소리가 안 나요!'이런 고장이 났을 때 소리를 내는 동작만 보면 문제를 발견할 수 있다.

수속형이라면 상황에 따라 전체 소스 코드를 수정해야 하며, 대상을 대상으로 하면 일정 시간을 절약할 수 있다.
컨디션 관리의 화제로 돌아간 결과'컨디션 관리는 대상을 향한 것이다!'그렇게 이해해도 돼.
상태 관리를 잘 배우면 이런 원본 코드를 분할할 수 있어 더욱 안전하고 효율적인 프로그래밍을 할 수 있다.
그런 다음 Provider는 여러 상태 관리 방법 중 하나입니다.
Google도 Flutter 개발의 표준으로 추천하고 있기 때문에 이것을 사용해야 합니다.
그래도 좀 흐릿한 것 같아. 먼저 써!
빨리 Provider를 사용하세요.
이번에는 Provider를 통해 이런 화면을 만드는 앱을 만들었다.

+1 키를 누르면 가운데 숫자가 1 증가한다.
-1 버튼을 누르면 1만 줄어든다.초간단.
그럼 Provider로 이걸 실현해 보세요!
첫 번째 설정부터 시작하겠습니다.
provider를 사용하기 전에pubspec.yaml 설정이 필요합니다.
pubspec.yaml

dependencies:
  provider: ^4.3.3
  flutter:
    sdk: flutter

provider 항목을 추가하십시오.
이번에 4.3.3 버전을 사용했지만 최대한 새로운 버전으로 바꾸는 게 좋을 것 같아서 맡겨드릴게요.
그리고 pub get을 실행합니다.

여기를 클릭하시면 됩니다.
이제 Provider를 사용할 준비가 되었습니다!
요컨대 먼저 보고 보고 모방하여 쓰시오
그럼dart에 써.먼저 샘플 코드를 삭제하십시오.
지금부터 너무 많이 생각하면 힘들 테니 제'보고, 보고, 모방'으로 먼저 써주세요!
main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

평상시의material.dart 이외에provider.데이터를 가져옵니다.
그 후속.
main.dart

class AAAAA with ChangeNotifier {
  int _result = 0; //増減の結果を保持する変数

  void Add() {  //１だけ加算するメソッド
    _result = _result + 1;
    notifyListeners();
  }

  void Min() {  //１だけ減算するメソッド
    _result = _result - 1;
    notifyListeners();
  }
}

곧 Provider의 요소가 나왔습니다.
여기서 체인지노티파이어반에'AAAA반'이라고 쓰여있는 것을 물려받았다.
체인지노티파이어반을 물려받은 AAAA반도'컨디션반'으로 불린다.
자세한 설명은 잠시 후에 하고 지금은 보지 않겠습니다.
여기서 보고 싶은 것은 notify Listeners () 방법입니다.
Add() 방법 및 Min()에서 사용되는 변수의 변경 사항, 즉알림 프로그램이 변수의 내용을 변경했습니다.
이거 나중에도 설명할게요!
그 후속.
main.dart

void main() => runApp(
      ChangeNotifierProvider(
        create: (context) => AAAAA(),
        child: MaterialApp(
          home: MainApp(),
        ),
      ),
    );

main ()은 입구점입니다. 주의하십시오.
MaterialApp 부품 위에 ChangeNotifierProvider 부품을 구성해야 합니다.
머티리얼 앱 아래에 배치하면 제대로 작동하지 않을 가능성이 크다.
어쨌든, 당신은 단호하게 이렇게 단정해 주십시오!
ChangeNotifierProvider 애플릿은 응용 프로그램 이전의 상태 클래스의 존재를 알려주는 역할을 한다.
그 후속.
main.dart

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ボタンで増減！'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
                Provider.of<AAAAA>(context)._result.toString(),
              style: TextStyle(
                fontSize: 80.0,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  child: Text('+1'),
                  onPressed: () {
                    Provider.of<AAAAA>(context, listen: false).Add();
                  },
                ),
                ElevatedButton(
                  child: Text('-1'),
                  onPressed: () {
                    Provider.of<AAAAA>(context, listen: false).Min();
                  },
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

한꺼번에 복사해 주세요.
방금 머티리얼 앱에 Main App 애플릿을 지정했는데 그 안에 이게 들어있어요.
기본적으로 평소와 변함이 없지만 몇 가지 중요한 점이 있다.

            Text(
                Provider.of<AAAAA>(context)._result.toString(),
              style: TextStyle(
                fontSize: 80.0,
              ),
            ),

우선 중앙 디지털 Text 애플릿입니다. 여기는 Provider입니다.of(context)._기술은result입니다.
이렇게 되면 아까 컨디션은 AAAA반이었어요.접근 가능한 변수.
방금 상태 클래스의 Add (, Min () 방법에 notify Listener () 를 썼습니다.
Provider.에서 호출된 변수는 notifyListener()를 호출할 때마다 업데이트됩니다.
수치를 일일이 업데이트하지 않아도 접근할 수 있다는 기술이다.
얻다result는 int형이기 때문에 toString()으로 String형으로 변환합니다.

                ElevatedButton(
                  child: Text('+1'),
                  onPressed: () {
                    Provider.of<AAAAA>(context, listen: false).Add();
                  },
                ),
                ElevatedButton(
                  child: Text('-1'),
                  onPressed: () {
                    Provider.of<AAAAA>(context, listen: false).Min();
                  },
                ),

다음은 +1, -1 버튼입니다. 여기도 마찬가지로 Provider입니다."of"호출 방법을 사용하고 있습니다.
Provider.of(context, listen: false).Add()에서
Provider.of(context, listen: false).Min()을 통한 Min 접근 방법변수를 증감하고 있다.
이렇게, Provider."of"를 사용하면 변수뿐만 아니라 방법도 접근할 수 있습니다!
또한, Provider.of(context,listen:가짜)와listen 속성을 가짜로 설정
이것은 화면을 다시 그리는 것을 방지한다.
실제로 UI의 변화는'중간 숫자'일 뿐 버튼은 변하지 않기 때문에 여기에 더 이상 그릴 필요가 없다.
listen 속성을 생략하면 기본적으로 진짜입니다.방금'중앙 숫자'부분에 쓴 Provider라는 뜻이다.of 진짜야.
이것만 쓰면 응용 프로그램이 완성됩니다.
Provider 요약
① ChangeNotifier 상속, 상태 클래스 설정
② 상태 클래스에 있는 변수를 업데이트할 때 notifyListener()를 씁니다.
③ChangeNotifierProvider 메서드를 MaterialApp 애플릿 위에 배치
④Provider.에서 상태 클래스 변수와 함수에 액세스할 수 있습니다.
⑤ notify Listener, Provider라고 합니다.에서 호출된 변수는 자동으로 업데이트됩니다.
이 다섯 시.
가져오기-처리-출력의 처리 섹션을 상태 클래스에서만 수행할 수 있는 디자인으로 설계하여 응용 프로그램의 안전성을 높일 수 있습니다.
이번에는 실천적인 Provider의 사용법을 설명했지만 지나치게 실천적이어서 설명을 대폭 생략했다.
다만, 나는 단지 한마디 하고 싶을 뿐이다. "사용하다 보면 습관이 된다!"그렇습니다.
나는 처음에 Provider로 프로그램을 전혀 예상대로 시작하지 않았다.
그러나 먼저 다른 사람의 방법을 보고 모방을 보고 이해를 뒤에 두고 공부하면 어느 정도 자유롭게 활용할 수 있다.
어쨌든 생각보다 하는 일이 중요하다.
이해가 안 돼도 되니까 어쨌든 이 기사의 코드를 복제해서 작동해 봤으면 좋겠어요.
언젠가는 이해할 수 있으니까 먼저 시작해!