dart 向弯曲的应用栏添加阴影

roqulrg3 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(100)

我有一个弯曲的应用程序栏使用以下代码。我想添加一个阴影的权利下的曲线。任何帮助将不胜感激! image of curved AppBar
代码：

appBar: PreferredSize(
        preferredSize: const Size.fromHeight(85.0),
        child: AppBar(
          title: const Text("Services"),
          flexibleSpace: ClipPath(
            clipper: Customshape(),
            child: Container(
              height: 250,
              width: MediaQuery.of(context).size.width,
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  stops: [0.1, 0.55],
                  colors: <Color>[Color(0xff21CDAF), Color(0xff1093BC)],
                ),
              ),
            ),
          ),
        ),
      ),

class Customshape extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double height = size.height;
    double width = size.width;
    var path = Path();
    path.lineTo(0, height - 50);
    path.quadraticBezierTo(width / 2, height, width, height - 50);
    path.lineTo(width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}

我试着用一个材质小部件 Package 容器，并在盒子装饰中添加一个盒子阴影，但都不起作用。

dart

来源：https://stackoverflow.com/questions/75638735/adding-shadow-to-curved-appbar

2条答案

按热度按时间

ttvkxqim1#

来获得你可以使用的阴影

仰角
shadowColor还可以修改工具栏高度和工具栏不透明度以实现阴影效果

如果您需要进一步的帮助，我将很乐意帮助更多！

赞(0）回复(0）举报 2023-03-05

w8f9ii692#

您可以使用此Custom Widget：

class CurvedAppBar extends StatelessWidget implements PreferredSizeWidget {
  final double _preferredHeight = 40.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          stops: [0.1, 0.55],
          colors: <Color>[Color(0xff21CDAF), Color(0xff1093BC)],
        ),
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(40),
          bottomRight: Radius.circular(40),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.purple.withOpacity(0.8), //👈 Customize your shadow
            spreadRadius: 1,
            blurRadius: 4,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(
            alignment: Alignment.center,
            height: 60,
            child: Text(
              'Resources',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(_preferredHeight);
}

并将其用作：

Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: CurvedAppBar(), // 👈 Add it here
        body: Center(child: Text("Hello")),
      ),
    );
  }

输出：

赞(0）回复(0）举报 2023-03-05

我来回答

dart 向弯曲的应用栏添加阴影

2条答案

相关问题

热门标签

最新问答