I'm just learning flutter,I'm trying some examples in flutter via youtube tutorials,on trying my hands on boxshadow design,it doesn't showing up in AVd emulator, the main.dart file's code is as follows,


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

Thanks in advance,please give me a brief answer or you can give some reference links to visite and learn stuffs


Solution 1: Nehal

If you want a shadow, dont use clipBehavior: Clip.antiAlias this line, as it will remove all the pixels that is out of the containers bound (including shadow)

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


Solution 2: Erik German

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

Solution: You have to deactivate the Clip.antiAlias. Hope that helps!