[Flutter]09 StatefulWidget

ref : 코딩 애플[Flutter로 만드는 iOS, Android 앱] 강의

---

저번에 버튼안에 있는 1이 

버튼을 클릭해도 숫자가 늘어나지 않았었는데

재렌더링이 안되었기 때문이고

 

재렌더링을 하려면

state 를 쓰면된다. state 가 변할 때마다 자동으로 재렌더링이 된다.

 

우리가 보통 변수에 데이터를 저장하듯이

Flutter 는 변수 혹은 state 에 데이터를 저장한다.

 

state 는 변하면 state 를 사용하는 위젯이 자동 재렌더링 된다.

---

state 만드는 법을 알아보자

1. StatefulWidget 만들기

 

stful 을 쓰고 tab 키를 누르면

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

  @override
  _State createState() => _State();
}

class _State extends State<> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

이렇게 자동완성이 된다.

 

2. 또는 원래 아래에 있던 클래스에 StatelessWidget 을 StatefulWidget 으로 글자를 바꿔준다.

   그리고 그 안에 변수를 만들어주면 그게 자동으로 state 가 된다.

state 를 변경하고 싶으면

setState( ( ) { 여기서 하면 된다 } )

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}



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

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

class _MyAppState extends State<MyApp> {
  var a = 1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home : Scaffold(
          floatingActionButton: FloatingActionButton(
            child: Text(a.toString()),
            onPressed: (){
              setState(() {
                a++;
              });
            },
          ),
            appBar: AppBar(),
            bottomNavigationBar: BottomAppBar(),
            body: ListView.builder(
                itemCount: 5,
                itemBuilder: (c, i){
                  print(i);
                  return ListTile(
                    leading: Image.asset('flower.jpg'),
                    title: Text('서다원'),
                  );
                },
            )
            )
        );

  }
}

a가 버튼위젯에 잘 반영되는 모습을 볼 수 있다.

---

연락처 앱에서 리스트들을 보면

이름 같은 데이터는 자주 변할 수 있는 데이터니까 state 에 넣어두는게 좋다.

 

state 쓸 경우

1. 자주 바뀌는 데이터들

2. 바뀌면 바로바로 보여야하는 데이터들

 

그러니 연락처들의 이름들은 name 이라는 리스트에 따로 넣어서 출력하도록 하려한다.

  var name = ['해리', '론', '헤르미온느'];

 body: ListView.builder(
                itemCount: 3,
                itemBuilder: (c, i){
                  print(i);
                  return ListTile(
                    leading: Image.asset('flower.jpg'),
                    title: Text(name[i]),
                  );
                },
            )

---

연습으로 이름마다 (좋아요 버튼), (숫자 버튼) 넣고 버튼 누르면 +1 되는 기능을 구현해봤다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}



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

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

class _MyAppState extends State<MyApp> {
  var like = [0,0,0];
  var name = ['해리', '론', '헤르미온느'];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home : Scaffold(
            appBar: AppBar(title: Text('연락처앱'),),
            bottomNavigationBar: BottomAppBar(),
            body: ListView.builder(
                itemCount: 3,
                itemBuilder: (c, i){
                  return ListTile(
                    leading: Text(like[i].toString()),
                    title: Text(name[i]),
                    trailing: TextButton(
                      child: Text('좋아요'),
                      onPressed: (){
                        setState(() {
                          like[i]++;
                        });
                      },),
                  );
                },
            )
            )
        );

  }
}

잘 동작한다.