flutter - flutter 中的盒子阴影没有出现

Question

我只是在学习 flutter ，我正在通过 youtube 教程尝试一些 flutter 示例，尝试使用 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")),
      ),
    );
  }
}

在此先感谢，请给我一个简短的答案，或者您可以提供一些引用链接以访问和学习东西

Answer 1

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

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