플러터 2기 2주차 주간회고

2주차

1. 기간

• 2023-11-15 ~ 2023-11-21

2. 요약

• 코드의 모듈화(modularization), 코드 분할(Splitting)
• main.dart에 모든 코드를 넣지 않고, Widget class를 생성하여 반복을 줄이고 재사용성 높일 것

3. 목표

• Flutter로 웹툰 앱 만들기 전체 복습
• 코드의 모듈화, 분할을 위한 리팩토링

4. 결과

• 참고 자료 : DaehunGwak/flutter-playground/ui_clone
• BEFORE : UI_CLONE 챌린지 소스 코드 최초 버전
• AFTER : UI CLONE 챌린지 소스 코드 리팩토링 버전
• 에뮬레이터 캡쳐 : imgur

5. 개선사항

• 폴더 구조
  

• calendar_widget.dart와 card_widgets로 크게 분할하였다.

• card_widgets 내부에 총 5개의 하위 widget을 구성하였다.

• main.dart

import 'package:flutter/material.dart';
import 'package:ui_clone/widgets/calendar_widget.dart';
import 'package:ui_clone/widgets/card_widgets/card_container_column_widget.dart';

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

class PlannerApp extends StatelessWidget {
  const PlannerApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PlannerApp',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.black,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.black,
          leading: IconButton(
            icon: const CircleAvatar(
              radius: 40.0,
              backgroundImage: AssetImage('assets/images/nico.jpg'),
            ),
            onPressed: () {},
          ),
          actions: [
            IconButton(
              onPressed: () {},
              icon: const Icon(
                Icons.add,
                color: Colors.white,
                size: 30,
              ),
            ),
          ],
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Column(
              children: [
              // for문으로 16일부터 31일까지 날짜를 매개변수로 보냄
                CalendarWidget('MONDAY 16',
                    dates: [for (int i = 16; i <= 31; i++) i]),
              
              // 3개의 CardContainer가 있는 별도의 ColumnWidget을 생성
                const CardContainerColumnWidget(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

• calendar_widget.dart : SingleChildScrollView - scrollDirection: Axis.horizonal을 사용하여 스크롤뷰 개선

import 'package:flutter/material.dart';

class CalendarWidget extends StatelessWidget {
  final String today;
  final List<int> dates;

  const CalendarWidget(
    this.today, {
    super.key,
    required this.dates,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(
          height: 15.0,
        ),
        Text(
          today,
          style: const TextStyle(
            color: Colors.white70,
            fontSize: 15.0,
            fontWeight: FontWeight.w500,
          ),
        ),
        const SizedBox(
          height: 5.0,
        ),
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              const Text(
                'TODAY',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 40.0,
                  fontWeight: FontWeight.w400,
                ),
              ),
              const SizedBox(width: 10),
              Container(
                width: 12.0,
                height: 12.0,
                decoration: const BoxDecoration(
                  color: Colors.red,
                  shape: BoxShape.circle,
                ),
              ),
              Row(
                children: [
                  ...dates.map(
                    (date) => Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 15.0), // 좌우 간격 조정
                      child: Text(
                        '$date', // 날짜를 문자열로 변환
                        style: const TextStyle(
                          color: Colors.white54,
                          fontSize: 40.0,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }
}

• card_container_column_widget.dart : 총 3개의 CardContainer을 하위 Widget으로 생성

import 'package:flutter/material.dart';
import 'package:ui_clone/widgets/card_widgets/card_container_widget.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.symmetric(horizontal: 10),
      child: Column(
        children: [
          CardContainerWidget(
            bgColor: Colors.yellowAccent,
            time: [
              '11',
              '30',
              '12',
              '20',
            ],
            schedule: 'DESIGN\nMEETING',
            members: [
              'ALEX',
              'HELENA',
              'NANA',
            ],
          ),
          SizedBox(height: 20.0),
          CardContainerWidget(
            bgColor: Colors.pinkAccent,
            time: [
              '13',
              '00',
              '14',
              '00',
            ],
            schedule: 'LUNCH\nBREAK',
            members: [
              'NICO',
              'LYNN',
              'JOE',
            ],
          ),
          SizedBox(height: 20.0),
          CardContainerWidget(
            bgColor: Colors.tealAccent,
            time: [
              '14',
              '00',
              '15',
              '00',
            ],
            schedule: 'NOMAD\nCHALLENGE',
            members: [
              'JOE',
              'DEVIL',
              'NICO',
            ],
          ),
        ],
      ),
    );
  }
}

• card_container_widget.dart : 총 4개의 멤버 변수(bgColor, time, schedule, members)

import 'package:flutter/material.dart';
import 'package:ui_clone/widgets/card_widgets/card_members_widget.dart';
import 'package:ui_clone/widgets/card_widgets/card_schedule_widget.dart';
import 'package:ui_clone/widgets/card_widgets/card_time_widget.dart';

class CardContainerWidget extends StatelessWidget {
  final Color bgColor;
  final List<String> time;
  final String schedule;
  final List<String> members;

  const CardContainerWidget({
    super.key,
    required this.bgColor,
    required this.time,
    required this.schedule,
    required this.members,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      clipBehavior: Clip.hardEdge,
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height * 0.25,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.0),
        color: bgColor,
      ),
      child: Column(
        children: [
          const SizedBox(
            height: 20.0,
          ),
          Row(
            children: [
              CardTimeWidget(
                time: time,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  CardScheduleWidget(
                    schedule: schedule,
                  ),
                  CardMembersWidget(
                    members: members,
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

• card_time_widget.dart : 시간 표시할 때 VerticalDivider 대신 ' | ' 사용

import 'package:flutter/material.dart';

class CardTimeWidget extends StatelessWidget {
  final List<String> time;

  const CardTimeWidget({
    super.key,
    required this.time,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: 10.0,
      ),
      child: Column(
        children: [
          Text(
            time[0],
            style: const TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 25.0,
            ),
          ),
          Text(
            time[1],
            style: const TextStyle(
              fontSize: 15.0,
            ),
          ),
          const Text(
            '|',
            style: TextStyle(
              fontSize: 15,
            ),
          ),
          Text(
            time[2],
            style: const TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 25.0,
            ),
          ),
          Text(
            time[3],
            style: const TextStyle(
              fontSize: 15.0,
            ),
          ),
        ],
      ),
    );
  }
}

• card_schedule.dart

import 'package:flutter/material.dart';

class CardScheduleWidget extends StatelessWidget {
  final String schedule;

  const CardScheduleWidget({
    super.key,
    required this.schedule,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          schedule,
          style: const TextStyle(
            fontWeight: FontWeight.w700,
            fontSize: 50.0,
          ),
        ),
      ],
    );
  }
}

• card_members.dart

import 'package:flutter/material.dart';

class CardMembersWidget extends StatelessWidget {
  final List<String> members;

  const CardMembersWidget({super.key, required this.members});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: members
          .map((member) => [
                Text(
                  member,
                  style: const TextStyle(
                    color: Colors.black38,
                  ),
                ),
                const SizedBox(width: 20.0), // 각 멤버 사이의 간격
              ])
          .expand((element) => element) // 리스트를 평탄화
          .toList(),
    );
  }
}

6. 총평

• Widget을 추출하고 멤버 변수를 설정하는 연습을 할 수 있었다.
• 코드의 가독성 향상과 재사용성을 위하여 코드 분할은 필수적이므로 차후에도 연습할 것
• 나의 가능성을 낮추지 말자. 육아를 한다고 해서 코딩할 시간이 줄어드는 것은 아니다. 다른 사람들도 마찬가지로 업무 등 이유로 바쁘다.
• 육퇴 후 불끄고 누워서 유튜브 보는 행동 금지. 바로 책상에 앉아 코어타임 활용하여 코딩할 것.
• 노마드코더 회원 분의 익스텐션(Distraction Detox)을 활용하여 유튜브 차단(리디렉션)하여 집중 유지할 것