[Flutter][Dart] StatelessWidget, StatefulWidget, Navigation 정리

Flutter는 모든 것이 위젯(Widget)으로 이루어져 있습니다.
Widget은 애플리케이션의 UI를 구성하는 블록으로 생각할 수 있습니다.

1. StatelessWidget:

이는 상태를 변경할 수 없는 위젯입니다. 즉, 한 번 그려지면 그 상태가 변경되지 않습니다. 화면에 표시되는 정보가 사용자의 상호작용에 따라 변하지 않는 경우 주로 사용됩니다. 예를 들어, 로고, 아이콘 등이 있습니다.

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('Hello, World!'),
    );
  }
}

2. StatefulWidget:

이는 상태를 변경할 수 있는 위젯입니다. StatefulWidget은 사용자의 상호작용이나 시간의 흐름에 따라 그 상태가 변할 수 있습니다. 예를 들어, 체크박스, 슬라이더, 버튼 등이 있습니다.

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Text('Counter: $counter'),
        onPressed: incrementCounter,
      ),
    );
  }
}

3. Navigation (화면 이동):

Flutter에서는 Navigator 위젯을 사용해 앱의 화면 간 이동(Navigation)을 관리합니다. Navigator는 위젯 스택을 관리하는 것으로 생각할 수 있습니다. 새로운 화면을 열려면 새로운 위젯을 스택에 푸시(push)하고, 현재 화면을 닫으려면 위젯을 스택에서 팝(pop)합니다.

// 새로운 화면으로 이동
Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen()));

// 현재 화면을 닫고 이전 화면으로 돌아가기
Navigator.pop(context);