part of '../pages.dart';

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

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

class _BottomLabeledTabPageState extends State<BottomLabeledTabPage> 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(
          'Bottom Labeled Tab',
          style: TextStyle(fontSize: 17),
        ),
        centerTitle: true,
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        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),
              ),
            )
          ],
        )
      ),
      bottomNavigationBar: Container(
        child: LLSTabBar(
          length: 1,
          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: LLSColors.SECONDARY,
          labelColor: LLSColors.SECONDARY,
          labelPadding: const EdgeInsets.all(8),
          tabBarColor: LLSColors.PRIMARY,
          unselectedLabelColor: LLSColors.WHITE
        ),
      )
    );
  }
}