pramodjoshi / toggle_switch Goto Github PK

Describe the bug
Sample code

ToggleSwitch(
                  minWidth: double.infinity,
                  minHeight: MySize.size40,
                  fontSize: 16.0,
                  initialLabelIndex: 0,
                  activeBgColor: [AppTheme.ovaOrange],
                  activeFgColor: Colors.white,
                  inactiveBgColor: AppTheme.ovaGrey,
                  inactiveFgColor: Colors.grey[900],
                  totalSwitches: 2,
                  labels: ['Orders', 'WIP'],
                  onToggle: (index) {
                    print('switched to: $index');
                    setState(() {
                      if(index==0)
                        showOrder=true;
                      else
                        showOrder=false;

                    });                  },
                )

the right index is printed but the Active color doesnot change

Hello,

Is there any way to control the height of the toggle switch ? I would like to set the same height as for other action chips I have also on the screen.

Need to set null at initialLabelIndex so that at initial none option is selected

Two requests:

• Items are now layed out horizontally. Ability to lay out vertically would be nice
• Being able to wrap text label to a newline, e.g. by inputting a String "line 1 \n line2".
  Or, if the buttons don't fit horizontally (i.e. the text is cut off to text....), make it possible for the buttons to go to a new line. For example, 7 horizontal buttons would then wrap to 4 and 3 buttons over 2 lines.

Hi, I am trying to create a 3-switch-button. All three switches have labels. I would like to have icons on the first and last witch, but not on the middle one.
It seems that currently this cannot be achieved. It would be a very nice enhancement :)

Hi, do you think that a border around the selected side of the toggle only, is possible?

I notice that the index returned by onToggle is nullable (int?) when I open the same project on Macbook Air, and not nullable (int) on PC. Is it a known difference or a deliberate difference between the two, I am not sure why this woud be the case.
Toggle Switch 1.4.0

The Toggle switch was not showing any errors when I was assigning this index to a non-nullable int local variable on my Lennovo PC, but when I open the project on my Macbook, it showed an error because here the index returned on onToggle is a nullable int?, I added a ! to resolve the issue for now (although on PC it now tells me ! is not required because index is non-nullable int), what could be the reason.

Thanks

Hello.
I am trying to get a toggle widget above a scrolling list.

changeOnTap is not triggering the UI to update on my stateful widget. It is working a a stateless one though.

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:toggle_switch/toggle_switch.dart';

class NuevoRegistroRes extends StatefulWidget {
  @override
  _NuevoRegistroResState createState() => _NuevoRegistroResState();
}

class _NuevoRegistroResState extends State<NuevoRegistroRes> {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {

return Scaffold(
      key: scaffoldKey,
      // backgroundColor: Colors.indigo,
 
      //end fab
      appBar: AppBar(
        title: Text(  'Agregar Res'),
        
      ),
      body: Container(
        // color: Colors.teal,
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            // child: Container(
            child: Column(
              children: <Widget>[
                Column(
                  // mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    ToggleSwitch(
                      changeOnTap: true,
                      minWidth: 110.0,
                      initialLabelIndex: 0,
                      cornerRadius: 20.0,
                      activeFgColor: Colors.white,
                      // activeBgColors: Colors.white,
                      inactiveBgColor: Colors.grey,
                      inactiveFgColor: Colors.white,
                      labels: ['Macho', 'Hembra'],
                      icons: [FontAwesomeIcons.mars, FontAwesomeIcons.venus],
                      activeBgColors: [Colors.blue, Colors.pink],
                      onToggle: (index) async {
                        print('switched to: $index');
                      },
                    ),
                  ],
                ),
                Expanded(
                  child: SingleChildScrollView(
                    child: Wrap(
                      children: List<Widget>.generate(223, (
                        index,
                      ) {
                        return Row(
                          children: [
                            Text('test $index'),
                          ],
                        );
                      }),
                    ),
                  ),
                )
              ],
            )
            // ),
            ),
      ),
    );
  }
}

Describe the bug
A clear and concise description of what the bug is.
I need to change the value of a variable (to show/hide options) when the user presses the Toggle.

To Reproduce
Complete runnable code to reproduce the bug/issue.

           ToggleSwitch(
                  minWidth: 150,
                  initialLabelIndex: 0,
                  totalSwitches: 2,
                  labels: const ['FACE-TO_FACE', 'NON-FACE-TO_FACE'],
                  onToggle: (index) {
                    print('switched to: $index');
                    setState(() {
                      faceToFace= index!;
                    });
                  },
                )

Expected behavior
A clear and concise description of what you expected to happen.
The visual change is expected to act as normal, the same as when the "SetState" is not included

Screenshots
If applicable, add screenshots to help explain your problem.

Additional information

• toggle_switch version -> toggle_switch 2.0.1
• flutter doctor -v

[√] Flutter (Channel dev, 2.11.0-0.1.pre, on Microsoft Windows [Versión 10.0.22000.613], locale es-ES)
• Flutter version 2.11.0-0.1.pre at C:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision b101bfe32f (3 months ago), 2022-02-16 07:36:54 -0800
• Engine revision e355993572
• Dart version 2.17.0 (build 2.17.0-69.2.beta)
• DevTools version 2.10.0-dev.1

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at C:\Users\Rebeca\AppData\Local\Android\sdk
• Platform android-31, build-tools 30.0.2
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
• All Android licenses accepted.

[√] Chrome - develop for the web
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.5.5)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
• Visual Studio Community 2019 version 16.5.30104.148
• Windows 10 SDK version 10.0.18362.0

[√] Android Studio (version 2020.3)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[√] VS Code (version 1.65.1)
• VS Code at C:\Users\Rebeca\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.38.1

[√] Connected device (4 available)
• Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 10 (API 29) (emulator)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Versión 10.0.22000.613]
• Chrome (web) • chrome • web-javascript • Google Chrome 100.0.4896.75
• Edge (web) • edge • web-javascript • Microsoft Edge 99.0.1150.52

[√] HTTP Host Availability
• All required HTTP hosts are available

• No issues found!

I am trying to use setState in onToogle but it doesnt work.

Hi, is there a way to disable the toggle switch ?
Thanks

Hello,

Thank you for your work.
Why there is no parameter to customize the animation duration ?

Not able to give different width to each button. My tabs name are like "SMS", "Clarification", "Feedback"...but SMS text take up the same space as Clarification, which I don't want

I wanted to use setState with toggle switch setState is working fine but toggle not changing any solution for this?

When you write any action to onToggle, activeBgColor is not changing to toggled label.

ToggleSwitch(
    minHeight: getProportionateScreenHeight(50),
    minWidth: getProportionateScreenWidth(80),
    activeBgColor: [Color(0xFF12C575)],
    inactiveBgColor: Color(0xFF101A26),
    changeOnTap: true,
    animate: true,
    inactiveFgColor: Colors.white,
    totalSwitches: 3,
    labels: ['Speedometer', 'Hud', 'Map'],
    fontSize: getProportionateScreenHeight(18),
    onToggle: (index) {
      onToggle(index);
    },
  ),

Expecting activeBgColor is moving to toggled label.

• toggle_switch version: ^1.2.0
• flutter doctor -v:

[✓] Flutter (Channel stable, 2.2.3, on macOS 11.5 20G5033c darwin-x64, locale en)
    • Flutter version 2.2.3 at /Users/macbookpro/Developer/flutter
    • Framework revision f4abaa0735 (8 weeks ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/macbookpro/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] Connected device (3 available)
    • iPhone (mobile)                     • 230943000b479b007f613660c6a159768326b293 • ios            • iOS 14.6
    • iPhone SE (1st generation) (mobile) • 44F4E5A7-F283-46D4-8B1B-2913054DF43E     • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-5
      (simulator)
    • Chrome (web)                        • chrome                                   • web-javascript • Google Chrome 92.0.4515.159

• No issues found!

Whenever the labels is null, it throws an error saying

The getter 'length' was called on null. Receiver: null Tried calling: length

I only want icons in the switch

There seems to be no padding of the icons so they are very close to the edge. See image attached

I am using the example code but getting this strange effect. Currently, I using this version toggle_switch: ^1.2.0

` ToggleSwitch(
minWidth: 90.0,

          initialLabelIndex: 1,
          cornerRadius: 20.0,
          activeFgColor: Colors.white,
          inactiveBgColor: Colors.grey,
          inactiveFgColor: Colors.white,
          totalSwitches: 2,
          labels: ['Male', 'Female'],
     
          activeBgColors: [[Colors.blue],[Colors.pink]],
          onToggle: (index) {
            print('switched to: $index');
          },
        ),`

Just try the code below:

ToggleSwitch(
initialLabelIndex: 0,
totalSwitches: 3,
borderWidth: 1,
borderColor: const [Colors.white],
labels: const ['aaa', 'bbb', 'ccc'],
activeBgColor: const [Colors.white],
activeFgColor: const Color(0xfff11fab),
inactiveBgColor: Colors.transparent,
inactiveFgColor: Colors.white,
onToggle: (index) {},
),

inactiveBgColor will be covered by borderColor. How to solve this? 😲

toggle_switch version 1.3.0

hi all, is it possible to have an animated transition when change from a button to another? thanks

Hello,
I upgraded to the new version, in the new version all the buttons are rounded at the borders.
radiusStyle: false has no effect !!

I mean the connection border between the two buttons. Not like before.

How do I update the toggleswitch programmatically?

I have tried using ValueListenableBuilder and changing initialLabelIndex but I wonder if there could be a better way, also this seems that isn't always working

Hi!

I need to implement this design:

I think with the current lib, I cannot right? Maybe allowing a List for tabs or at least List might get the trick done, what do you think?

Also maybe I should create a new issue about the possibility of disableling a tab (see my screenshot)?

Thanks :)

Is your feature request related to a problem? Please describe.
I would like a custom font that changes color on active and inactive.

Describe the solution you'd like
textStyle = widget.customTextStyles!.length == 1
? widget.customTextStyles![0]!
: (widget.customTextStyles!.length > index ~/ 2 &&
widget.customTextStyles![index ~/ 2] != null
? widget.customTextStyles![index ~/ 2]!
: defaultTextStyle);

       change requested:
              if (active && activeFgColor != null) {
                textStyle = textStyle.copyWith(color: activeFgColor);
              } else if (!active && inactiveFgColor != null) {
                textStyle = textStyle.copyWith(color: inactiveFgColor);
              }

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Complete runnable code to reproduce the bug/issue.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional information

• toggle_switch version
• flutter doctor -v
• Any other additional information.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Complete runnable code to reproduce the bug/issue.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional information

• toggle_switch version
• flutter doctor -v
• Any other additional information.

Current Behaiour!
When I am clicking on The same state which the toggle button is, it is firing event.

What should happen?
There should be an option to disable event firing on clicking of same toggle button.

Kindly guide me to update textstyle.

Describe the bug
Borders seem to be only displayed when the four sides of it are not BorderSide.none. Not only that, but they need to have the same width and color.

To Reproduce

// This works
activeBorders: [Border(bottom: BorderSide(width: 16.0, color: Colors.purple), right: BorderSide(width: 16, color: Colors.purple), left: BorderSide(width: 16.0, color: Colors.purple), top: BorderSide(width: 16.0, color: Colors.purple))],

// This doesn't work
activeBorders: [Border(bottom: BorderSide(width: 16.0, color: Colors.red), right: BorderSide(width: 16, color: Colors.purple), left: BorderSide(width: 16.0, color: Colors.purple), top: BorderSide(width: 16.0, color: Colors.purple))],

// This doesn't work neither
activeBorders: [Border(bottom: BorderSide(width: 16.0, color: Colors.red))],

Expected behavior
For this case
activeBorders: [Border(bottom: BorderSide(width: 16.0, color: Colors.red))],
I would expect a border to be displayed at the bottom.

Since the ToggleSwitch class doesn't have a decoration parameter, it's not possible to add a border at the bottom in any other way.

Additional information

• toggle_switch version ^2.0.1

I need to do the following:

By other words only one of two switches can be selected and there must be a TextField between them. Can it be done with toggle_switch? If yes, could anyone show how to do it?

Should return null but returns previous value.
I'll fix it and PR you.

Hi Pramod, thanks for creating this!

Just a qtn, can we decide the number of rows?

Context: I have 2 rows of options for users to choose from. I could do a separate toggle switch for 2 created rows, but I reckon it would be harder to store the printed value as I want them to choose only one choice.

it would be better if the toggle switch could allow 2 rows in the same widget and they just choose one option and that option is captured.

Maybe this feature is already out. >.<, and is staring me in the face.
Any guidance is appreciated.

Cheers!

Describe the bug
The toggle button does not switch if changed two times before.

To Reproduce
`ToggleSwitch(
animate: true,
changeOnTap: !isPaymentMethodAdded,
totalSwitches: 2,
activeBgColor: const [whiteblueColor],
inactiveFgColor: Colors.white,
minWidth: screenSize.width * .3,
labels: const ["PalPal", "Card"],
onToggle: (index) {

          },
        ),`

Expected behavior
The toggle should be properly switched all the time when it is changed

Additional information

• toggle_switch: ^1.2.0 version

Need it ASAP.
Thanks

When try to change dynamically a widget state (ex: Visibility status) and try to call setstate function in toggle callback, the widget Visibility status work fine but toggle not change color.

I'm using provider and i'm a value of a listened-on property. Somehow, notifyListeners() seems to disable the color changing of the buttons. It still functional in the back-end though, just the appearance of the switch doesn't change when notifyListeners is called.

What am i doing wrong?

It would be nice to be able to disable a switch value like this:

I think it is very good to possible this feature for set border color and width.

When I put a set state inside the onToggle handle although the index is changing, visually there is not toggle.
If I do not put the setState the switch toggle visually.

Hi, I found this package to be very amazing but there is a strange issue that I just noticed. I saw that setState wasn't working at first in the switch. Luckily I found the example on this page. But there's is something I just noticed.

Let's say we have two values [User, Service Provider]

Now I have radiovalue variable set to 0.

  onToggle: (val){
                        print(radioval);
                        setState(() {
                          radioval = val;
                        });

                      },

The issue is that if a person in mistake presses the selected box more than once the value changes.

for an instance before touch the value for user was 0 and service provider was 1 and if user selected the user button more than once the value will change from 0 to 1 and service provider's value will become 0 and vice versa.

This is the issue. Is it possible to not change the value for selected index?

Hi, I would like to center labels in a toogle_switch widget, but I haven't found a parameter to do that. Is there a way to do what I want?

Maybe if parameter labels type is changed from List<String> to List<Text>, it would be possible to center the labels. What do you think?

What's up bro..
I'm try to change state of toggle.
Somehow the active background color is not working.
Maybe you can help.

onToggle: (index) { print('switched to: $index'); setState(() { changeLanguage = index; }); },

By default, it would be nice if you took the theme colors.

Describe the bug
When I click on the ToggleSwitch, nothing switch, but my index are good when I print it

To Reproduce

Column(children: [
        ToggleSwitch(
          minWidth: 100.0,
          initialLabelIndex: showIOSQrcode,
          totalSwitches: 2,
          labels: ['Apple Store', 'Play Store'],
          onToggle: (index) {
            print('switched index: $index');
            setState(() {
              showIOSQrcode = index;
            });
            print(showIOSQrcode);
          },
        ),
        Padding(padding: EdgeInsets.symmetric(vertical: 5)),
        showIOSQrcode == 0
            ? Image(
                image: AssetImage(
                    'assets/images/qrcode_ios.png'),
                width: 180,
              )
            : Image(
                image: AssetImage(
                    'assets/images/qr_code_play_store.png'))
        ]),

Expected behavior
I expected to see the switch between Apple and Play Store and to see the image change with it

Additional information

toggle_switch: ^1.3.0

[✓] Flutter (Channel unknown, 2.0.6, on macOS 12.0.1 21A559 darwin-arm, locale fr-FR)
• Flutter version 2.0.6 at /Users/lucas/Development/flutter
• Framework revision 1d9032c7e1 (7 months ago), 2021-04-29 17:37:58 -0700
• Engine revision 05e680e202
• Dart version 2.12.3

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Users/lucas/Library/Android/sdk
• Platform android-30, build-tools 30.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 13.1, Build version 13A1030d
• CocoaPods version 1.11.2

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.62.3)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.28.0

[✓] Connected device (2 available)
• iPhone Lucas (mobile) • baaa60cd2019dbd8bd0c781818b0fa03815e65c2 • ios • iOS 15.0.2
• Chrome (web) • chrome • web-javascript • Google Chrome 96.0.4664.55

• No issues found!

When doing a setState() in the onToggle() function, suddenly it doesn't switch to the other value anymore but no error is occurring. Even the state value is switching properly but the view doesn't get updated.

Everything works fine until I try to add some state, what am I doing wrong?

Best regards.

Have you thought about not limiting the maximum width? Allow user to customize width with horizontal swipe view? Because as an individual developer, sometimes it is hard to replace text with icons, which will cause the text to automatically collapse, which is silly. Thank you very much if you can.

Can you add "customIconStyles" which is the same as "customTextStyles" but for icons ?