part of '../pages.dart';

class LabeledTabPage extends StatefulWidget {
  const LabeledTabPage({ Key? key }) : super(key: key);
  static const routeName = '/tabs_page/labeledtab_page';

  @override
  _LabeledTabPageState createState() => _LabeledTabPageState();
}

class _LabeledTabPageState extends State<LabeledTabPage> with SingleTickerProviderStateMixin {
  late TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 4, vsync: this);
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: LLSColors.PRIMARY,
        leading: InkWell(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Container(
            child: Icon(
              CupertinoIcons.back,
              color: LLSColors.WHITE,
            ),
          ),
        ),
        title: const Text(
          'Labeled Tab',
          style: TextStyle(fontSize: 17),
        ),
        centerTitle: true,
      ),
      body: ListView(
        children: <Widget>[
          LLSTabBar(
            length: 4,
            controller: tabController,
            tabs: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.home,
                  ),
                  const Text(
                    'Home',
                    style: TextStyle(
                      fontSize: 14,
                    ),
                  )
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.music_note,
                  ),
                  const Text(
                    'Music',
                    style: TextStyle(
                      fontSize: 14,
                    ),
                  )
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.games,
                  ),
                  const Text(
                    'Games',
                    style: TextStyle(
                      fontSize: 14,
                    ),
                  )
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.notifications,
                  ),
                  const Text(
                    'Notification',
                    style: TextStyle(
                      fontSize: 14,
                    ),
                  )
                ],
              ),
            ],
            indicatorColor: Colors.teal,
            labelColor: LLSColors.SUCCESS,
            labelPadding: const EdgeInsets.all(8),
            tabBarColor: LLSColors.WHITE,
            unselectedLabelColor: LLSColors.LIGHT
          ),
          Container(
            height: MediaQuery.of(context).size.height - 159,
            child: LLSTabBarView(
              controller: tabController,
              children: <Widget>[
                Center(
                  child: Icon(
                    Icons.home,
                    size: 150,
                    color: Colors.grey.withOpacity(0.44),
                  ),
                ),
                Center(
                  child: Icon(
                    Icons.music_note,
                    size: 150,
                    color: Colors.grey.withOpacity(0.44),
                  ),
                ),
                Center(
                  child: Icon(
                    Icons.games,
                    size: 150,
                    color: Colors.grey.withOpacity(0.44),
                  ),
                ),
                Center(
                  child: Icon(
                    Icons.notifications,
                    size: 150,
                    color: Colors.grey.withOpacity(0.44),
                  ),
                )
              ],
            ),
          )
        ]
      )
    );
  }
}