[Flutter] TabBar 및 배너 아이템 만들기

 

💜 KurlyPage : HomeScreen 페이지에 들어가는 탭 중 하나! → '컬리 추천'

- KurlyBannerItem : 4개의 탭 하단에 있는 배너 슬라이드

- ListView.Builder() : '이 상품 어때요?' 하단에 있는 상품 슬라이드

  - child : ProductItem() : 슬라이드에 들어가는 하나의 아이템 (상품사진 + 이름 + 가격...)

---

탭바 구현하기 (HomeScreen)

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

  @override
  Widget build(BuildContext context) {
    List<String> categories = ["컬리추천", "신상품", "금주혜택", "알뜰쇼핑"];

    //DefaultTabController : TabBar, TabBarView, TabController 공유하는데 사용되는 상속된 위젯
    return DefaultTabController(
      //선택된 초기 index 값
      initialIndex: 0,
      length: categories.length,
      child: Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          title: Text("Kurly"),
          actions: [
            CustomActions(),
          ],
          bottom: PreferredSize(
            child: Container(
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(width: 0.3, color: Colors.grey)),
                  color: Colors.white),
              child: TabBar(
                //categories 갯수에 맞춰서 tabbar 생성
                tabs: List.generate(
                  categories.length,
                  (index) => Tab(
                    text: categories[index],
                  ),
                ),
                labelColor: kPrimaryColor,
                unselectedLabelColor: kSecondaryColor,
                labelStyle: textTheme().displayMedium?.copyWith(
                    color: kPrimaryColor, fontWeight: FontWeight.bold),
                //선택된 탭 알려주는 선
                indicator: UnderlineTabIndicator(
                  borderSide: BorderSide(width: 2, color: kPrimaryColor),
                ),
              ),
            ),
            preferredSize: Size.fromHeight(42),
          ),
        ),
        body: TabBarView(
          //DefaultTabController 위젯의 length 속성과 길이가 같아야 한다!
          children: [
            KurlyPage(),
            NewProductPage(),
            BenefitPage(),
            ThriftyShoppingPage()
          ],
        ),
      ),
    );
  }
}

 

* TabController vs DefaultTabController

https://api.flutter.dev/flutter/material/DefaultTabController-class.html

 

TabController : 하위 위젯을 명시적으로 지정하지 않는 탭 컨트롤러

↕

DefaultTabController : TabBar, TabBarView, TabController 를 공유하는데 사용되는 상속된 위젯

TabBar 위젯들은 stateless 위젯이나 각기 다른 부모 위젯으로부터 생성되기 때문에,
명시적으로 만들어진 TabController를 공유하는 것이 편하지 않을 때 사용된다.

---

KurlyBannerItem

유저가 화면을 넘김에 따라 표시되는 화면이 다르기 때문에 Stateful Widget 이다!

 

* PageView.builder() 로 좌우로 넘기는 슬라이더를 만들어 준다.

이미지 위에 각각에 해당하는 텍스트가 위로 올라가는 것이기 때문에 

Stack 안에 이미지와 텍스트를 담아준다.

 

setState() : onPageChange 에 걸린다. (화면이 바뀜에 따라 currentPage = value; )

 

* NumberIndicator : 배너의 우측 하단에 있는 페이지 표시기도 따로 컴포넌트로 빼주었다.

(ex. 5/6 --> "$currentPage / $length")

---

 

ListView.builder 를 사용해서 아이템들을 뿌릴 수 있고,

Axis.horizontal 로 좌/우로 오갈 수 있는 슬라이더를 만들었다.

 

(주로 좌/우인 슬라이더를 만들때 PageView 를 사용하고,

상/하 슬라이더를 만들때 ListView 를 사용하는 줄 알았는데 

 

뭔가 100% 방향의 문제는 아니고 아이템 활용 및 레이아웃..?의 문제같다. 

gpt한테 물어봤는데도 감이 뽝 오진 않음..🤔)

 

child 에 아이템 세부 사항 (사진 + 상품명 + 가격...) 이 들어간

ProductItem 을 넣으면 끝!

---