[Flutter]To Do List 후기

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    const String appTitle = 'Flutter layout demo';
    return MaterialApp(
      title: appTitle,
      home: MyToDo(),
    );
  }
}

class MyToDo extends StatefulWidget {
  const MyToDo({super.key});

  @override
  State<MyToDo> createState() => _MyToDoState();
}

class _MyToDoState extends State<MyToDo> {
  final TextEditingController _controller = TextEditingController();
  var widgets = <Widget>[];
  @override //IDK
  initState(){
    widgets=[AddWidgets()];
    super.initState();
    
  }


  Widget AddWidgets(){
    return Padding(
        padding: const EdgeInsets.all(20.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          spacing: 50.0,
          children: [
            Icon(
              Icons.calendar_today,
              size: 30.0,
            ),
            SizedBox(
              width: 250,
              child: TextFormField(
                controller: _controller,
                decoration: const InputDecoration(
                  hintText: 'What is your Task?',
                  labelText: 'Enter your Task',
                ),
              ),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  widgets.add(
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
          children: [
            MyButton(),
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: Text(_controller.text),
            )
          ],
        ));
                });
              },
              child: Text('Add Task'),
            ),
          ],
        ));
  }

  Widget getbody(){
   return Column(children:
      widgets,
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Woomin ToDO"),
      ),
      body: Center(
        child: Column(
          children: [
            
            getbody()
          ],
        ),
      ),
    );
  }
}


class MyRow extends StatelessWidget {
  const MyRow({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    var children = <Widget>[];
    children.add(Text(""));
    return Row(
      children: children,
    );
  }
}

class MyButton extends StatefulWidget {
  const MyButton({super.key});

  @override
  State<MyButton> createState() => _MyCounterState();
}

class _MyCounterState extends State<MyButton> {
  bool initValue = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Checkbox(
          value: initValue,
          onChanged: (bool? newValue) {
            setState(() {
              initValue = !initValue;
            });
          },
        ),
      ],
    );
  }
}

만들어보고싶은게 많아서 플러터로 앱같은거 만들어 보고 싶어서 몇일째 공식문서만 보다가 마참내 플러터로 투두 리스트 만들어 보기로 했다.

가장 힘들었던건 동적으로 위젯을 생성하는것이 였는데 다행히도 컨트롤러의 개념과
https://stackoverflow.com/questions/68274886/adding-widgets-dynamically-with-flutter
이 글 을 보고 해결되었다.
근데 문제는 어떻게 작동되는지 잘 모르겠다.

1. class를 써야되는 경우랑 widget만 써도 되는경우

Flutter에서 클래스를 써야 하는 경우와 단순 위젯만 써도 되는 경우는 상황에 따라 다릅니다.
1. 클래스를 써야 하는 경우
📌 재사용이 필요한 위젯
같은 UI 요소를 여러 곳에서 반복적으로 사용할 때
같은 스타일과 동작을 유지하면서, 일부 속성만 변경하고 싶을 때
예제: MyButton, MyRow
📌 상태(StatefulWidget)가 필요한 경우
내부적으로 상태를 변경해야 하는 경우 (예: 체크박스, 버튼 클릭 시 변화)
StatefulWidget을 사용하여 setState()를 통해 UI를 갱신할 필요가 있을 때
예제: MyButton (체크박스의 상태 변경을 위해 StatefulWidget 필요)
📌 규모가 커지는 위젯
코드가 길어지고 복잡해질 경우 유지보수를 위해 클래스로 분리하는 것이 좋음
2. 단순한 위젯만 써도 되는 경우
📌 일회성으로 사용되는 위젯
특정 화면에서만 사용되며 재사용될 필요가 없을 때
예제: AddWidgets() 함수 (이건 단순히 위젯을 반환하는 역할이므로 함수로 충분함)
📌 상태 관리가 필요 없는 정적인 UI 요소
내부적으로 변경되지 않는 경우
단순히 레이아웃을 구성하는 경우
예제: MyRow는 사실 const Row()로도 충분함

2.initstate()는 무슨 코드임

initState()란?
initState()는 StatefulWidget에서 위젯이 처음 생성될 때 한 번만 실행되는 메서드입니다.
즉, 위젯이 화면에 나타나기 전에 초기화해야 할 작업을 수행하는 곳이에요.