Question 76088 in Flutter Question posted in
The official Flutter documentation can be found here.

Add shadow to border of modal bottom sheet – Flutter

How can I add a shadow to the border of modal bottom sheet? Here’s my code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          useMaterial3: true,
          bottomSheetTheme: const BottomSheetThemeData(
              modalElevation: 1000.0,
              elevation: 1000.0,
              clipBehavior: Clip.hardEdge,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20))))),
      home: TabBarDemo(),
    );
  }
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: ElevatedButton(
              child: Text('Press'),
              onPressed: () {
                showModalBottomSheet(
                    barrierColor: Colors.transparent,
                    context: context,
                    builder: (context) {
                      return Container();
                    });
              })),
    );
  }
}

Even though I’ve set the elevation property, I don’t see any shadow on the border of the bottom sheet. Instead I see a plain border:
enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The shadow is controlled by setting either the BottomSheetThemeData.modalElevation property or the elevation parameter in the call to showModalBottomSheet. BottomSheetThemeData.elevation appears to do nothing in my example. The shadow is not prominent and not controllable as with BoxShadow, but at least clipping works properly. In my question, the shadow was visible, but it was spread out because of the large modalElevation value.


  2. 0

    You can use boxShadow for this. Try this code.

    Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text('Press'),
          onPressed: () {
            showModalBottomSheet(
              barrierColor: Colors.transparent,
              context: context,
              builder: (context) {
                return Container(
                  height: 300,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
                    boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 10.0)],
                  ),
                );
              },
            );
          },
        ),
      ),
    );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search