[Flutter/Dart] 팀 소개 어플 만들기(1) : 기초 틀 작업, ListView

개발자되기 1일차 이거.. 보통아이요

 

미쳤다 ... 드디어 시작...

일 관둔지 이틀만에 개발자 걸음마 시작...

 

일단 나는 비전공자다.

그래도 소싯적 학교에서 C언어도 해보고, 두번째 직장에서 파이썬도 손대봤다.

 

본 부트캠프를 시작하기 전에 앱개발 종합반 강의를 들었는데, 난 진짜 생초짜였다.

오늘 새벽까지 4주차를 완강하고(5주차는 남았음 ㅠㅠ) 본 강의를 들었는데 새벽까지 안들었으면 큰일날뻔했다.

 

각설하고,,,,

오늘 오티부터 시작했는데 뭔가 웅장한 떨림이 느껴졌다.

나도 이제 개발자가 될꺼야!!!

 

통상적인 절차나 강의 진행 방식에 대해 튜터님께서 설명해주시고 팀을 배정받았다.

다들 3주차 이상은 들으셔서 팀소개 프로젝트를 짜기로 했다.

 

오늘은 팀소개 프로젝트에서 각자 어떤 역할을 맡을지 구체적으로 정하기가 어려워서 만든 와이어프레임대로 각자 코드를 짜봤다.

 

일단 앱개발 종합반 강의 숙제를 응용해보기로 했다.

당근마켓 페이지 만들기가 가장 적절해보여 많이 땡겨썼다^^..

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

// 홈 페이지

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

  @override
  Widget build(BuildContext context) {
    final List<String> images = [
      'https://geojecci.korcham.net/images/no-image01.gif',
      'https://geojecci.korcham.net/images/no-image01.gif',
      'https://geojecci.korcham.net/images/no-image01.gif',
      'https://geojecci.korcham.net/images/no-image01.gif',
    ];
    return Scaffold(
      appBar: AppBar(
        title: Text("E1I4(이하나와 아이들)"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child: ListView.separated(
          itemCount: images.length,
          itemBuilder: (context, index) {
            return Feed();
          },
          separatorBuilder: (context, index) {
            return Divider();
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(10), // 사진 테두리 둥글게
          child: Image.network(
            'https://geojecci.korcham.net/images/no-image01.gif', // 이미지 없는 경우
            width: 130,
            height: 130,
            fit: BoxFit.cover, // 위에 가로세로(Box)에 맞춤, 나머지 자르기
          ),
        ),
        SizedBox(width: 12),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'ㅇㅇㅇ',
                style: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
                softWrap: false,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
              SizedBox(
                height: 2,
              ),
              Text(
                'INTP',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.grey,
                ),
                softWrap: false,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
              SizedBox(
                height: 2,
              ),
              Text(
                '공부는 마라톤',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.grey,
                ),
                softWrap: false,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
              Row(
                children: [
                  Spacer(),
                  Text(
                    '팀장',
                    style: TextStyle(color: Colors.black54),
                  ),
                ],
              )
            ],
          ),
        ),
      ],
    );
  }
}

 

일단 이렇게 만들긴 했는데, 잘못 만들었다.ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

원래는 appBar 하단에 TextField를 추가했었어야 했는데, 까먹고 냅다 ListView 먼저 갈겨버린...

 

근데 지금 저 코드에 텍스트 넣어보면 자꾸 안되서.. 다시 짤까 싶다.

그리고 팀원이 총 5명인데 List 로 만들어서 내용 넣고 싶은데 어떻게 해야하는지 몰라서 한명만 5번 반복되버렸다...ㅠ

 

코드 리뷰를 다같이 하고 뭔가 합치면 금방 완성될거같은 느낌이 왔는데

Github 땡겨오고 편집하는거 해보다가 빨간줄(ERROR)만 겁나 보곸ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ........

 

오늘 뭐 한거 없는거같은데 벌써 시간이 다 지나서 내일은 진짜 정신 바짝 차리고 코드 수정해야겠다.

개발일지도 구체적으로 잘 써야하는데 지금은 오류 찾기도 급급하다 ㅠㅠ 

진짜 어렵지만... 난 끝까지 살아남을거야..!