플러터

[플러터] StatefulWidget vs StatelessWidget

블루베리QA 2022. 11. 16. 12:20

Flutter는 이미 만들어져 있는 widget을 원하는 위치에 붙여서 앱을 만든다.

StatelessWidget과 statefulWidget으로 구분한다. 

[ StatelessWidget ]

: 상태 변경을 하지 않는 위젯이다.
-> 현재 상태(State)를 설정 할 필요가 없으며 자체적으로 새로고침(setState)을 하지도 않는다.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}


[ StatefulWidget ]

: 상태 변경을 하는 위젯이다.

-> 현재상태를 아래와 같이 먼저 지정해주고 ( createState() )

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

@override
  State<MyHomePage> createState() => _MyHomePageState();

-> 특정 버튼(_incrementCounter), 를 선택하면 새로고침(setState)와 함께 상태가 변경되도록 설정되어 있다.

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

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