[TIL] flutter - TaskApp

김영광·2025년 12월 18일

과제를 오늘 다 끝낼 수 있을 줄 알았지만,, 공부를 하면서 하니 생각보다 양이 많아졌다.
내일은 조금 더 집중해서 많은 양을 배워갈 수 있도록 해야겠다.

🔎 기본화면 HomePage 구현

📖 HomePage

// first Page - HomePage
class HomePage extends StatelessWidget {
  const HomePage({super.key, required this.name});

  // 사용자 이름
  final String name;

  // btn onClick
  void addTodo(BuildContext context) {
    showModalBottomSheet<void>(
      
      useSafeArea: true,
      context: context,
      builder: (BuildContext context) {
        return BottomSheetAddToDo();
      },
    );
  }

  // Scaffold
  @override
  Widget build(BuildContext context) {
    bool isNot = Provider.of<TodoProvider>(context).todoList.isEmpty;

    return Scaffold(
      appBar: AppBar(
        title: Text(
          "$name's Tasks",
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
      ),
      body: isNot ? InitailPage(name: name) : TaskPage(),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.cyan,
        shape: CircleBorder(),
        onPressed: () {
          addTodo(context);
        },
        child: Icon(Icons.add, color: Colors.white, size: 24),
      ),
    );
  }
}

Provider library를 이용해 TODO 상태관리를 시도했다.
HomePage는 초기 Task가 없을 때, Initial Page와 Task가 존재할 때안 TaskPage로 분기처리했다.

해당 화면을 구현하며 알게된 점

floatingActionButton의 CircleBodrer()는 바로 button의 모양을 원모양으로 바로 바꿔준다.
Provider.of를 통해 최상단의 Provider를 접근할 수 있고, 데이터를 사용할 수 있다.(watch, read는 다르게 직접 객체에 접근한다.)

조금 더 공부해야 할 부분

cupertinoAppBar vs MaterialAppBar
Scaffold AppBar Type : PrefferedSizeWidget

📖 InitialPage

// initial Page, No Data
class InitailPage extends StatelessWidget {
  const InitailPage({super.key, required this.name});

  final String name;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.all(20),
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        color: Colors.white,
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        spacing: 12,
        children: [
          Icon(Icons.task_outlined, size: 100, color: Colors.orange),
          Text(
            "아직 할 일이 없음",
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: Theme.of(context).dividerColor,
            ),
          ),
          Text(
            "할 일을 추가하고 $name's Tasks에서 할 일을 추적하세요.",
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.bold,
              height: 1.5,
              color: Theme.of(context).dividerColor,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}

Provider로부터 빈 리스트를 받을 때를 구현했다.
해당 Page는 ui 구성 시, 상태를 관리할 Widget의 상태가 없어서 금방 할 수 있었다.

📖 TaskPage

// Provider has Data
class TaskPage extends StatelessWidget {
  const TaskPage({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: Provider.of<TodoProvider>(context).todoList.length,
      itemBuilder: (context, index) => Placeholder(),
    );
  }
}