part of '../pages.dart';

class SquareButtonPage extends StatefulWidget {
  static const routeName = 'buttons_page/square_button_page';

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

class _SquareButtonPageState extends State<SquareButtonPage> with SingleTickerProviderStateMixin  {
  TabController? tabController;
  
  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 2, 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(
          'Square Buttons',
          style: TextStyle(fontSize: 17),
        ),
        centerTitle: true,
      ),
      body: ListView(
        children: [
          Container(
            width: double.infinity,
            height: 45,
            margin: EdgeInsets.only(top: 20, left: 25, right: 25),
            padding: EdgeInsets.zero,
            child: LLSSegmentTabs(
              tabController: tabController,
              width: double.infinity,
              length: 2,
              tabs: <Widget>[
                Tab(
                  child: Text(
                    'Solid',
                    style: TextStyle(fontSize: 15),
                  ),
                ),
                Tab(
                  child: Text(
                    'Outline',
                    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,
              physics: BouncingScrollPhysics(),
              children: <Widget>[
                Container(
                  child: ListView(
                    children: <Widget>[
                      const Padding(
                        padding: EdgeInsets.only(left: 15, top: 30),
                        child: LLSLabel(
                          text: 'Default',
                          type: LLSLabelType.typo5,
                          dividerWidth: 25,
                          dividerColor: LLSColors.SECONDARY,
                        ),
                      ),
                      LLSCard(
                        content: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: () {},
                                  shape: LLSButtonShape.square,
                                  child: const Text('Primary'),
                                  color: LLSColors.PRIMARY,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Secondary'),
                                  color: LLSColors.SECONDARY,
                                  shape: LLSButtonShape.square,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Success'),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.SUCCESS,
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Warning'),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.WARNING,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text(
                                    'Danger',
                                  ),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.DANGER,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text(
                                    'Info',
                                  ),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.INFO,
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text(
                                    'Light',
                                  ),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.LIGHT,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Dark'),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.DARK,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: Text(
                                    'Link',
                                    style: TextStyle(
                                      color: LLSColors.SECONDARY
                                    )
                                  ),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.TRANSPARENT,
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Orange'),
                                  color: LLSColors.TERTIARY,
                                  shape: LLSButtonShape.square,
                                ),
                              ]
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                          ],
                        ),
                      ),
                      const Padding(
                        padding: EdgeInsets.only(left: 15, top: 30),
                        child: LLSLabel(
                          text: 'Disabled State',
                          type: LLSLabelType.typo5,
                          dividerWidth: 25,
                          dividerColor: LLSColors.SECONDARY,
                        ),
                      ),
                      LLSCard(
                        content: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: null,
                                  shape: LLSButtonShape.square,
                                  child: const Text('Primary'),
                                  color: LLSColors.PRIMARY,
                                ),
                                LLSButton(
                                  onPressed: null,
                                  child: const Text('Secondary'),
                                  color: LLSColors.SECONDARY,
                                  shape: LLSButtonShape.square,
                                ),
                                LLSButton(
                                  onPressed: null,
                                  child: const Text('Success'),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.SUCCESS,
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: null,
                                  child: const Text('Warning'),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.WARNING,
                                ),
                                LLSButton(
                                  onPressed: null,
                                  child: const Text(
                                    'Danger',
                                  ),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.DANGER,
                                ),
                                LLSButton(
                                  onPressed: null,
                                  child: const Text(
                                    'Info',
                                  ),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.INFO,
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: null,
                                  child: const Text(
                                    'Light',
                                  ),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.LIGHT,
                                ),
                                LLSButton(
                                  onPressed: null,
                                  child: const Text('Dark'),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.DARK,
                                ),
                                LLSButton(
                                  type: LLSButtonType.transparent,
                                  onPressed: null,
                                  child: Text(
                                    'Link',
                                    style: TextStyle(
                                      color: LLSColors.SECONDARY
                                    )
                                  ),
                                  shape: LLSButtonShape.square
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: null,
                                  child: const Text('Orange'),
                                  color: LLSColors.TERTIARY,
                                  shape: LLSButtonShape.square,
                                ),
                              ]
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                          ],
                        ),
                      ),
                      const Padding(
                        padding: EdgeInsets.only(left: 15, top: 20),
                        child: LLSLabel(
                          text: 'Button Sizes',
                          type: LLSLabelType.typo5,
                          dividerWidth: 25,
                          dividerColor: LLSColors.SECONDARY,
                        ),
                      ),
                      LLSCard(
                        content: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Large',
                                      style:
                                          TextStyle(color: LLSColors.WHITE)),
                                  color: LLSColors.PRIMARY,
                                  size: LLSSize.LARGE,
                                  shape: LLSButtonShape.square,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Normal',
                                      style:
                                          TextStyle(color: LLSColors.WHITE)),
                                  color: LLSColors.PRIMARY,
                                  size: LLSSize.MEDIUM,
                                  shape: LLSButtonShape.square,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Small',
                                      style:
                                          TextStyle(color: LLSColors.WHITE)),
                                  color: LLSColors.PRIMARY,
                                  size: LLSSize.SMALL,
                                  shape: LLSButtonShape.square,
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                          ],
                        ),
                      ),
                      const Padding(
                        padding: EdgeInsets.only(left: 15, top: 20),
                        child: LLSLabel(
                          text: 'Block Buttons',
                          type: LLSLabelType.typo5,
                          dividerWidth: 25,
                          dividerColor: LLSColors.SECONDARY,
                        ),
                      ),
                      LLSCard(
                        content: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            const SizedBox(
                              height: 10,
                            ),
                            LLSButton(
                              onPressed: () {},
                              blockButton: true,
                              child: const Text(
                                'Large',
                                style: TextStyle(
                                  color: LLSColors.WHITE,
                                ),
                              ),
                              color: LLSColors.PRIMARY,
                              size: LLSSize.LARGE,
                              shape: LLSButtonShape.square,
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            LLSButton(
                              onPressed: () {},
                              blockButton: true,
                              child: const Text(
                                'Normal',
                                style: TextStyle(
                                  color: LLSColors.WHITE,
                                ),
                              ),
                              color: LLSColors.PRIMARY,
                              size: LLSSize.MEDIUM,
                              shape: LLSButtonShape.square,
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            LLSButton(
                              onPressed: () {},
                              blockButton: true,
                              child: const Text(
                                'Small',
                                style: TextStyle(
                                  color: LLSColors.WHITE,
                                ),
                              ),
                              color: LLSColors.PRIMARY,
                              size: LLSSize.SMALL,
                              shape: LLSButtonShape.square,
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                          ],
                        ),
                      ),
                    ]
                  )
                ),
                Container(
                  child: ListView(
                    children: <Widget>[
                      const Padding(
                        padding: EdgeInsets.only(left: 15, top: 30),
                        child: LLSLabel(
                          text: 'Default',
                          type: LLSLabelType.typo5,
                          dividerWidth: 25,
                          dividerColor: LLSColors.SECONDARY,
                        ),
                      ),
                      LLSCard(
                        content: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: () {},
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                  shape: LLSButtonShape.square,
                                  child: const Text('Primary'),
                                  color: LLSColors.PRIMARY
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Secondary'),
                                  color: LLSColors.SECONDARY,
                                  shape: LLSButtonShape.square,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Success'),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.SUCCESS,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Warning'),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.WARNING,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text(
                                    'Danger',
                                  ),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.DANGER,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text(
                                    'Info',
                                  ),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.INFO,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text(
                                    'Light',
                                  ),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.LIGHT,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Dark'),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.DARK,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: Text(
                                    'Link',
                                    style: TextStyle(
                                      color: LLSColors.SECONDARY
                                    )
                                  ),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.TRANSPARENT
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Orange'),
                                  color: LLSColors.TERTIARY,
                                  shape: LLSButtonShape.square,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                              ]
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                          ],
                        ),
                      ),
                      const Padding(
                        padding: EdgeInsets.only(left: 15, top: 30),
                        child: LLSLabel(
                          text: 'Disabled State',
                          type: LLSLabelType.typo5,
                          dividerWidth: 25,
                          dividerColor: LLSColors.SECONDARY,
                        ),
                      ),
                      LLSCard(
                        content: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: null,
                                  shape: LLSButtonShape.square,
                                  child: const Text('Primary'),
                                  color: LLSColors.PRIMARY,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                                LLSButton(
                                  onPressed: null,
                                  child: const Text('Secondary'),
                                  color: LLSColors.SECONDARY,
                                  shape: LLSButtonShape.square,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                                LLSButton(
                                  onPressed: null,
                                  child: const Text('Success'),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.SUCCESS,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: null,
                                  child: const Text('Warning'),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.WARNING,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                                LLSButton(
                                  onPressed: null,
                                  child: const Text(
                                    'Danger',
                                  ),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.DANGER,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                                LLSButton(
                                  onPressed: null,
                                  child: const Text(
                                    'Info',
                                  ),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.INFO,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: null,
                                  child: const Text(
                                    'Light',
                                  ),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.LIGHT,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                                LLSButton(
                                  onPressed: null,
                                  child: const Text('Dark'),
                                  shape: LLSButtonShape.square,
                                  color: LLSColors.DARK,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                                LLSButton(
                                  type: LLSButtonType.transparent,
                                  onPressed: null,
                                  child: Text(
                                    'Link',
                                    style: TextStyle(
                                      color: LLSColors.SECONDARY
                                    )
                                  ),
                                  shape: LLSButtonShape.square
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: null,
                                  child: const Text('Orange'),
                                  color: LLSColors.TERTIARY,
                                  shape: LLSButtonShape.square,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                              ]
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                          ],
                        ),
                      ),
                      const Padding(
                        padding: EdgeInsets.only(left: 15, top: 20),
                        child: LLSLabel(
                          text: 'Button Sizes',
                          type: LLSLabelType.typo5,
                          dividerWidth: 25,
                          dividerColor: LLSColors.SECONDARY,
                        ),
                      ),
                      LLSCard(
                        content: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            const SizedBox(
                              height: 10,
                            ),
                            Row(
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Large'),
                                  color: LLSColors.PRIMARY,
                                  size: LLSSize.LARGE,
                                  shape: LLSButtonShape.square,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Normal'),
                                  color: LLSColors.PRIMARY,
                                  size: LLSSize.MEDIUM,
                                  shape: LLSButtonShape.square,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                                LLSButton(
                                  onPressed: () {},
                                  child: const Text('Small'),
                                  color: LLSColors.PRIMARY,
                                  size: LLSSize.SMALL,
                                  shape: LLSButtonShape.square,
                                  type: LLSButtonType.outline,
                                  widthBorderOutline: 2.0,
                                ),
                              ],
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                          ],
                        ),
                      ),
                      const Padding(
                        padding: EdgeInsets.only(left: 15, top: 20),
                        child: LLSLabel(
                          text: 'Block Buttons',
                          type: LLSLabelType.typo5,
                          dividerWidth: 25,
                          dividerColor: LLSColors.SECONDARY,
                        ),
                      ),
                      LLSCard(
                        content: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            const SizedBox(
                              height: 10,
                            ),
                            LLSButton(
                              onPressed: () {},
                              blockButton: true,
                              child: const Text(
                                'Large',
                              ),
                              color: LLSColors.PRIMARY,
                              size: LLSSize.LARGE,
                              shape: LLSButtonShape.square,
                              type: LLSButtonType.outline,
                              widthBorderOutline: 2.0,
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            LLSButton(
                              onPressed: () {},
                              blockButton: true,
                              child: const Text(
                                'Normal',
                              ),
                              color: LLSColors.PRIMARY,
                              size: LLSSize.MEDIUM,
                              shape: LLSButtonShape.square,
                              type: LLSButtonType.outline,
                              widthBorderOutline: 2.0,
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                            LLSButton(
                              onPressed: () {},
                              blockButton: true,
                              child: const Text(
                                'Small',
                              ),
                              color: LLSColors.PRIMARY,
                              size: LLSSize.SMALL,
                              shape: LLSButtonShape.square,
                              type: LLSButtonType.outline,
                              widthBorderOutline: 2.0,
                            ),
                            const SizedBox(
                              height: 10,
                            ),
                          ],
                        ),
                      ),
                    ]
                  )
                )
              ]
            )
          )
        ]
      )
    );
  }
}