setState

1. React의 setState와 유사한 개념

 

StatefulWidget으로 class설정 후, 다른 class로 연결해주는 식이다. 

 

react와 마찬가지로 setState에 상태값을 넣어둬야 다시 코드를 새로고침해서 화면에 반영해준다.

 

import 'package:flutter/material.dart';

void main() {

  runApp(const App());

}

class App extends StatefulWidget {

  const App({super.key});

  @override

  State<App> createState() => _AppState();

}

class _AppState extends State<App> {

  var numbers = [];

  void onClicked() {

    setState(() {

      numbers.add(numbers.length);

    });

  }

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        home: Scaffold(

            backgroundColor: const Color(0xFFF4EDDB),

            body: Center(

              child: Column(

                mainAxisAlignment: MainAxisAlignment.center,

                children: [

                  const Text(

                    "Click Counter",

                    style: TextStyle(fontSize: 30),

                  ),

                  for (var n in numbers) Text('$n'),

                  IconButton(

                    iconSize: 40,

                    onPressed: onClicked,

                    icon: const Icon(Icons.add_box_rounded),

                  ),

                ],

              ),

            )));

  }

}

 

아래는 화면 구현 화면. + 누를떄마다 숫자가 1씩 늘어남.