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

Oni·2023년 8월 31일

TIL dart flutter iOS 개발일지 내일배움캠프

TIL

목록 보기

2/47

티스토리 오류로 블로그 포스팅 옮기는 중 - 원문 포스팅 🔗

개발자되기 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),
                  ),
                ],
              )
            ],
          ),
        ),
      ],
    );
  }
}