[Flutter] Tab menu 구현

Tab menu 구현

main.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.white,
        appBarTheme: AppBarTheme(
          iconTheme: IconThemeData(color: kColor1),
        ),
      ),
      home: Profile(),
    );
  }
}

// TabController 객체를 멤버로 만들어서 상태를 유지하기 때문에 StatefulWidget 클래스 사용
class Profile extends StatefulWidget {
  @override
  _ProfileState createState() => _ProfileState();
}

// SingleTickerProviderStateMixin 클래스는 애니메이션을 처리하기 위한 헬퍼 클래스
// 상속에 포함시키지 않으면 탭바 컨트롤러를 생성할 수 없다.
// mixin은 다중 상속에서 코드를 재사용하기 위한 한 가지 방법으로 with 키워드와 함께 사용
class _ProfileState extends State<Profile> with SingleTickerProviderStateMixin {
//tab controller 생성
  late TabController _tabController;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //tabcontroller 초기화
    //vsync에 this를 넣기위해 initState안에서 초기화
    _tabController = new TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Column(
          children: [
            TabBar(
              controller: _tabController,
              tabs: [
              	//첫번째 tab menu
                Tab(icon: Icon(Icons.directions_car)),
              	//두번째 tab menu               
                Tab(icon: Icon(Icons.directions_transit)),
              ],
            ),
            Expanded(
              child: TabBarView(
                controller: _tabController,
                //tab content
                children: [
                  // 첫번째 tab menu content
                  GridView.builder(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      crossAxisSpacing: 10,
                    ),
                    itemBuilder: (context, index) {
                      return Image.network(
                          "https://picsum.photos/id/${index + 1}/200/200");
                    },
                  ),
                  // 두번째 tab menu content
                  Image.asset("assets/tab1.jpeg"),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

참고

https://www.youtube.com/watch?v=8B2uPE4lSeE&list=PL93mKxaRDidG6CYF5M_RbOXGkAGLtM_Ct&index=8