[Flutter] 버튼에 기능 추가(FAB, State)

1. floating Action Button 

floatingActionButton: FloatingActionButton(
  child: Text('버튼'),
  onPressed: (){ //버튼 눌렀을때 마다 실행
    print(a);
    a++;
  },
),

1-1) child:Text(a.toString())을 했는데 화면에 보이는 값이 바뀌지 않는다?

오류 코드

floatingActionButton: FloatingActionButton(
  child: Text(a.toString()),
  onPressed: (){ //버튼 눌렀을때 마다 실행
    print(a);
    a++;
  },

예시출력 - FAB이랑 콘솔의 숫자가 동일하지 않음.

 

 

원인 : 위젯이 재랜더링이 되지않았기 때문이다.

 

재랜더링 하는 법 : Stateful Widget만들어주기 

방법1) stful class 만들기

방법2: statelesswidget 에서 전구 눌러서 statefulwiget으로 바꿔주기

class MyApp extends StatelessWidget 

class MyApp extends StatefulWidget {

위 코드에서 아래 코드로 변경!!

 

setState(() { a++;}); 로 변경

onPressed: (){ //버튼 눌렀을때 마다 실행
  print(a);
  setState(() {
    a++;
  });
},

재랜더링 성공

 

2. State 는 그래서 언제쓸까?

-자주 변하는 데이터들

-바뀌면 바로바로 보여야하는 데이터들 (e.g. 연락처앱의 사람이름)

 

2-1) State를 활용하여 연락처 이름 넣기

var name = ['김영숙', '홍길동', '피자집'];

body: ListView.builder(
   itemCount: 3,
   itemBuilder: (context,i){ //일반적으로 c,i로 작명
     return ListTile(
       leading: Icon(Icons.account_circle),
       title:Text(name[i])
     ); //이 위젯이 3번 반복됨
   }
  ),

 

 

2-2) 자식위젯이 부모위젯의 state를 변경하려면? 

class 1{ 
	var total
    2() 
}

class 2{
	total 값을 바꾸고 싶어?
}

 

형태로 커스텀 위젯을 이용했는데 부모 state(total)를 바꾸고 싶다면 수정함수를 만들어야한다!! 

 

class 1{ 
	var total
    
    // 수정함수 선언!! 
    addOne() {
    	setState(() {
        	total++
        });
    } 
    
    2(addOne:addOne)
};

class 2{

	const 2({Key?key, this.addOne}) : super(key:key);
    final addOne
    
	return ... addOne();
};