[플러터] 14. Wrap, ListTile, InkWell

1. Wrap

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            child: Text("Wrap", style: TextStyle(fontSize: 50)),
          ),
          Wrap(
            children: [
              Icon(Icons.person, size: 50),
              Icon(Icons.person, size: 50),
              Icon(Icons.person, size: 50),
              Icon(Icons.person, size: 50),
              Icon(Icons.person, size: 50),
              Icon(Icons.person, size: 50),
              Icon(Icons.person, size: 50),
              Icon(Icons.person, size: 50),
              Icon(Icons.person, size: 50),
              Icon(Icons.person, size: 50),
              Icon(Icons.person, size: 50),
            ],
          ),
        ],
      ),
    );
  }
}

• Wrap 위젯은 Flutter에서 자식 위젯들을 수평 또는 수직 방향으로 배치하고, 화면 공간을 초과하면 자동으로 줄바꿈하는 데 사용됩니다.

• Row와 Column과 유사하지만, 줄바꿈 기능이 추가된 것이 특징입니다.

2. ListTile, InkWell

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          InkWell(
            onTap: () {
              print("클릭됨");
            },
            child: ListTile(
              leading: Icon(Icons.person),
              title: Text("제목111111"),
              subtitle: Text("내용......"),
              trailing: Icon(Icons.add),
            ),
          ),
        ],
      ),
    );
  }
}

• ListTile은 Flutter에서 간편하게 리스트 아이템을 만들 수 있도록 도와주는 위젯입니다.
• 아이콘, 텍스트, 서브 텍스트, 아이콘을 포함한 항목을 구성할 수 있습니다. ListTile은 주로 ListView나 Column 위젯 내에서 사용됩니다.

• InkWell은 터치 가능한 영역을 만들어주는 위젯입니다.
• 사용자가 터치할 때 리플 효과를 제공하며, 다양한 제스처를 감지할 수 있습니다.
• 일반적으로 버튼이나 기타 터치 가능한 영역을 만들 때 사용됩니다.

BottomNavigationBar

// dependencies에 추가
google_fonts: ^6.1.0
font_awesome_flutter: ^10.5.0
intl: ^0.18.1

class MainHolder extends StatefulWidget {
  @override
  State<MainHolder> createState() => _MainHolderState();
}

class _MainHolderState extends State<MainHolder> {
  // 1. 상태
  int selectedIndex = 0;

  // 2. 행위, onTap보다 여기에 적는 것을 추천
  void onClickBottomNavigation(int value) {
    selectedIndex = value;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: selectedIndex, // 0번이 최초 화면, 화면 전환 시 숫자 변경
        children: [
          HomeScreen(),
          NeighborhoodLifeScreen(),
          NearMeScreen(),
          ChattingScreen(),
          MyCarrotScreen(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: selectedIndex, // 위의 index와 똑같이 설정해야 함
          onTap: (value) {
            // value가 현재 index?
            onClickBottomNavigation(value);
          },
          items: [
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), label: ""),
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.square_on_square), label: ""),
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.placemark), label: ""),
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.chat_bubble_2), label: ""),
            BottomNavigationBarItem(icon: Icon(CupertinoIcons.person), label: ""),
          ]),
    );
  }
}

• 화면 전환을 위해 StatefulWidget으로 변경했습니다.

• onTap: (value)
• value 값은 items에서 선택된 아이템의 인덱스 번호입니다.

ThemeData theme() {
  return ThemeData(
    scaffoldBackgroundColor: Colors.white,
    bottomNavigationBarTheme: BottomNavigationBarThemeData(
      // label 안 보이게 설정
      showSelectedLabels: false,
      showUnselectedLabels: false,

      // 적용 x -> type fixed 설정이 필요
      backgroundColor: Colors.white,

      // 애니메이션 삭제
      type: BottomNavigationBarType.fixed,

      // 아이콘 색 설정
      selectedItemColor: Colors.orange,
      unselectedItemColor: Colors.black54,
    ),
    primarySwatch: Colors.orange, // primarySwatch -> 앱의 대표 컬러
  );
}

• MaterialApp에서 theme 설정이 가능합니다.

• primarySwatch
• MaterialColor 타입의 값을 받아서 앱의 주요 색상으로 사용됩니다.

• BottomNavigationBarType.fixed
• BottomNavigationBar에 적용된 애니메이션을 없애줍니다.
• type 설정을 해두지 않을 경우 BottomNavigationBarType.shifting로 되어있는데 이럴 경우 아이템 별로 색상을 지정해야 하기 때문에 backgroundColor가 적용되지 않습니다.