📘 Flutter/Flutter for SwiftUI Devs

Flutter for SwiftUI - Managing state

이오🐥 2023. 1. 18. 19:22

In SwifUI 

SwiftUI에서, view의 내부에서 state를 관리하기 위해

@State라는 property wrapper를 사용한다.

struct ContentView: View {
  @State private var counter = 0;
  var body: some View {
    VStack{
      Button("+") { counter+=1 }
      Text(String(counter))
    }
  }}

 

또한, 더 복잡한 상태 관리를 위해 여러 옵션들이 있는데,

예를 들어, ObservableObject라는 protocol이 있다.

 

 

 In Flutter 

Flutter에서 local state를 관리하기 위해 StatefulWidget을 사용한다.

다음 두 종류의 class로 stateful widget을 구현한다.

  • a subclass of StatefulWidget
  • a subclass of State

 

State object는 widget의 상태를 저장한다.

위젯의 상태를 변경하려면,

framework에게 widget을 다시 그리도록 요청하기 위해

State의 subclass에서 setState()를 사용한다.

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('$_counter'),
            TextButton(
              onPressed: () => setState(() {
                _counter++;
              }),
              child: const Text('+'),
            ),
          ],
        ),
      ),
    );
  }
}

 

 


 

Flutter for SwiftUI Developers

Learn how to apply SwiftUI developer knowledge when building Flutter apps.

docs.flutter.dev