{"id":13551453,"url":"https://github.com/PramodJoshi/toggle_switch","last_synced_at":"2025-04-03T01:32:52.381Z","repository":{"id":36228878,"uuid":"222559833","full_name":"PramodJoshi/toggle_switch","owner":"PramodJoshi","description":"A simple toggle switch widget for Flutter.","archived":false,"fork":false,"pushed_at":"2024-03-25T19:15:02.000Z","size":1131,"stargazers_count":112,"open_issues_count":3,"forks_count":61,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-01T12:24:52.182Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/toggle_switch","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PramodJoshi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-11-18T22:47:59.000Z","updated_at":"2024-07-31T06:15:57.000Z","dependencies_parsed_at":"2023-02-17T14:16:00.251Z","dependency_job_id":"5403e624-5cba-442e-b359-7c277ff281d2","html_url":"https://github.com/PramodJoshi/toggle_switch","commit_stats":{"total_commits":40,"total_committers":6,"mean_commits":6.666666666666667,"dds":0.35,"last_synced_commit":"6968a98928ef94b0e6645ff0a9a4978a59242fed"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PramodJoshi%2Ftoggle_switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PramodJoshi%2Ftoggle_switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PramodJoshi%2Ftoggle_switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PramodJoshi%2Ftoggle_switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PramodJoshi","download_url":"https://codeload.github.com/PramodJoshi/toggle_switch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222905934,"owners_count":17055820,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T12:01:48.545Z","updated_at":"2024-11-03T21:32:24.066Z","avatar_url":"https://github.com/PramodJoshi.png","language":"Dart","readme":"# Toggle Switch\n\nA simple toggle switch widget. It can be fully customized with desired icons, width, colors, text, corner radius, animation etc. It also maintains selection state.\n\n## Getting Started\n\nIn the `pubspec.yaml` of your flutter project, add the following dependency:\n\n```yaml\ndependencies:\n  ...\n  toggle_switch: ^2.3.0\n```\n\nImport it:\n\n```dart\nimport 'package:toggle_switch/toggle_switch.dart';\n```\n\n## Usage Examples\n\n### Basic toggle switch\n\n```dart\n// Here, default theme colors are used for activeBgColor, activeFgColor, inactiveBgColor and inactiveFgColor\nToggleSwitch(\n  initialLabelIndex: 0,\n  totalSwitches: 3,\n  labels: ['America', 'Canada', 'Mexico'],\n  onToggle: (index) {\n    print('switched to: $index');\n  },\n),\n```\n\n![Basic toggle switch](https://media.giphy.com/media/QX1jcEQH5PnxL7l7Lh/giphy.gif)\n\n### Basic toggle switch with custom height and font size\n\n```dart\nToggleSwitch(\n  minWidth: 90.0,\n  minHeight: 90.0,\n  fontSize: 16.0,\n  initialLabelIndex: 1,\n  activeBgColor: [Colors.green],\n  activeFgColor: Colors.white,\n  inactiveBgColor: Colors.grey,\n  inactiveFgColor: Colors.grey[900],\n  totalSwitches: 3,\n  labels: ['Tall', 'Grande', 'Venti'],\n  onToggle: (index) {\n    print('switched to: $index');\n  },\n),\n```\n\n![Basic toggle switch with custom height and font size](https://media.giphy.com/media/Jrf2KLuWJVaB4cIwlz/giphy.gif)\n\n### With text or icon and custom widths\n\n```dart\nToggleSwitch(\n  customWidths: [90.0, 50.0],\n  cornerRadius: 20.0,\n  activeBgColors: [[Colors.cyan], [Colors.redAccent]],\n  activeFgColor: Colors.white,\n  inactiveBgColor: Colors.grey,\n  inactiveFgColor: Colors.white,\n  totalSwitches: 2,\n  labels: ['YES', ''],\n  icons: [null, FontAwesomeIcons.times],\n  onToggle: (index) {\n    print('switched to: $index');\n  },\n),\n```\n\n![With text or icon and custom widths](https://media.giphy.com/media/gdPIxlxfLfrCX62GTa/giphy.gif)\n\n### With icons, text and different active background colors\n\n```dart\nToggleSwitch(\n  minWidth: 90.0,\n  initialLabelIndex: 1,\n  cornerRadius: 20.0,\n  activeFgColor: Colors.white,\n  inactiveBgColor: Colors.grey,\n  inactiveFgColor: Colors.white,\n  totalSwitches: 2,\n  labels: ['Male', 'Female'],\n  icons: [FontAwesomeIcons.mars, FontAwesomeIcons.venus],\n  activeBgColors: [[Colors.blue],[Colors.pink]],\n  onToggle: (index) {\n    print('switched to: $index');\n  },\n),\n```\n\n![With icons, text and different active background colors](https://media.giphy.com/media/ih4qpWz1wqqILVWYiT/giphy.gif)\n\n### With border color, border width, icons, custom height and different active background colors\n\n```dart\nToggleSwitch(\n  minWidth: 90.0,\n  minHeight: 70.0,\n  initialLabelIndex: 2,\n  cornerRadius: 20.0,\n  activeFgColor: Colors.white,\n  inactiveBgColor: Colors.grey,\n  inactiveFgColor: Colors.white,\n  totalSwitches: 3,\n  icons: [\n    FontAwesomeIcons.mars,\n    FontAwesomeIcons.venus,\n    FontAwesomeIcons.transgender\n  ],\n  iconSize: 30.0,\n  borderWidth: 2.0,\n  borderColor: [Colors.blueGrey],\n  activeBgColors: [[Colors.blue], [Colors.pink], [Colors.purple]],\n  onToggle: (index) {\n    print('switched to: $index');\n  },\n),\n```\n\n![With border color, border width, icons, custom height and different active background colors](https://media.giphy.com/media/8881VEqgaGFDlUo1jb/giphy.gif)\n\n### With gradient border color, divider color and gradient active background colors\n\n```dart\nToggleSwitch(\n  minWidth: 90.0,\n  minHeight: 70.0,\n  initialLabelIndex: 0,\n  cornerRadius: 20.0,\n  activeFgColor: Colors.white,\n  inactiveBgColor: Colors.grey,\n  inactiveFgColor: Colors.white,\n  totalSwitches: 3,\n  icons: [\n    FontAwesomeIcons.facebook,\n    FontAwesomeIcons.twitter,\n    FontAwesomeIcons.instagram\n  ],\n  iconSize: 30.0,\n  borderColor: [Color(0xff3b5998), Color(0xff8b9dc3), Color(0xff00aeff), Color(0xff0077f2), Color(0xff962fbf), Color(0xff4f5bd5)],\n  dividerColor: Colors.blueGrey,\n  activeBgColors: [[Color(0xff3b5998), Color(0xff8b9dc3)], [Color(0xff00aeff), Color(0xff0077f2)], [Color(0xfffeda75), Color(0xfffa7e1e), Color(0xffd62976), Color(0xff962fbf), Color(0xff4f5bd5)]],\n  onToggle: (index) {\n    print('switched to: $index');\n  },\n),\n```\n\n![With gradient border color, divider color and gradient active background colors](https://media.giphy.com/media/mfjwHe9w1WG0UIZvqF/giphy.gif)\n\n### With bounceInOut animation\n\n```dart\nToggleSwitch(\n  minWidth: 90.0,\n  minHeight: 70.0,\n  initialLabelIndex: 0,\n  cornerRadius: 20.0,\n  activeFgColor: Colors.white,\n  inactiveBgColor: Colors.grey,\n  inactiveFgColor: Colors.white,\n  totalSwitches: 2,\n  icons: [\n    FontAwesomeIcons.lightbulb,\n    FontAwesomeIcons.solidLightbulb,\n  ],\n  iconSize: 30.0,\n  activeBgColors: [[Colors.black45, Colors.black26], [Colors.yellow, Colors.orange]],\n  animate: true, // with just animate set to true, default curve = Curves.easeIn\n  curve: Curves.bounceInOut, // animate must be set to true when using custom curve\n  onToggle: (index) {\n    print('switched to: $index');\n  },\n),\n```\n\n![With bounceInOut animation](https://media.giphy.com/media/lvFBiXEnax3rznuw1V/giphy.gif)\n\n### With radius style\n\n```dart\nToggleSwitch(\n  minWidth: 90.0,\n  cornerRadius: 20.0,\n  activeBgColors: [[Colors.green[800]!], [Colors.red[800]!]],\n  activeFgColor: Colors.white,\n  inactiveBgColor: Colors.grey,\n  inactiveFgColor: Colors.white,\n  initialLabelIndex: 1,\n  totalSwitches: 2,\n  labels: ['True', 'False'],\n  radiusStyle: true,\n  onToggle: (index) {\n    print('switched to: $index');\n  },\n),\n```\n\n![With radius style](https://media.giphy.com/media/GIhOLGT1kOdz9wUQ4Y/giphy.gif)\n\n### With custom text styles, null initial label, double tap to de-activate\n\n```dart\nToggleSwitch(\n  minWidth: 90.0,\n  cornerRadius: 20.0,\n  inactiveFgColor: Colors.white,\n  initialLabelIndex: null,\n  doubleTapDisable: true, // re-tap active widget to de-activate\n  totalSwitches: 3,\n  labels: ['Normal', 'Bold', 'Italic'],\n  customTextStyles: [\n    null,\n    TextStyle(\n        color: Colors.brown,\n        fontSize: 18.0,\n        fontWeight: FontWeight.w900),\n    TextStyle(\n        color: Colors.black,\n        fontSize: 16.0,\n        fontStyle: FontStyle.italic)\n  ],\n  onToggle: (index) {\n    print('switched to: $index');\n  },\n),\n```\n\n![With custom text styles, null initial label, double tap to de-activate](https://media.giphy.com/media/AtvWNvtzTlIHvuleur/giphy.gif)\n\n### With custom icons\n\n```dart\nToggleSwitch(\n  minWidth: 90.0,\n  minHeight: 90.0,\n  cornerRadius: 20.0,\n  activeBgColors: [\n    [Color(0xfffdbb0a)],\n    [Colors.black54],\n    [Colors.white54]\n  ],\n  inactiveFgColor: Colors.white,\n  initialLabelIndex: 2,\n  totalSwitches: 3,\n  customIcons: [\n    Icon(\n      FontAwesomeIcons.ccVisa,\n      color: Color(0xff1a1f71),\n      size: 55.0,\n    ),\n    Icon(\n      FontAwesomeIcons.ccMastercard,\n      color: Color(0xffF79E1B),\n      size: 55.0,\n    ),\n    Icon(\n      FontAwesomeIcons.ccAmex,\n      color: Color(0xff27AEE3),\n      size: 55.0,\n    )\n  ],\n  onToggle: (index) {\n    print('switched to: $index');\n  },\n),\n```\n\n![With custom icons](https://media.giphy.com/media/VZFytiPYc7CssuDzJS/giphy.gif)\n\n### Vertical toggle switch with active border\n\n```dart\nToggleSwitch(\n  activeBorders: [\n    Border.all(\n      color: Colors.purple,\n      width: 3.0,\n    ),\n    Border.all(\n      color: Colors.yellow.shade700,\n      width: 3.0,\n    ),\n    Border.all(\n      color: Colors.deepOrangeAccent,\n      width: 3.0,\n    ),\n    Border.all(\n      color: Colors.blue.shade500,\n      width: 3.0,\n    ),\n  ],\n  activeFgColor: Colors.black54,\n  isVertical: true,\n  minWidth: 150.0,\n  radiusStyle: true,\n  cornerRadius: 20.0,\n  initialLabelIndex: 2,\n  activeBgColors: [\n    [Colors.purpleAccent],\n    [Colors.yellow],\n    [Colors.orange],\n    [Colors.lightBlueAccent]\n  ],\n  labels: ['Spring', 'Summer', 'Fall', 'Winter'],\n  onToggle: (index) {\n    print('switched to: $index');\n  },\n),\n```\n\n![Vertical toggle switch with active border](https://media.giphy.com/media/eFjXTBhH913cYWWYU3/giphy.gif)\n\n### Custom widths greater than device width\n\n```dart\nSingleChildScrollView(\n  scrollDirection: Axis.horizontal,\n  child: Scrollbar(\n    child: Padding(\n      padding: const EdgeInsets.symmetric(horizontal: 10.0),\n      child: ToggleSwitch(\n        customWidths: [300.0, 100.0, 100.0],\n        cornerRadius: 20.0,\n        activeBgColors: [\n          [Colors.green],\n          [Colors.redAccent],\n          [Colors.blue]\n        ],\n        activeFgColor: Colors.white,\n        inactiveBgColor: Colors.grey,\n        inactiveFgColor: Colors.white,\n        labels: ['Yes, the statement above is true', 'False', 'Other'],\n        onToggle: (index) {\n          print('switched to: $index');\n        },\n      ),\n    ),\n  ),\n),\n```\n\n![Custom widths greater than device width](https://media.giphy.com/media/ZkF9MlIm9y1H9baWrZ/giphy.gif)\n\n### Multi-line text with custom text style inheriting activeFgColor and inactiveFgColor\n\n```dart\nToggleSwitch(\n  initialLabelIndex: 0,\n  minHeight: 100.0,\n  minWidth: 100.0,\n  activeBgColor: [Colors.blueAccent.shade200],\n  activeFgColor: Colors.yellow,\n  customTextStyles: [\n    TextStyle(\n      fontSize: 15.0\n    )\n  ],\n  multiLineText: true,\n  centerText: true,\n  totalSwitches: 2,\n  labels: ['This is multi-line text.', 'One line'],\n  onToggle: (index) {\n    print('switched to: $index');\n  },\n),\n```\n\n![Multi-line text with custom text style inheriting activeFgColor and inactiveFgColor](https://media.giphy.com/media/qNg3CCKpd06rvQp6GY/giphy.gif)\n\n### Cancel toggle\n\n```dart\nToggleSwitch(\n  initialLabelIndex: 0,\n  inactiveBgColor: Colors.black54,\n  activeBgColor: [Colors.black],\n  totalSwitches: 3,\n  minHeight: 80.0,\n  minWidth: 80.0,\n  customIcons: [\n    Icon(\n      FontAwesomeIcons.bitcoin,\n      color: Color(0xFFF2A900),\n      size: 50.0,\n    ),\n    Icon(\n      FontAwesomeIcons.ethereum,\n      color: Color(0xFF5ca6ce),\n      size: 50.0,\n    ),\n    Icon(\n      FontAwesomeIcons.dollarSign,\n      color: Colors.green.shade700,\n      size: 50.0,\n    )\n  ],\n  onToggle: (index) {\n    print('switched to: $index');\n  },\n  cancelToggle: (index) async {\n    String selection = index == 0\n        ? 'Bitcoin'\n        : index == 1\n            ? 'Ethereum'\n            : 'Fiat';\n    return await showDialog(\n      context: context,\n      builder: (dialogContext) =\u003e AlertDialog(\n        content: Text(\"Select $selection?\"),\n        actions: [\n          TextButton(\n              child: Text(\"No\",\n                  style: TextStyle(color: Colors.red)),\n              onPressed: () {\n                Navigator.pop(dialogContext, true);\n              }),\n          TextButton(\n              child: Text(\"Yes\",\n                  style: TextStyle(color: Colors.black)),\n              onPressed: () {\n                Navigator.pop(dialogContext, false);\n              })\n        ],\n      ),\n    );\n  },\n),\n```\n\n![Cancel toggle](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZWNhOGJhNjMzNWNjNmNmOWYwMGI0Nzc3YWEyNjdhYTIyNTRmMDQ2MSZlcD12MV9pbnRlcm5hbF9naWZzX2dpZklkJmN0PWc/qHB8oy90lXIfyQE0vi/giphy.gif)\n\n### Custom widgets\n\n```dart\nToggleSwitch(\n  initialLabelIndex: 0,\n  minHeight: 75.0,\n  minWidth: double.maxFinite,\n  activeBgColor: [Colors.blue.shade50],\n  inactiveBgColor: Colors.white,\n  dividerColor: Colors.blue,\n  borderColor: [Colors.blue],\n  borderWidth: 1.0,\n  customWidgets: [\n    // Overrides default widgets, foreground colors\n    Row(\n      mainAxisAlignment: MainAxisAlignment.center,\n      children: [\n        Icon(\n          FontAwesomeIcons.star,\n        ),\n        const SizedBox(width: 10.0),\n        Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: [\n            Text(\n              'Free',\n              style: TextStyle(\n                fontWeight: FontWeight.bold,\n              ),\n              maxLines: 1,\n              overflow: TextOverflow.ellipsis,\n            ),\n            Text(\n              '\\$0.00',\n              maxLines: 1,\n              overflow: TextOverflow.ellipsis,\n            ),\n          ],\n        ),\n      ],\n    ),\n    Row(\n      mainAxisAlignment: MainAxisAlignment.center,\n      children: [\n        Icon(\n          FontAwesomeIcons.solidStar,\n          color: Color(0xffC0C0C0),\n        ),\n        const SizedBox(width: 10.0),\n        Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: [\n            Text(\n              'Standard',\n              style: TextStyle(\n                fontWeight: FontWeight.bold,\n              ),\n              maxLines: 1,\n              overflow: TextOverflow.ellipsis,\n            ),\n            Text(\n              '\\$4.99',\n              maxLines: 1,\n              overflow: TextOverflow.ellipsis,\n            ),\n          ],\n        ),\n      ],\n    ),\n    Row(\n      mainAxisAlignment: MainAxisAlignment.center,\n      children: [\n        Icon(\n          FontAwesomeIcons.solidStar,\n          color: Color(0xffFFD700),\n        ),\n        const SizedBox(width: 10.0),\n        Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: [\n            Text(\n              'Pro',\n              style: TextStyle(\n                fontWeight: FontWeight.bold,\n              ),\n              maxLines: 1,\n              overflow: TextOverflow.ellipsis,\n            ),\n            Text(\n              '\\$9.99',\n              maxLines: 1,\n              overflow: TextOverflow.ellipsis,\n            ),\n          ],\n        ),\n      ],\n    ),\n  ],\n  onToggle: (index) {\n    print('switched to: $index');\n  },\n),\n```\n\n![Custom widgets](https://media.giphy.com/media/VFcY7CM1Vq9cMkxiTR/giphy.gif)\n\n### TextDirection.rtl and corner radius\n\n```dart\n// When ToggleSwitch is used with Directionality widget and textDirection is set to TextDirection.rtl (right-to-left), \n// switches are displayed right to left along with their respective index values. In this case, corner radius of switches aren't set correctly. \n// To fix this, please use textDirectionRTL parameter and set it to true as shown in the example below. \nDirectionality(\n  textDirection: TextDirection.rtl,\n  child: ToggleSwitch(\n    initialLabelIndex: 0,\n    cornerRadius: 12.0,\n    textDirectionRTL: true,\n    activeFgColor: Colors.white,\n    totalSwitches: 2,\n    labels: ['left', 'right'],\n    onToggle: (index) {\n      print('switched to: $index');\n    },\n  ),\n),\n```\n\n### setState() inside onToggle\n\n[Example code with explanation](https://github.com/PramodJoshi/toggle_switch/issues/11#issuecomment-679277018)\n\n## Code Contributors\n\n[![](https://contrib.rocks/image?repo=PramodJoshi/toggle_switch)](https://github.com/PramodJoshi/toggle_switch/graphs/contributors)","funding_links":[],"categories":["Dart","Packages"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPramodJoshi%2Ftoggle_switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPramodJoshi%2Ftoggle_switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPramodJoshi%2Ftoggle_switch/lists"}