간단한 앱 상태 관리

구현

App 위젯으로 시작하여 App 위젯에 상태를 추가하는 대신 기능을 "incrementCounter"위젯으로 옮길 것입니다. 아래에서 앱 위젯의 전체 구현을 확인하세요.

import 'package:flutter/material.dart';
import 'package:hello_flutter/widgets/incrementCounter.dart';

void main() => runApp(App());

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'HelloFlutterApp', 
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter!'),
        ),
      body: IncrementCounter(),
      )
    );
  }
}

IncrementCounter 위젯은 카운터 및 카운터와 관련된 버튼을 표시하는 역할을 합니다. 구현은 다음과 같습니다.

class IncrementCounter extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
        Text('0', style: TextStyle(fontSize: 24),), 
        FlatButton(
          color: Colors.orange, 
          child: Text('Increment Counter', style: TextStyle(color: Colors.white)), 
          onPressed: () {},

        )

      ],)
    );

  }

}

위젯은 아래 스크린샷과 같이 표시됩니다.


Center 위젯을 사용하여 먼저 모든 것을 중앙에 배치했습니다. 그런 다음 중앙 위젯 안에 Column 위젯을 배치했습니다. 열 위젯은 세로(열) 방향으로 항목을 추가하는 CSS FlexBox처럼 작동합니다. 열 위젯에는 Text 및 FlatButton 위젯이 포함됩니다. 이제 FlatButton 위젯의 onPressed 이벤트를 구현해 보겠습니다.

class IncrementCounter extends StatelessWidget {

  int _counter = 0; 

  void _incrementCounter() {
    _counter++; 
    debugPrint('$_counter');
  }

  @override
  Widget build(BuildContext context) {

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
        Text('$_counter', style: TextStyle(fontSize: 24),), 
        FlatButton(
          color: Colors.orange, 
          child: Text('Increment Counter', style: TextStyle(color: Colors.white)), 
          onPressed: _incrementCounter,

        )

      ],)
    );

  }

}

이제 FlatButton을 누르면 incrementCounter 함수가 실행됩니다. 함수의 밑줄 ""은 이 함수가 비공개 함수이며 이 클래스 외부에서 볼 수 없음을 나타냅니다. _incrementCounter 함수는 _counter의 값을 증가시킵니다. debugPrint 함수를 사용하여 콘솔에 값을 출력할 수 있습니다. '$_counter'는 Dart 언어에서 문자열 보간을 나타냅니다.
또한 단순히 _counter 변수의 값을 표시하도록 Text 위젯을 업데이트했습니다. 앱을 실행하고 버튼을 누르면 _counter가 업데이트되고 있음을 알 수 있지만 이러한 변경 사항을 반영하도록 사용자 인터페이스를 업데이트하지는 않습니다. 그 이유는 값이 업데이트된 후 자동으로 빌드 기능을 호출하지 않기 때문입니다.
이것이 작동하려면 국가의 힘을 사용해야 합니다. Flutter에서 상태가 구현되는 방식은 약간 이상합니다. StatefulWidget 클래스에서 InrementCounter 클래스를 상속하는 대신 상태를 관리하고 위젯의 사용자 인터페이스를 빌드할 별도의 클래스를 만들어야 합니다.
Flutter 팀이 여러 클래스를 만드는 대신 단일 클래스를 활용하여 상태를 구현하는 방법을 찾을 수 있기를 진심으로 바랍니다. 상태 위젯에서 상태 관리 및 사용자 인터페이스 구축을 이동함으로써 우리는 단일 책임 원칙을 위반하고 있습니다.
IncrementCounter 위젯과 아래 IncrementCounterState의 전체 구현을 확인하십시오.

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

class IncrementCounterState extends State<IncrementCounter> {

  int _counter = 0; 

  @override
  Widget build(BuildContext context) {

    void _incrementCounter() {
      setState(() {
        _counter++; 
      });
    }

    return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, 
          children: <Widget>[
            Text('$_counter',style: TextStyle(fontSize: 24),), 
            FlatButton(
              onPressed: _incrementCounter,
              child: Text('Increment Counter', style: TextStyle(color: Colors.white)), 
              color: Colors.orange
            )
          ],

          ),
      );

  }

}

class IncrementCounter extends StatefulWidget {

  @override 
  IncrementCounterState createState() => IncrementCounterState();

} 

IncrementCounter는 이제 StatelessWidget 대신 StatefulWidget에서 상속합니다. 상태는 IncrementCounterState 위젯에서 관리합니다. _incrementCounter 함수 내에서 우리는 setState 함수를 호출하고 _counter를 증가시킵니다. 이로 인해 빌드 기능이 다시 실행되어 사용자 인터페이스가 업데이트되고 카운터의 업데이트된 값이 반영됩니다. 아래 데모를 확인하십시오.



그게 다야!
이 기사를 즐겼기를 바랍니다.
감사해요
나를 팔로우하여 나를 지원하십시오 !!