带有渐变和气球指示器颤动的搜索栏

Question

我想在flutter中构建这个视图，我使用step_progress_indicator库作为搜索栏，无法添加带文本的气球指示器。

 const Padding(
            padding:  EdgeInsets.symmetric(horizontal: 12.0),
            child: CoreTag(
              radius: 20,
              borderColor: Colors.transparent,
              backgroundColor: CoreColor.neutral100,
              child:Row(
                children: [
                  Text('\$0K',style: CoreTextStyle.mRegular),
                  StepProgressIndicator(
                    totalSteps: 100,
                    currentStep: 32,
                    size: 8,
                    padding: 0,
                    unselectedColor: CoreColor.neutral200,
                    roundedEdges: Radius.circular(10),
                    selectedGradientColor: CoreColor.gradient08,
                  ),
                  Text('\$300K',style: CoreTextStyle.mRegular),
                ],
              ),
            ),
          ),

核心标签类只是具有半径和背景颜色的容器

注意：这个Seekbar是固定的，只是为了显示显示值。不动。

Answer 1

要在 Flutter 中创建类似的视图，您可以将滑块小部件与气球指示器的自定义定位小部件结合使用。以下是如何实现此目标的示例：

使用滑块作为进度条 使用 Stack 和 Positioned 小部件来放置气球指示器 这是一个完整的例子：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SpendingSlider(),
        ),
      ),
    );
  }
}

class SpendingSlider extends StatefulWidget {
  @override
  _SpendingSliderState createState() => _SpendingSliderState();
}

class _SpendingSliderState extends State<SpendingSlider> {
  double currentValue = 200;
  double maxValue = 300;
  double needToSpend = 100;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Stack(
        alignment: Alignment.center,
        children: [
          Column(
            children: [
              // Balloon indicators
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(), // Placeholder
                  BalloonIndicator(
                    text: 'Need to Spend \$${needToSpend}K',
                    color: Colors.orange,
                    position: needToSpend / maxValue,
                  ),
                ],
              ),
              SizedBox(height: 30),
              // Progress bar with labels
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('\$0K', style: TextStyle(fontSize: 16)),
                  Expanded(
                    child: SliderTheme(
                      data: SliderTheme.of(context).copyWith(
                        trackHeight: 8.0,
                        activeTrackColor: Colors.blue,
                        inactiveTrackColor: Colors.grey.shade300,
                        thumbShape: RoundSliderThumbShape(enabledThumbRadius: 0.0),
                        overlayShape: RoundSliderOverlayShape(overlayRadius: 0.0),
                      ),
                      child: Slider(
                        value: currentValue,
                        min: 0,
                        max: maxValue,
                        onChanged: (value) {
                          setState(() {
                            currentValue = value;
                          });
                        },
                      ),
                    ),
                  ),
                  Text('\$300K', style: TextStyle(fontSize: 16)),
                ],
              ),
              SizedBox(height: 10),
              // Current spending indicator
              BalloonIndicator(
                text: 'Your Current Spending \$${currentValue}K',
                color: Colors.blue,
                position: currentValue / maxValue,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class BalloonIndicator extends StatelessWidget {
  final String text;
  final Color color;
  final double position;

  const BalloonIndicator({
    Key? key,
    required this.text,
    required this.color,
    required this.position,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment(position * 2 - 1, 0),
      child: Column(
        children: [
          CustomPaint(
            painter: BalloonPainter(color: color),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
              child: Text(
                text,
                style: TextStyle(color: Colors.white, fontSize: 14),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class BalloonPainter extends CustomPainter {
  final Color color;

  BalloonPainter({required this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;

    final path = Path()
      ..moveTo(0, size.height)
      ..lineTo(size.width / 2 - 5, size.height)
      ..lineTo(size.width / 2, size.height + 10)
      ..lineTo(size.width / 2 + 5, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0)
      ..close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

说明：

1. 滑块：

Slider 小部件用于表示进度条。

2. 气球指示器：

自定义小部件 BalloonIndicator 用于显示带有文本的气球。 位置参数决定了滑块上气球的位置。

3. 气球画家：

使用自定义画家BalloonPainter来绘制气球形状。

4. 堆叠和定位：

Stack 小部件用于覆盖滑块上的气球。

此设置应帮助您创建带有自定义气球指示器的滑块，如提供的图像所示。根据您的具体设计需要调整样式和位置。