Flutter Day 9-2: carrot market app (6)

1. 기본 흐름

1. 데이터 모델링
   • 앱에서 다룰 데이터를 정의하고 샘플 데이터를 생성합니다.
   • class를 사용해 데이터를 체계적으로 관리합니다.
2. UI 위젯 설계
   • StatelessWidget: 변경되지 않는 고정 UI를 설계.
   • StatefulWidget: 사용자 상호작용에 따라 변경되는 UI를 설계.
3. 반복적인 UI 생성
   • 리스트 데이터를 사용해 동적으로 UI를 생성합니다.
   • ListView.builder 또는 List.generate를 활용.
4. 페이지 전환 및 네비게이션 구현
   • Navigator 또는 BottomNavigationBar로 화면 이동을 관리.

---

2. 주요 개념 설명

2.1 List.generate: 반복 UI 생성

Flutter에서 동일한 구조의 UI를 반복적으로 생성해야 할 때 사용하는 방법입니다.

주요 특징

• 정적 데이터 반복 생성에 적합.
• List.generate는 리스트의 크기를 지정하고, 각 인덱스별로 항목을 생성.

코드 예제: 간단한 반복 UI

List.generate(5, (index) {
  return ListTile(
    leading: Icon(Icons.star),
    title: Text('아이템 $index'),
  );
});

설명

• 첫 번째 매개변수: 생성할 항목 수 (5 → 5개의 항목 생성).
• 두 번째 매개변수: 각 인덱스별 생성 함수.

활용 예제: 동네생활 메뉴

class CardIconMenu extends StatelessWidget {
  final List<IconMenu> iconMenuList;

  const CardIconMenu({required this.iconMenuList});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 0.5,
      margin: EdgeInsets.zero,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: List.generate(
            iconMenuList.length,
            (index) => ListTile(
              leading: Icon(iconMenuList[index].iconData),
              title: Text(iconMenuList[index].title),
            ),
          ),
        ),
      ),
    );
  }
}

---

2.2 ListView.builder: 동적 리스트 생성

ListView.builder는 데이터가 많거나 동적으로 생성될 때 사용합니다.

주요 특징

• 성능 최적화: 필요한 위젯만 화면에 렌더링.
• 데이터가 많을 때 적합.

코드 예제

ListView.builder(
  itemCount: chatMessageList.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(
        backgroundImage: NetworkImage(chatMessageList[index].profileImage),
      ),
      title: Text(chatMessageList[index].sender),
      subtitle: Text(chatMessageList[index].message),
    );
  },
);

---

2.3 재사용 가능한 컴포넌트 설계

Flutter에서는 StatelessWidget을 사용해 반복적인 UI를 재사용 가능하게 설계할 수 있습니다.
이는 유지보수성과 코드 가독성을 크게 향상시킵니다.

예제: 사용자 프로필 카드

class ProfileCard extends StatelessWidget {
  final String name;
  final String imageUrl;

  const ProfileCard({
    required this.name,
    required this.imageUrl,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(30),
          child: Image.network(
            imageUrl,
            width: 60,
            height: 60,
            fit: BoxFit.cover,
          ),
        ),
        const SizedBox(width: 16),
        Text(name, style: Theme.of(context).textTheme.headline6),
      ],
    );
  }
}

활용

ProfileCard(
  name: '홍길동',
  imageUrl: 'https://picsum.photos/200',
);

---

2.4 Navigator와 페이지 전환

Flutter 앱에서 페이지 전환은 Navigator를 사용합니다.

기본 사용법

1. 새로운 페이지로 이동

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

1. 페이지 닫기

Navigator.pop(context);

예제: 네비게이션 구현

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('홈 화면')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('다음 페이지로 이동'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('두 번째 화면')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('뒤로 가기'),
        ),
      ),
    );
  }
}

 

 

---

3. '나의 당근' 앱 완성 코드 예제

3.1 데이터 모델 설계

class IconMenu {
  final String title;
  final IconData iconData;

  IconMenu({required this.title, required this.iconData});
}

final List<IconMenu> iconMenuList = [
  IconMenu(title: '내 동네 설정', iconData: Icons.location_on),
  IconMenu(title: '키워드 알림', iconData: Icons.notifications),
];

---

3.2 앱 전체 UI 구성

class MyCarrotPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('나의 당근'),
      ),
      body: ListView(
        children: [
          CardIconMenu(iconMenuList: iconMenuList), // 동네 설정 메뉴
          // 다른 컴포넌트 추가 가능
        ],
      ),
    );
  }
}

---

4. 결론: Flutter 앱 개발의 핵심 요약

1. 데이터 모델링: class로 데이터를 체계적으로 관리.
2. 반복적인 UI 생성: List.generate, ListView.builder로 효율적으로 구현.
3. 재사용 가능한 컴포넌트: StatelessWidget을 설계해 유지보수성 향상.
4. 네비게이션: Navigator로 페이지 전환을 간단히 관리.

Flutter의 유연성과 재사용성을 적극 활용해 더 나은 앱을 만들어 보세요!