Slider, Customizing Widgets with Themes

Slider, Customizing Widgets with Themes

 

[Ko]

 - Slider 위젯에 theme을 적용해서 customising하려면 SliderTheme으로 감싸고, data property에 SliderTheme을 전달해주면 되는데, 기본 SliderTheme을 유지하면서 원하는 부분만 변경하려면 SliderTeme.of(context).copyWith(~~~) 의 방식으로 접근해서 필요한 theme만 세팅하면 됨.

 

[En]

 - To customize by applying the theme to the Slider widget, wrap it with SliderTheme, and pass SliderTheme to the data property. To change the desired part while maintaining the basic SliderTheme, access the method of SliderTeme.of (context) .copyWith (~~~) Just set the theme you need.

 

Slider(

                    value: height.toDouble(),

                    min: 120.0,

                    max: 220.0,

                    activeColor: Color(0xFFFEB1555),

                    inactiveColor: Color(0xFF8D8E98),

                    onChanged: (double newValue) {

                      setState(() {

                        height = newValue.round();

                      });

                    },

                  ),

 

SliderTheme(

                    data: SliderTheme.of(context).copyWith(

                      inactiveTrackColor: Color(0xFF8D8E98),

                      activeTrackColor: Colors.white,

                      thumbColor: Color(0xFFEB1555),

                      overlayColor: Color(0x29EB1555),

                      thumbShape:

                          RoundSliderThumbShape(enabledThumbRadius: 15.0),

                      overlayShape:

                          RoundSliderOverlayShape(overlayRadius: 30.0),

                    ),

                    child: Slider(

                      value: height.toDouble(),

                      min: 120.0,

                      max: 220.0,

                      onChanged: (double newValue) {

                        setState(() {

                          height = newValue.round();

                        });

                      },

                    ),

                  ),