CODEWITHSUNDEEP
flutterdartmaterial-design
Aashiq
Aashiq

Reputation: 497

Box shadow in flutter not showing up

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

Upvotes: 0

Views: 1596

Answers (2)

Erik German
Erik German

Reputation: 11

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!

Upvotes: 1

Nehal
Nehal

Reputation: 1489

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

Upvotes: 2

Related Questions