[개발글쓰기 6일차] 와이어 프레임 작성하기 - 2 (설계 및 구현 계획 짜기)

오늘 작성할 와이어 프레임이다.

구현 설계

selectedTaskProvider 를 통해 선택된 taskEntity를 전달하여 선택된 task 의 정보를 페이지에 노출시키자한다.

GPT 에게 물어보기

1. selectedTaskProvider 구성하기

final selectedTaskProvider = StateProvider<TaskEntity?>((ref) => null);

class TaskSelectorWidget extends ConsumerWidget {
  final List<TaskEntity> tasks;

  TaskSelectorWidget({Key? key, required this.tasks}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return ListView.builder(
      itemCount: tasks.length,
      itemBuilder: (context, index) {
        final task = tasks[index];
        return ListTile(
          title: Text(task.title),
          onTap: () {
            // 선택된 task를 selectedTaskProvider에 저장
            ref.read(selectedTaskProvider.notifier).state = task;
            Navigator.pushNamed(context, '/taskDetails');
          },
        );
      },
    );
  }
}

3. 선택된 task 정보를 나타나게 표시

class TaskDetailsPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final task = ref.watch(selectedTaskProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text(task?.title ?? 'Task Details'),
      ),
      body: task == null
          ? Center(child: Text('No task selected.'))
          : Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('Title: ${task.title}', style: TextStyle(fontSize: 24)),
                  SizedBox(height: 8),
                  Text('Description: ${task.description}', style: TextStyle(fontSize: 18)),
                ],
              ),
            ),
    );
  }
}

provider 을 통해서 정보를 받아오고 그 정보를 하위 컴포넌트에게 전달하여 페이지를 표현하고자 하였다.

구현 과정

1. provider 설계

final selectedTaskProvider = StateProvider<TaskEntity?>((ref) => null);

사실 StateProvider 을 사용할 때 원래 있는 문법을 사용하는 것으로 고민하였다, 하지만 구현의 편함 그리고 새로운 문법의 경험을 위하여
일단 먼저 StateProvider 을 사용해보고 구현이 되는 것을 확인이 되었을 때 Notifier 로 번경해보자고 생각했다.

2. 와이어 프레임 작성

• 컴포넌트 나누기
  Head: 담장자, 수정, 삭제 부분 쪽
  Content: 글의 내용
  Comment: 댓글 , 답글 (if 답글 -> 답글 버튼 X)