颤动中的盒子阴影没有出现答案

【问题标题】：Box shadow in flutter not showing up颤动中的盒子阴影没有出现
【发布时间】：2020-06-21 05:37:02
【问题描述】：

我只是在学习颤振，我正在通过 youtube 教程尝试一些颤振示例，尝试我的 boxshadow 设计，它没有出现在 AVd 模拟器中，main.dart 文件代码如下，


import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Homepage(),
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
  ));
}

// Stateless widget=>created using a shortcut-stle
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // return Container(
    //   color: Colors.blue,
    //   child: Text("Hi Flutter App"),
    // );

    //Scaffold has prebuild some widget themes
    return Scaffold(
      appBar: AppBar(
        title: Text("My App"),
      ),

      // Container is similiar to <Div>
      body: Center(
        child: Container(
            width: 100,
            height: 100,
            alignment: Alignment.center,
            padding: const EdgeInsets.all(8),
            // color: Colors.pink,
            clipBehavior: Clip.antiAlias,
            decoration: BoxDecoration(
                color: Colors.pink,
                // shape: BoxShape.circle,
                borderRadius: BorderRadius.circular(11),
                boxShadow: [
                  BoxShadow(
                      color: Colors.black,
                      blurRadius: 10.5,
                      spreadRadius: 2.2,
                      offset: Offset(5.0, 5.0))
                ]),
            child: Text("This is a box")),
      ),
    );
  }
}

先谢谢了，请给我一个简短的答案，或者你可以给一些参考链接访问和学习的东西

【问题讨论】：

其他小部件渲染良好？
如果问题已回答，则将答案标记为正确。
好的@Nehal，将确保具体信息正确，我会勾选答案。
是的@iamyadunandan，其他样式选项渲染得很好。

标签： flutter dart material-design

【解决方案1】：

如果你想要一个阴影，不要使用clipBehavior: Clip.antiAlias这一行，因为它会删除所有超出容器绑定的像素（包括阴影）

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Homepage(),
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
  ));
}

// Stateless widget=>created using a shortcut-stle
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // return Container(
    //   color: Colors.blue,
    //   child: Text("Hi Flutter App"),
    // );

    //Scaffold has prebuild some widget themes
    return Scaffold(
      appBar: AppBar(
        title: Text("My App"),
      ),

      // Container is similiar to <Div>
      body: Center(
        child: Container(
          width: 100,
          height: 100,
          alignment: Alignment.center,
          padding: const EdgeInsets.all(8),
          // color: Colors.pink,
          // clipBehavior: Clip.antiAlias, //Dont use this line
          decoration: BoxDecoration(
            color: Colors.pink,
            // shape: BoxShape.circle,
            borderRadius: BorderRadius.circular(11),
            boxShadow: [
              BoxShadow(
                color: Colors.black,
                blurRadius: 10.5,
                spreadRadius: 2.2,
                offset: Offset(5.0, 5.0),
              )
            ],
          ),
          child: Text("This is a box"),
        ),
      ),
    );
  }
}

【讨论】：

哦，谢谢@Nehal，这就像魔术一样，感谢您花时间回答我的问题，希望您将来也能继续！
没问题，我也刚开始回答别人的问题
当问题被回答时，您应该将其标记为正确答案

【解决方案2】：

Container(
              width: 100,
              height: 100,
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8),
              // color: Colors.pink,
              //clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                  color: Colors.pink,
                  // shape: BoxShape.circle,
                  borderRadius: BorderRadius.circular(11),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black,
                        blurRadius: 10.5,
                        spreadRadius: 2.2,
                        offset: Offset(5.0, 5.0))
                  ]),
              child: Text("This is a box")),

解决方案：您必须停用 Clip.antiAlias。希望对您有所帮助！

【讨论】：

谢谢@Erik，效果很好，因为你是我问题的第二个正确答案，我不能给你打勾，我给了第一个正确答案。很高兴开始你的堆栈溢出旅途，前程似锦！