[노마드코더: Flutter 로 웹툰 앱 만들기] #4.0 State

Stateless는 데이터가 없는 것

Statefull은 반대로 데이터를 갖고 사용할 수 있는 것

State of the widget is where we put the data

data/ui를 

data가 변하면 ui of the widget changes as well 

 

입력한 숫자를 Text로 받을 때

Text('$counter'),

 

State.. 

클릭했을 때 숫자가 올라가는 기능을 만들어본다

import 'package:flutter/material.dart';

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

class App extends StatefulWidget {
  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  int counter = 0;
  void onClicked() {
    counter += counter;
  }

//UI 위젯을 담고 있는 State의 변경된 var를 참고한다.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: const Color(0xFFF4EDDB),
        body: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Click count',
              style: TextStyle(fontSize: 30),
            ),
            Text(
              '$counter',
              style: const TextStyle(fontSize: 30),
            ),
            IconButton(
              onPressed: onClicked,
              icon: const Icon(Icons.add_box_rounded),
              iconSize: 40,
            )
          ],
        )),
      ),
    );
  }
}