flutter 5일차 statefulWidget

*코딩셰프 유튜브 채널기준으로 공부를했습니다. 부족하신분은 코딩셰프 채널에서 추가공부하시면 도움이 많이 될것입니다.

 

오늘은 statefulWidget을 알아보겠습니다. 이때까지는 정해진 데이터를 단순히 입력하였다면 statefulwidget은 가져온데이터로 연산을 해서 화면에 나타내는것입니다.

이때까지  코드 다지우고 

import 'package:flutter/material.dart';

void main()=>runApp(MyApp());
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'hi',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      debugShowCheckedModeBanner: true,
      home: prastl(),
    );;
  }
}


class stf extends StatefulWidget {
  const stf({Key? key}) : super(key: key);

  @override
  State<stf> createState() => _stfState();
}

class _stfState extends State<stf> {
  int a=0;
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('stateful'),
      ),
      body: Column(
        children: [
          ElevatedButton(
              onPressed: (){
                setState(() {
                  a=a+1;
                });
                print(a);
              },
              child: Text('숫자증가'),
          ),
          Text('$a'),
        ],
      ),
    );
  }
}

class prastl extends StatelessWidget {
  prastl({Key? key}) : super(key: key);
  int a=0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('stateful'),
      ),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: (){

                a=a+1;

              print(a);
            },
            child: Text('숫자증가'),
          ),
          Text('$a'),
        ],
      ),
    );
  }
}

이렇게 입력해주세요 현재 stateless라서 

이렇게 a는 증가하지만 화면에 글자는 변하지 않는것을 볼수 있습니다 즉 정적페이지이기 때문에 데이터 변경이 업데이트되지 않는다고 생각하시면 좋을거 같습니다.

그럼 이제 MyApp만

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'hi',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      debugShowCheckedModeBanner: true,
      home: stf(),
    );
  }
}

이렇게 수정해서 statefulwidget과 연결하고 보면

이런식으로 숫자가 올라가는것이 보입니다 

즉 

setState(() {
  a=a+1;
});

이런식으로 setState 안에서 변수를 조작하면 그 변화하는게 반영이됩니다. 즉 widget부분이 바뀐부분에 영향을 받게 됩니다. 그러면 어디서부터 다시 실행되는걸까 알아보면 

stf 함수를 

class stf extends StatefulWidget {
  const stf({Key? key}) : super(key: key);

  @override
  State<stf> createState() => _stfState();
}

class _stfState extends State<stf> {
  
  @override
  Widget build(BuildContext context) {
    int a=0;
    return Scaffold(
      appBar: AppBar(
        title: Text('stateful'),
      ),
      body: Column(
        children: [
          ElevatedButton(
              onPressed: (){
                setState(() {
                  a=a+1;
                });
                print(a);
              },
              child: Text('숫자증가'),
          ),
          Text('$a'),
        ],
      ),
    );
  }
}

이렇게 바꺼서 a 를 return 바로 위 즉 build함수 내부에 넣고 찍어보면

 

이런식으로 a도 계속 1로 초기화되면서 유지되는 것을보면 build함수가 계속 업데이트 되는것을 확인할수있습니다.

 

추가로 MyApp함수가 stateless인지 statefullwidget인지는 상관이 없습니다 즉 직접연결되는 함수가 어떤 widget인지에 따라서 결정이 됩니다.