im using sliding_up_panel package i want to add my location button above the panel so i build it like this, the problem is there is a shadow after i set my sliding_up_panel color to Colors.transparent and i cannot get rid of it, or if there is any good approach to build this common map things my location and sliding panel because i don't know any method to build it

this is my panel code

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(),
        ),

this is my panel content

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(),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

CodePudding user response：

Let's just create a custom BoxShadow that takes the BlurStyle as parameter.

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;
      }
    }

Now we can use it like this :

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'),
          ),
        )
      ),
    ),
  );
}

Play around with blurStye, blurRadius, offset to meet your need