CODEWITHSUNDEEP
flutterflutter-layoutsyncfusion
Aryan Singh
Aryan Singh

Reputation: 95

Flutter: Error in syncfusion slider while applying theme

I am implementing a SFSlider in my app. When I try to give a theme to the slider using SfTheme, I get an error:

RenderBox was not laid out: _RenderSlider#850b3 relayoutBoundary=up7 'package:flutter/src/rendering/box.dart': Failed assertion: line 2009 pos 12: 'hasSize'

My code is :

 Container(
          height: constraints.maxHeight*0.1,
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: SfTheme(
              data: SfThemeData(
                  sliderThemeData: SfSliderThemeData(
                      activeLabelStyle: TextStyle(color: Colors.white),
                      inactiveLabelStyle: TextStyle(color: Colors.white),

                  )
              ),
              child: SfSlider(activeColor: Colors.green,
                inactiveColor: Colors.grey,
                min: 0.0,
                max: 100.0,
                value: _value,
                interval: 25,
                showTicks: true,
                showLabels: true,
                enableTooltip: true,
                minorTicksPerInterval: 1,
                onChanged: (dynamic value) async {
                  totalAmount = await calculateData();
                  totalAmount = totalAmount.ceil() + 0.0;
                  setState(() {
                    _value = value;
                    total_amount_display = totalAmount;
                  });
                },
              ),),),),

The Container is inside a column, which in turn is inside a container in dialog box.

When I remove the theme, the slider is rendered perfectly.

Upvotes: 0

Views: 474

Answers (1)

srk_sync
srk_sync

Reputation: 359

You can overcome this issue by setting color and fontSize when setting the text style for the active and inactive labels in SfSliderThemeData.

SfTheme( 
   data: SfThemeData(
     sliderThemeData: SfSliderThemeData(
         activeLabelStyle: const TextStyle(color: Colors.red, fontSize: 14),
         inactiveLabelStyle: const TextStyle(color: Colors.red, fontSize: 14),
     )
   ),
)

If you like to set the color alone for the label,then you can use the textTheme’s text style values retrieved from context’s ThemeData and using the copyWith() method to set the desired color.

final ThemeData themeData = Theme.of(context);

SfTheme(
    data: SfThemeData(
         sliderThemeData: SfSliderThemeData(
            activeLabelStyle: themeData.textTheme.bodyText1!.copyWith(color: Colors.red),
            inactiveLabelStyle: themeData.textTheme.bodyText1!.copyWith(color: Colors.red),
         )
    ),
)

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/i4007071991344175

Upvotes: 1

Related Questions