[Flutter] StatefulWidget 만들기

StatefulWidget 만들기

• 지난번에 만들었던 버튼 기능으로 클릭시 1증가하는 a에 대한 변수를 버튼에 보이도록 하고 클릭될 때 마다 변경되는 것을 확인하려고 아래와 같이 코드를 작성

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  MyApp({super.key});

  var a = 1;

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: Text(a.toString()),
          onPressed: (){
            a++;
            print(a);
          },
        ),
        appBar: AppBar(),
        body: ListView.builder(
            itemCount: 3,
            itemBuilder: (c,i){
              return ListTile(
                leading: Icon(Icons.person_pin),
                title: Text(i.toString()),
              );
            }
        ),
        bottomNavigationBar: BottomAppBar(),
      ),
    );
  }
}

• 위와 같이 작성을 했지만 버튼에 적혀있는 변수 a의 값인 1이 변경되지 않는 것을 볼 수 있다.
  • 이유는 재렌더링이 되고 있지 않기에 StatefulWidget을 이용하게 되면 변경되는 위젯을 확인할 수 있다.
• 그래서 다시 정리하자면
  • state가 변한다면 state를 사용하는 위젯이 자동으로 재렌더링이 된다는 의미!
• 만드는 방법으로는 두 가지가 있다.
  • 첫 번째는 stful을 입력 후 Tab이나 Enter를 누르면 자동으로 완성된다.
    • 다만 해당 방법은 StatelessWidget 내에서 작성을 할 수 없기에 StatelessWidget 외부에서 작성을 해야한다.

    class Test extends StatefulWidget {
      const Test({super.key});
    
      @override
      State<Test> createState() => _TestState();
    }
    
    class _TestState extends State<Test> {
      @override
      Widget build(BuildContext context) {
        return const Placeholder();
      }
    }
    

  • 두 번째 방법으로는 기존 class인 MyApp을 StatelessWidget에서 StatefulWidget으로 변경해주기
    • 간단하게 변경하는 방법은 StatelessWidget를 선택 후 전구를 클릭 후 변경하면 쉽게 변경이 된다.
    • 그래서 StatefulWidget 한 곳에서 기존에 작성한 var a = 1로 작성하게 되면 해당 변수는 자동으로 state가 된다.
    • 다만 state는 위와 같이 기존처럼 만들 수 있지만 state를 변경하려면 setState( () {} )로 변경한다고 명시를 해줘야 한다.

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatefulWidget {
      MyApp({super.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++;
                });
                print(a);
              },
            ),
            appBar: AppBar(),
            body: ListView.builder(
                itemCount: 3,
                itemBuilder: (c,i){
                  return ListTile(
                    leading: Icon(Icons.person_pin),
                    title: Text(i.toString()),
                  );
                }
            ),
            bottomNavigationBar: BottomAppBar(),
          ),
        );
      }
    }
    
    

• 여기서 숙제
  • 숙제로 이름마다 좋아요 숫자와 버튼을 추가해서 버튼을 클릭시 변경되는 숫자를 보여주는 것을 구현하기

  import 'package:flutter/material.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatefulWidget {
    MyApp({super.key});
    @override
    State<MyApp> createState() => _MyAppState();
  }
  
  class _MyAppState extends State<MyApp> {
  
    var a = 1;
    var name = ['메시', '날강두', '홀란'];
    var cnt = [0, 0, 0];
  
    @override
    Widget build(BuildContext context) {
  
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(),
          body: ListView.builder(
              itemCount: 3,
              itemBuilder: (c,i){
                return ListTile(
                  leading: Text(cnt[i].toString()),
                  title: Text(name[i]),
                  trailing: TextButton(
                    child: Text('좋아요'),
                    onPressed: (){
                      setState(() {
                        cnt[i]++;
                      });
                    },
                  ),
                );
              }
          ),
        ),
      );
    }
  }