Flutter - StatefulWidget 만들기

앱내에서는 많은 데이터들이 바뀐다. 

이때 데이터가 바뀔때 그 값은 바뀌어도 렌더링이 안된다면 그 값을 그대로 표시가 된다. 

 

이때 사용하는게 state 이다.

state는 변수랑 똑같지만 변경사항이 생기면 위젯이 자동으로 재렌더링이 된다.

state를 사용해보자

state를 만들려면 state 보관함 + 커스텀 widget 이렇게 한 세트를 만들어야한다. 

 

class 테스트 extends StatefulWidget {
  const 테스트({Key? key}) : super(key: key);
  @override
  _테스트State createState() => _테스트State();
}

class _테스트State extends State {

  var a = 1;  //여기 만드는 변수는 state가 됩니다 
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

stful 쓰고 텝하면 자동완성 됨

 

커스텀 위젯을 만드는 문법이랑 비슷함 

커스텀 위젯에서 StatelessWidget 을 StatefulWideget 으로 바꿔서 state 써도 됨. 

 

child: Text(a.toString()),
              onPressed: (){
                setState(() {
                  a++;
                });

이건 버튼을 누르면 버튼의 숫자가 +1 이 되어 표시는 코드

 

 

이렇게 데이터 변동이 잦을거 같다면 StatefulWideget 으로 만들면 된다. 

 

 

추가 예제로 연락처에 이름도 바꿔보자

일단 이름이 담긴 list를 만들어주고 (state로)

리스트의 인데스로 접근하여 각각의 view에 이름을 넣는다. 

 

   body: ListView.builder(
            itemCount: 3,
            itemBuilder: (c,i){
              return ListTile(
                leading: Image.asset('peachs.jpeg'),
                title : Text(name[i]),

 

이때 반복때마다 +1 이 되는 인자인 i를 이용한다. 

 

 

숙제) 

이름 옆에 좋아요 버튼을 만들고 누를때마다 좋아요 수 올라가게 하기

 

ListTile 에 버튼을 추가해야 한다. 

공식문서에 보니 속성에 trailing 이 있어 이를 이용했다. 

 

그리고 어떤 버튼을 사용해야 하는지 몰라서 풀이를 보니 

ElevatedButton

 

버튼을 사용했다 이 버튼은 

An elevated button is a label child displayed on a Material widget 이라고 하는데 와닿지는 않는다. 

암튼 이걸써서 코드를 짰다. 

 

body: ListView.builder(
            itemCount: 3,
            itemBuilder: (c,i){
              return ListTile(
                leading: Text(like[i].toString()),
                title : Text(name[i]),
                trailing: ElevatedButton(child: Text('like'),onPressed: (){
                  setState(() {
                    like[i]++; //좋아요 수 기록
                  });
                },),

다트 지원좀