Flutter/Dart로 Bitfinex의 렌더링 앱 만들기(Part2 stateful/데이터 지속성)

Flutter의 기사를 정리하고 책으로 만들었습니다.



  • 이 기사를 포함한 다양한 기사를 체계적으로 정리하고 책에 정리했습니다.
  • 향후는 이쪽을 최신화하기 위해, 최신 정보는 이쪽을 확인해 주세요
  • 10만문자를 넘는 초대작이 되어 있습니다(웃음)


  • 소개


  • 이 기사는, 최초의 스마트폰 앱을 만들 때까지의 궤적을 남긴 것입니다.
  • 이 기사에서는 sateless/statefull 및 shared_preference를 사용하여 데이터를 저장하는 방법을 소개합니다.

    관련 기사


  • Flutter / Dart로 Bitfinex의 렌더링 앱 만들기 (Part1 설치 및 화면 작성 / 화면 전환)

  • 화면 다시 그리기


  • Dart 에서는, 화면의 재묘화를 실시할지 실시하지 않는가로, 사용하는 클래스가 다릅니다.
  • StatelessWidget을 상속하면 build가 한 번만 호출되고 정적 (이뮤터블?) 페이지가됩니다.
  • statefullWidget과 State 클래스를 사용하면 build가 반복적으로 호출되고 화면이 다시 그려지는 동적 (뮤터블 화면)이됩니다.

  • 공식 문서를 읽을 때, stateless와 stateful 모두 모두 불변 객체로 작성됩니다.
  • stateless는 완전한 불변 객체입니다.
  • statefull은 State 클래스 제네릭에 Statefull 클래스를 지정하여 사용합니다.
  • State 클래스를 상속받은 클래스의 build가 반복적으로 호출되어 상태를 유지합니다.



  • stateless.dart
    class Info extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("info"),
          ),
          body: Center(child: Text("使い方、更新情報など")),
        );
      }
    }
    
    

    stateful.dart
    class Info extends StatefulWidget {
      @override
      _InfoState createState() => _InfoState();
    
      Widget build(BuildContext context) {
        return Info();
      }
    }
    
    class _InfoState extends State<Info> {
      String _value = "";
        return Scaffold(
          appBar: AppBar(
            title: Text("info"),
          ),
          body: Center(child: Text("使い方、更新情報など")),
        );
    }
    

    초기 상태와 상태를 변경하는 방법



    초기 상태


  • initState 메소드가 최초로 불려 가기 (위해)때문에, 여기를 재기록합니다.

    initState.dart
    @Override 
    void initState(){
      super.initState();
      //ここに独自の処理を入れる
    }
    

    상태 변경


  • setState 메소드로 명시 적으로 재 렌더링 할 수 있습니다.

    setState.dart
    if (mounted) {
      setState(() {
        value = "変えたい値";
      });
    }
    
  • mounted 를 체크하고 있는 것은 , 재묘화시에 화면의 구축이 불완전한?일 때가 있어 에러가 나오므로 , 문서에는 mounted 를 조사하고 나서 재기록하는 것을 추천 하고 있기 때문입니다. .

  • 데이터 저장


  • 화면에서 입력된 값을 영속화할 필요가 많이 있다고 생각합니다.
  • DB에 넣는 것도 해결책이 있습니다만, 간편한 shared_preferences를 사용하는 예를 소개


  • sharedpref.dart
    SharedPreferences prefs = await SharedPreferences.getInstance();
    
    prefs.setString("key",value); //登録
    prefs.getString("key") // 取得
    prefs.remove("key") // 削除
    
  • pubspec.yaml의 dependencies에 shared_preferences를 작성하는 것을 잊지 마십시오.
  • 앱 내에서 공유되므로 다른 화면에서도 물론 호출 할 수 있습니다

  • 좋은 웹페이지 즐겨찾기