part of '../pages.dart';

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

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

class _SegmentedTabPageState extends State<SegmentedTabPage> with SingleTickerProviderStateMixin {
  late TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 3, 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(
          'Segmented Tab',
          style: TextStyle(fontSize: 17),
        ),
        centerTitle: true,
      ),
      body: ListView(
        children: <Widget>[
          Container(
            width: double.infinity,
            height: 45,
            margin: const EdgeInsets.only(top: 20, left: 25, right: 25),
            padding: EdgeInsets.zero,
            child: LLSSegmentTabs(
              tabController: tabController,
              width: double.infinity,
              length: 3,
              tabs: <Widget>[
                Tab(
                  child: Text(
                    'Tab 1',
                    style: TextStyle(fontSize: 15),
                  )
                ),
                Tab(
                  child: Text(
                    'Tab 2',
                    style: TextStyle(fontSize: 15),
                  ),
                ),
                Tab(
                  child: Text(
                    'Tab 3',
                    style: TextStyle(fontSize: 15),
                  ),
                )
              ],
              tabBarColor: LLSColors.LIGHT,
              indicatorSize: TabBarIndicatorSize.tab,
              labelColor: LLSColors.WHITE,
              unselectedLabelColor: LLSColors.DARK,
              indicator: BoxDecoration(
                color: LLSColors.SECONDARY,
                border: Border(
                  bottom: BorderSide(
                    color: LLSColors.SUCCESS,
                    width: 4,
                  ),
                ),
              ),
              indicatorWeight: 2,
              border: Border.all(color: Colors.white, width: 2),
            ),
          ),
          Container(
            height: MediaQuery.of(context).size.height - 140,
            child: LLSTabBarView(
              controller: tabController,
              children: const <Widget>[
                Center(
                  child: Text('Tab 1'),
                ),
                Center(
                  child: Text('Tab 2'),
                ),
                Center(
                  child: Text('Tab 3'),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}