flutter-tutorial

Flutter BoxShadow

BoxShadow is a built-in flutter widget that allows you to throw a shadow on a box. BoxShadow is commonly used in conjunction with BoxDecoration. One of the arguments of the BoxDecoration widget is boxShadow, which takes a list of BoxShadow to cast a shadow around a box.

BoxShadow Widget has the following properties:

  • blurRadius: As the object, this attribute accepts a double value. It regulates the haziness at the shadow’s boundaries.
  • blurSigma: As the object, this property accepts a double value. Instead of logical pixels, it regulates the blur-radius in terms of sigma.
  • colour: To determine the colour of the shadow, the colour property uses the Color class as the object.
  • offset: The object assigned to this property is the offset class, which regulates the shadow’s visibility.
  • spreadRadius: This property also accepts a double value as an object to determine the extent to which the box should be inflated before the blur is applied.

Example:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Learn Code Zone'),
          backgroundColor: Colors.blue,
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IconButton
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.comment),
              tooltip: 'Comment',
              onPressed: () {},
            ), //IconButton
          ], //<Widget>[]
        ), //AppBar
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: SizedBox(
              height: 200,
              width: 250,
              child: Container(
                decoration: BoxDecoration(
                  //DecorationImage
                  border: Border.all(
                      color: Colors.green,
                      width: 4.0,
                      style: BorderStyle.solid), //Border.all

                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10.0),
                    topRight: Radius.circular(10.0),
                    bottomLeft: Radius.circular(10.0),
                    bottomRight: Radius.circular(10.0),
                  ),

                  boxShadow: [
                    BoxShadow(
                      color: Colors.blue,
                      offset: const Offset(
                        5.0,
                        5.0,
                      ),
                      blurRadius: 10.0,
                      spreadRadius: 2.0,
                    ), //BoxShadow
                    BoxShadow(
                      color: Colors.white,
                      offset: const Offset(0.0, 0.0),
                      blurRadius: 0.0,
                      spreadRadius: 0.0,
                    ), //BoxShadow
                  ],
                ), //BoxDecoration
              ), //Container
            ), //SizedBox
          ), //Padding
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false,
      //Debug banner is turned off
    ), //MaterialApp
  );
}

Explanation:

As previously discussed, the BoxDecoration widget has a boxShadow argument that takes in a ListBoxShadow> (a list of BoxShadow widgets) as the object to cast a shadow on the box. The top-most widget in the list is displayed at the very bottom of the app.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.