flutter 将阴影添加到模态底片的边框

xpszyzbs  于 2023-03-04  发布在  Flutter
关注(0)|答案(1)|浏览(150)

我怎样才能添加一个阴影的边界模态底部表?以下是我的代码:

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

尽管我设置了elevation属性,但在底部工作表的边框上看不到任何阴影,而是看到一个普通边框:

nbnkbykc

nbnkbykc1#

你可以使用boxShadow来完成这个任务,试试下面的代码。

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

相关问题