BoxShadow Widget in Flutter

Casting a shadow on a box is the capability of the built-in Flutter widget BoxShadow. Typically, BoxShadow is utilized in conjunction with BoxDecoration. In the BoxDecoration widget one of its parameters is boxShadow which takes a list of BoxShadow to cast a shadow around a box of mobile application.

Syntex

const BoxShadow(

{

Color color: const Color(0xFF000000),

Offset offset: Offset.zero,

double blurRadius: 0.0,

double spreadRadius: 0.0}

)

Properties of BoxShadow Widget:

blurRadius : A double value is entered into this attribute as the object. It manages the haze around the shadow's edges.
Blursigma : A double value is entered into this attribute as the object. It controls the blur-radius in terms of sigma instead of logical pixels.
Color: The color property used for shadow.
Offset: The object assigned to this attribute, offset class, determines how much the shadow will show.

spreadRadius: Additionally, this property uses a double number as the object to determine how much the box should be expanded before the blur is applied.

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project)

Step 2: Adding material package

Import method the runApp method in the main function call first while run the application.

import 'package:flutter/material.dart';

void main() {

runApp(RunMyApp());

}

Step 3: Creating a stateless widget

We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

class RunMyApp extends StatelessWidget {

const RunMyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(home);

}

Step 4: Creating a boxshadow widget

 boxShadow: [
   BoxShadow(
     color: Colors.white10,
     offset: const Offset(
       5.0,
       5.0,
     ),
     blurRadius: 10.0,
     spreadRadius: 2.0,
   ),
   BoxShadow(
     color: Colors.white,
     offset: const Offset(0.0, 0.0),
     blurRadius: 0.0,
    spreadRadius: 0.0,
    ),
 ]

Final code :

 import 'package:flutter/material.dart';

 void main()
 {
   runApp(HomeScreen());
 }
 class HomeScreen extends StatelessWidget {
   const HomeScreen({super.key});

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
           title: Text('Candidroot solutions'),
            backgroundColor: Colors.blue,
            leading: IconButton(
              icon: Icon(Icons.menu),
              tooltip: 'Menu',
              onPressed: () {},
           ),
 
         ),
         body: Center(
           child: Padding(
             padding: const EdgeInsets.all(12.0),
             child: SizedBox(
               height: 200,
               width: 250,
               child: Container(
                   child:  Image.asset('assets/images/company_logo.png'),
                 decoration: BoxDecoration(
                      boxShadow: [
                       BoxShadow(
                           color: Colors.black.withOpacity(0.7),
                           blurRadius: 5.0,
                           offset: Offset(0.0, 3.0)
                       ),
                     ],
                     border: Border.all( color: Colors.blue),
                     color: Colors.white,
                     borderRadius: BorderRadius.circular(10.0)
                 ),
 
               ),
             ),
           ),
         ),
       ),
       debugShowCheckedModeBanner: true,
     );
   }
 }

BoxShadow Widget in Flutter

Syntex

Properties of BoxShadow Widget:

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project)

Step 2: Adding material package

Step 3: Creating a stateless widget

Step 4: Creating a boxshadow widget

Share this post

Tags

SUBSCRIBE THIS FORM

Recent Posts

Our blogs

Archive

Follow us