0

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

4
  • 1
    other widgets render well?
    – Yadu
    Jun 21, 2020 at 5:51
  • Mark an answer as correct, if the question is answered.
    – Nehal
    Jun 21, 2020 at 6:30
  • ok @Nehal,will make sure the particular is correct and i'll tick that answer.
    – Aashiq
    Jun 21, 2020 at 6:54
  • Yes @iamyadunandan,other stylling options rendered well.
    – Aashiq
    Jun 21, 2020 at 6:56

2 Answers 2

2

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"),
        ),
      ),
    );
  }
}
3
  • OH,thanks @Nehal,This works like an magic,thanks for your time in answer my question,hope you will continue in the future as well!
    – Aashiq
    Jun 21, 2020 at 6:58
  • 1
    No problem, I also just started answering other people's questions
    – Nehal
    Jun 21, 2020 at 8:55
  • As the question is answered, you should mark this as the correct answer
    – Nehal
    Jun 24, 2020 at 13:13
1
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!

1
  • Thanks @Erik,it worked well,since you are the second right answer to my question,I cant give the tick for you,I gave it to the first right answer.Happy to start your stack overflow journey,a great journey ahead!
    – Aashiq
    Jun 21, 2020 at 7:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.