기본 앱

FLUTTER Project를 생성하면 처음으로 세팅 되어있는 기본 앱을 살짝 변형함

먼저 floatingActionButton을 +,- 두 개의 버튼으로 만들기 위해 Row() 위젯으로 감싸줌
+버튼이 눌리면 value의 값을 1씩 올리고 -버튼이 눌리면 value의 값을 -1씩 하게됨

floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          InkWell(
            onTap: () {
              setState(() {
                value++;
              });
            },
            child: Container(
              width: 60,
              height: 60,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(80), color: Colors.teal),
              child: const Center(
                  child: Text(
                '+',
                style: TextStyle(fontSize: 40, color: Colors.white),
              )),
            ),
          ),
          const SizedBox(width: 10),
          InkWell(
            onTap: () {
              setState(() {
                value--;
              });
            },
            child: Container(
              width: 60,
              height: 60,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(80), color: Colors.teal),
              child: const Center(
                  child: Text(
                '-',
                style: TextStyle(fontSize: 40, color: Colors.white),
              )),
            ),
          ),
        ],
      ),

int value의 값은 @override 위에서 0으로 초기화 해주어야 함.

class _VelogWidgetBasicMainPageState extends State<VelogWidgetBasicMainPage> {
  int value = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(

StatefulWidget으로 생성된 widget은 onTap의 function안에서 setState를 넣어서 만들어야 state의 변경을 할 수 있음

body 부분에 결과값을 보여주기 위해 value.toString()으로 해주어야 함
value는 int 값으로 선언 하였으므로 .toString()함

refresh icon을 InkWell()위젯으로 감싸서 tap 기능을 사용할 수 있게 해준다음 onTap이
눌렸을 때 value를 0으로 초기화 함

body: Center(
          child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text(
            'value : ${value.toString()}',
            style: const TextStyle(
              fontSize: 30,
            ),
          ),
          InkWell(
            onTap: () {
              setState(() {
                value = 0;
              });
            },
            child: const Icon(
              Icons.refresh_outlined,
              size: 30,
            ),
          ),
        ],
      )),

Example