happy cat image

everdevel

coding

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.
























에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

방문해 주셔서 감사합니다.

화면을 다시 그리는 setState

이번에는 setState()메서드에 대해 알아볼게요.

앞에서 우리가 탭할때마다 1씩 증가하는 값을 화면에 띄우는 앱을 만들었는데

실제 값은 1씩 늘어나지만 화면에는 여전히 0만 나왔습니다.

플러터는 상태의 변경을 화면에 보여주려면 위젯들을 다시 띄워야합니다.

즉 build()메서드가 다시 실행되면서 위젯을 다시 그려야합니다.

이것을 가능하게 해주는 메서드가 setState메서드입니다.

build() 메서드를 호출해서 화면을 새로그리는 setState()메서드

그래서 counter++ 이 부분을 setState()메서드안에서 실행을하면 build()메서드를 재 실행하면서 새로운 프로퍼티의 값을 화면에 보여줍니다.

counter++코드를 다음과 같이 setState()메서드에 감쌉니다.

변경 전 코드

onPressed: (){
    counter++;
    print(counter);
},

변경 후 코드

onPressed: (){
    setState(() {
        counter++;
    });
    print(counter);
},

그리고 _MyAppState에 있는 build에 다음의 출력문도 추가해 정말 build()메서드가 재작동하는지 확인하겠습니다.

print('rebuild');
set state

현재까지의 _MyAppState 클래스의 전체 코드는 다음과 같습니다.

class _MyAppState extends State<MyAppState> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    print('rebuild');
    return Scaffold(
      appBar: AppBar(
        title: Text('everdevel'),
        centerTitle: true,
        leading: Icon(Icons.menu),
        actions: [
          Icon(Icons.search),
          Icon(Icons.attach_file),
        ],
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: (){
          setState(() {
            counter++;
          });
          print(counter);
        },
        icon: Icon(Icons.add),
        backgroundColor: Colors.red,
        label: Text('push'),
      ),
      body: Center(
        child:Text(
          '$counter',
          style: TextStyle(fontSize: 100),
        ),
      ),
    );
  }
}

실행을 하면 다음과 같이 누른 수 만큼 1씩 올라간 화면이 나타납니다.

set state

그리고 빨간색 박스를 보면 올라간 값과 함께 rebuild가 출력됨을 알 수 있습니다.

counter++가 작동 하고 build()메서드가 재 호출되어 1 올라간 값이 화면에 나타납니다.

와우! 사실 여기까지 한 것은 우리가 플러터 프로젝트를 새로 만들면 나오는 기본앱을 만든것입니다.

플러터 앱을 새로 만들고 앱을 실행해보면 완벽하게 똑같진 않지만 거의 흡사함을 알 수 있습니다.

코드도 완벽하게 같진 않지만 거의 흡사합니다.

우리는 이제 완벽하진 않더라도 대충 기본앱이 어떻게 돌아가는지는 알게되었네요. 호호!!

그럼 다음 컨텐츠 뭘 만든지 구상하고 있겠습니다.

이 챕터의 마지막 페이지입니다.

제가 지금 다른곳에 정신이 팔려있는것 같습니다.

다음 강좌를 원하시면
아래의 요청하기 버튼을 눌러주세요.

학교나 학원에서 배우는 것과는 완전히 다른 분위기, 다른 방식으로 들려주는 수학이야기입니다. 수학을 공부하면서도 괴로워하고 힘들어하는 학생들의 마음을 달래주려는 의도로 쓰여진 책입니다. 학생들이 수학과 친해질 수 있도록 도와주기 위해 이야기를 시작하는 점이 색다릅니다. 그냥 설득하는 것이 아니라 가장 좋은 방법인 다른 사람들의 사례들을 들려줍니다. 수학과 친하게 된 사람들의 경험담들. 누군가 어떤 경험을 했다는 것은 내 자신도 경험 가능한 옵션의 테두리 안으로 들어올 수 있다는 것이니까요. 그 다음은 바로 수학공부하자 하지 않고 게임들을 먼저 소개해줍니다. 바둑알, 화투, 트럼프 카드, 등등 우리 주변에 있는 것들을 이용해 친구, 가족과 쉽게 즐기며 논리력을 키울 수 있는 게임들입니다. 초등학교 때부터의 수학 교과 내용이 어떻게 연결되는지 설명하는데, 각 단원 별 의미와 배경을 알려 줍니다. 중학교 수학과정들을 파트별도 정리하여 전체적인 면을 보여줍니다. 마치 산책이나 갈까 했다 동네 뒷산 올라가서보니 뜻밖에 우리 동네가 이렇게 생겼구나 하는 사실을 깨닫게 되는 느낌입니다. 시험과 성적 올리기 비법 이야기는 전혀 안하면서 수학 공부하라고 부드럽게 둘레길처럼 이야기하는 독특한 책입니다. 수학 이야기책, 수학 교과과정 해설서, 가이드북, 혹은 힐링책처럼도 느껴집니다. 이유도 모른 채 뭘 자꾸 풀이하라고 하는 수학이 지루하고 답답하고 화가 날 때 이 책에 담긴 무척 포괄적인 내용을 알고 있다면, 기억한다면 격렬한 거부감이 누그러들지도 모르겠습니다.

컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준