part of 'pages.dart';

class TogglePage extends StatefulWidget {
  const TogglePage({ Key? key }) : super(key: key);
  static const routeName = '/toggle_page';

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

class _TogglePageState extends State<TogglePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: LLSColors.PRIMARY,
        leading: InkWell(
          onTap: () {
            Navigator.pop(context);
          },
          child: Icon(
            CupertinoIcons.back,
            color: LLSColors.WHITE,
          ),
        ),
        title: const Text(
          'Toggle/Switch',
          style: TextStyle(fontSize: 17),
        ),
        centerTitle: true,
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            const Padding(
              padding: EdgeInsets.only(left: 15, top: 30, bottom: 10),
              child: LLSLabel(
                text: 'Basic',
                type: LLSLabelType.typo5,
                dividerWidth: 25,
                dividerColor: LLSColors.SECONDARY,
              ),
            ),
            LLSCard(
              content: Column(
                children: <Widget>[
                  const SizedBox(
                    height: 10,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      LLSToggle(
                        onChanged: (val) {
                          print('on change val $val');
                        },
                        value: true,
                      ),
                      LLSToggle(
                        enabledTrackColor: LLSColors.DANGER,
                        onChanged: (val) {
                          print('on change val $val');
                        },
                        value: true,
                      ),
                      LLSToggle(
                        enabledTrackColor: LLSColors.WARNING,
                        onChanged: (val) {
                          print('on change val $val');
                        },
                        value: true,
                      ),
                      LLSToggle(
                        enabledTrackColor: LLSColors.INFO,
                        onChanged: (val) {
                          print('on change val $val');
                        },
                        value: true,
                      )
                    ],
                  )
                ],
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(left: 15, top: 10),
              child: LLSLabel(
                text: 'IOS',
                type: LLSLabelType.typo5,
                dividerWidth: 25,
                dividerColor: LLSColors.SECONDARY,
              ),
            ),
            LLSCard(
              content: Column(
                children: <Widget>[
                  const SizedBox(
                    height: 10,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      LLSToggle(
                        onChanged: (v) {
                          print('ios val $v');
                        },
                        value: true,
                        type: LLSToggleType.ios,
                      ),
                      LLSToggle(
                        enabledTrackColor: LLSColors.DANGER,
                        onChanged: (v) {
                          print('ios val $v');
                        },
                        value: true,
                        type: LLSToggleType.ios,
                      ),
                      LLSToggle(
                        enabledTrackColor: LLSColors.WARNING,
                        onChanged: (v) {
                          print('ios val $v');
                        },
                        value: true,
                        type: LLSToggleType.ios,
                      ),
                      LLSToggle(
                        enabledTrackColor: LLSColors.INFO,
                        onChanged: (v) {
                          print('ios val $v');
                        },
                        value: true,
                        type: LLSToggleType.ios,
                      )
                    ],
                  )
                ],
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(left: 15, top: 10),
              child: LLSLabel(
                text: 'Square',
                type: LLSLabelType.typo5,
                dividerWidth: 25,
                dividerColor: LLSColors.SECONDARY,
              ),
            ),
            LLSCard(
              content: Column(
                children: <Widget>[
                  const SizedBox(
                    height: 10,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      LLSToggle(
                        onChanged: (val) {
                          print('on change val $val');
                        },
                        value: true,
                        type: LLSToggleType.square,
                      ),
                      LLSToggle(
                        enabledTrackColor: LLSColors.DANGER,
                        onChanged: (val) {
                          print('on change val $val');
                        },
                        value: true,
                        type: LLSToggleType.square,
                      ),
                      LLSToggle(
                        enabledTrackColor: LLSColors.WARNING,
                        onChanged: (val) {
                          print('on change val $val');
                        },
                        value: true,
                        type: LLSToggleType.square,
                      ),
                      LLSToggle(
                        enabledTrackColor: LLSColors.INFO,
                        onChanged: (val) {
                          print('on change val $val');
                        },
                        value: true,
                        type: LLSToggleType.square,
                      )
                    ],
                  )
                ],
              ),
            ),
            const Padding(
              padding: EdgeInsets.only(left: 15, top: 10),
              child: LLSLabel(
                text: 'Custom',
                type: LLSLabelType.typo5,
                dividerWidth: 25,
                dividerColor: LLSColors.SECONDARY,
              ),
            ),
            LLSCard(
              content: Column(
                children: <Widget>[
                  const SizedBox(height: 10),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      LLSToggle(
                        onChanged: (val) {
                          print('on change val $val');
                        },
                        value: true,
                        type: LLSToggleType.custom,
                      ),
                      LLSToggle(
                        onChanged: (val) {
                          print('on change val $val');
                        },
                        value: true,
                        type: LLSToggleType.android,
                        boxShape: BoxShape.rectangle,
                        enabledTrackColor: LLSColors.DANGER,
                      ),
                      LLSToggle(
                        onChanged: (val) {
                          print('on change val $val');
                        },
                        value: true,
                        type: LLSToggleType.ios,
                        boxShape: BoxShape.rectangle,
                        enabledTrackColor: LLSColors.WARNING,
                        borderRadius:
                            const BorderRadius.all(Radius.circular(0)),
                      ),
                      LLSToggle(
                        onChanged: (val) {
                          print('on change val $val');
                        },
                        value: true,
                        type: LLSToggleType.ios,
                        boxShape: BoxShape.rectangle,
                        enabledText: 'ON',
                        disabledText: 'OFF',
                        enabledTrackColor: LLSColors.INFO,
                        borderRadius:
                            const BorderRadius.all(Radius.circular(0)),
                      )
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}