如何用颤振制作搜索栏的自定义拇指？

Question

我正在尝试制作如下图所示的搜索栏，但无法制作。

我关注了 Seekbar Package 插件。

Answer 1

使用 flutter_xlider 插件让这变得轻而易举。

这是他们文档中的一个小例子：

FlutterSlider(
  ...
  handler: FlutterSliderHandler(
    decoration: BoxDecoration(),
    child: Material(
      type: MaterialType.canvas,
      color: Colors.orange,
      elevation: 3,
      child: Container(
          padding: EdgeInsets.all(5),
          child: Icon(Icons.adjust, size: 25,)),
    ),
  ),
)

他们的滑块有很好的记录，请查看。

Answer 2

如果您正在尝试创建自定义 Thumb 设计，然后你可以扩展你对现有拇指的选择 class 并覆盖绘图以获得你想要的形状。

看看这个code in dart pad它会帮助你开始。

更新：

以下是相同的源代码，以防 link 离线：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Slider Thumb Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SliderTheme(
          child: RangeSlider(
            min: 0,
            max: 100,
            divisions: 10,
            onChanged: (RangeValues value) {
              if (value.end - value.start <= 10) return;
              print('current progress: $value');
            },
            values: RangeValues(0, 100),
          ),
          data: SliderThemeData(
            // change size here to customize the thumb
            rangeThumbShape: SliderThumbShape(thumbSize: 15.0),
          ),
        ),
      ),
    );
  }
}


class SliderThumbShape extends RangeSliderThumbShape {
  final double thumbSize;

  const SliderThumbShape({this.thumbSize = 10.0});

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return Size.fromWidth(thumbSize);
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
    Animation<double> activationAnimation,
    @required Animation<double> enableAnimation,
    bool isDiscrete,
    bool isEnabled,
    bool isOnTop,
    TextDirection textDirection,
    SliderThemeData sliderTheme,
    Thumb thumb,
  }) {
    assert(context != null);
    assert(center != null);
    assert(enableAnimation != null);
    assert(sliderTheme != null);
    assert(sliderTheme.disabledThumbColor != null);
    assert(sliderTheme.thumbColor != null);

    final Canvas canvas = context.canvas;
    final ColorTween colorTween = ColorTween(
      begin: sliderTheme.disabledThumbColor,
      end: sliderTheme.thumbColor,
    );
    canvas.drawRect(
      Rect.fromCenter(center: center, height: thumbSize/2, width: thumbSize),
      Paint()..color = colorTween.evaluate(enableAnimation),
    );
  }
}

如何用颤振制作搜索栏的自定义拇指？

How to make Custom thumb of seekbar with flutter?

seekbar

dart

flutter