[flutter] StatefulWidget 만들기 | 재렌더링 가능!

import 'package:flutter/material.dart';

void main() {

  runApp( MyApp());
}

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

  var a = 1;

  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: Text(a.toString()),
          onPressed: (){
            print(a);
            a++;
          },
        ),
      )
    );
  }
}

이렇게 만들면 누를 수 있는 버튼에 숫자 1이 보임.
그러나 눌러도 1 숫자가 늘어나지 않음!, 콘솔에는 숫자 늘어나는 게 보임
-> 재렌더링을 해주면 보임

재렌더링 하는 법

• StatefulWidget을 만들어주면 된다.

stful 탭 치면 StatefulWidget 나옴

• StatefulWidget으로 바꿔주면 된다.
  StatelessWidget누르면 뜨는 전구에서 변환

State만드는 법

1. StateWidget 만들고
2. class안에 변수 만들기

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++;
            });
          },
        ),
      )
    );
  }
}

버튼 누르면 버튼 안 숫자 증가함

child: Text(a.toString()), #state쓰는 위젯 자동 재렌더링됨
onPressed: (){
  setState(() {
    a++;                   # state가 변경되면
  });

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;
  var name = ['소영', '임콩', '피자집'];

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: Text(a.toString()),
          onPressed: (){
            setState(() {
              a++;
            });
          },
        ),

        appBar: AppBar( title: Text('연락처'),),
        body: ListView.builder(
          itemCount: 3,
          itemBuilder: (c, i){
            return ListTile(
              leading: Icon(Icons.account_circle_rounded),
              title: Text(name[i]),  
            );
          },
        ),
      )
    );
  }
}

자주 바뀌는 이름을 var name = [] 리스트에 넣고
하나씩 차례대로 나오도록 해봄