Flutter_Slider_SliderTheme_滑杆/滑块_渐变色

原创

已于 2024-01-08 19:53:57 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

于 2023-10-08 17:38:19 首次发布

文章介绍了如何在Flutter中使用自定义的`GradientRectSliderTrackShape`和`GradientSliderComponentShape`来创建带有渐变色的滑杆和滑块效果，展示了代码示例和关键部分的实现细节。

调用示例以及效果

		SliderTheme(
            data: SliderTheme.of(context).copyWith(
              trackHeight: 3,
              // 滑杆
              trackShape: const GradientRectSliderTrackShape(radius: 1.5),
              // 滑块
              thumbShape: const GradientSliderComponentShape(
                  rectWH: 14, overlayRectSpace: 4, overlayColor: Colours.black),
            ),
            child: Slider(
              value: 3,
              // 未滑动区域颜色
              inactiveColor: Color(0x55FFFFFF),
              min: 1,
              max: 10，
            ),
          )

UI效果

滑杆渐变色

import 'package:flutter/material.dart';

class GradientRectSliderTrackShape extends SliderTrackShape
    with BaseSliderTrackShape {
   
   
  final double disabledThumbGapWidth;
  final double radius;
  final LinearGradient gradient;

  /// Creates a slider track that draws 2 rectangles.
  const GradientRectSliderTrackShape(
      {
   
   this.disabledThumbGapWidth = 2.0,
      this.radius = 0,
      this.gradient = const LinearGradient(
          colors: [Color(0xFFA2FFB7), Color(0xFF00FAED)])});

  @override
  Rect getPreferredRect({
   
   
    required RenderBox parentBox,
    Offset offset = Offset.zero,
    required SliderThemeData sliderTheme,
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
   
   
    final double overlayWidth =
        sliderTheme.overlayShape

最低0.47元/天解锁文章