sliding_up_panel 阴影如何去除

Question

我使用 sliding_up_panel 包我想在面板上方添加我的位置按钮所以我这样构建它，问题是我将 sliding_up_panel 颜色设置为 Colors.transparent 而且我无法摆脱它，或者如果有任何好的方法来构建这个通用地图，我的位置和滑动面板就是因为我不知道任何构建它的方法

这是我的面板代码

SlidingUpPanel(
          controller: _panelC,
          minHeight: MediaQuery.of(context).size.height * 0.15,
          maxHeight: MediaQuery.of(context).size.height * 0.8,
          panelSnapping: true,
          snapPoint: 0.4,
          color: Colors.transparent,
          backdropOpacity: 0,
          backdropColor: Colors.transparent,
          backdropEnabled: false,
          parallaxEnabled: true,
          parallaxOffset: 0.5,
          defaultPanelState: PanelState.CLOSED,
          panelBuilder: (controller) {
            return _buildPanel(controller);
          },
          body: _buildMap(),
        ),

这是我的面板内容

Widget _buildPanel(controller) {
    return Column(
      children: [
        Align(
          alignment: Alignment.centerRight,
          child: ElevatedButton(
            child: Icon(
              Icons.my_location,
              color: Colors.white,
            ),
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              fixedSize: const Size(48, 48),
              shape: const CircleBorder(),
            ),
          ),
        ),
        SizedBox(height: 16),
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.vertical(
                top: Radius.circular(16),
              ),
            ),
            child: Column(
              children: [                                         
                // list of place to go
                Expanded(
                  child: ListView(
                    controller: controller,
                    children: List.generate(
                      3,
                      (index) => _buildListTile(),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

Answer 1

让我们创建一个将 BlurStyle 作为参数的自定义 BoxShadow。

class CustomBoxShadow extends BoxShadow {
      final BlurStyle blurStyle;
    
      const CustomBoxShadow({
        Color color = const Color(0xFF000000),
        Offset offset = Offset.zero,
        double blurRadius = 0.0,
        this.blurStyle = BlurStyle.normal,
      }) : super(color: color, offset: offset, blurRadius: blurRadius);
    
      @override
      Paint toPaint() {
        final Paint result = Paint()
          ..color = color
          ..maskFilter = MaskFilter.blur(this.blurStyle, blurSigma);
        assert(() {
          if (debugDisableShadows)
            result.maskFilter = null;
          return true;
        }());
        return result;
      }
    }

现在我们可以这样使用了:

import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: SlidingUpPanel(
          boxShadow: [
            new CustomBoxShadow(
                color: Colors.black,
                offset: new Offset(10.0, 10.0),
                blurRadius: 0.0,
                blurStyle: BlurStyle.outer
            )
          ],
          panel: const Center(
            child: Text('my slide content'),
          ),
          body: const Center(
            child: Text('my body'),
          ),
        )
      ),
    ),
  );
}

使用 blurStye、blurRadius、offset 来满足您的需要

sliding_up_panel 阴影如何去除

sliding_up_panel shadow how to remove it

dart

flutter