Flutter – BoxShadow 小部件

BoxShadow是flutter一个内置的小工具，其功能是将投射阴影，以一个盒子。 BoxShadow小部件通常与BoxDecoration一起使用。在BoxDecoration小部件中，它的参数之一是boxShadow ，它采用BoxShadow列表在框周围投射阴影。

BoxShadow 类的构造函数：

const BoxShadow(
{Color color: const Color(0xFF000000),
Offset offset: Offset.zero,
double blurRadius: 0.0,
double spreadRadius: 0.0}
)

BoxShadow 小部件的属性：

blurRadius：此属性采用双精度值作为对象。它控制阴影边缘的模糊度。
blurSignma：此属性采用双精度值作为对象。它根据 sigma 而不是逻辑像素来控制模糊半径。
color： color属性以Color类为对象来决定阴影的颜色。
offset： Offset类是赋予此属性的对象，它控制阴影可见的程度。
spreadRadius：此属性还接受一个double值作为对象，以决定在应用模糊之前框应膨胀的程度。

例如：在这里，我们将看到如何投射阴影的盒子，其通过使用BoxShadow插件的BoxDecoration内。

这是 BoxDecoration 小部件，它有一个图像和一个围绕它的边框。我们将看到如何将阴影应用于此框。

主要的。dart

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(
      
    //Our app widget tree starts herwe
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IcoButton
          actions: [
            IconButton(
              icon: Icon(Icons.comment),
              tooltip: 'Comment',
              onPressed: () {},
            ), //IconButton
          ], //[]
        ), //AppBar
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: SizedBox(
              height: 200,
              width: 250,
              child: Container(
                decoration: BoxDecoration(
                  image: const DecorationImage(
                    image: NetworkImage(
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'), //NetworkImage
                    scale: 3.0,
                  ), //DecprationImage
                  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),
                  ),
                  //BorderRadius.only
                  /************************************/
                  /* The BoxShadow widget  is here */
                  /************************************/
                  boxShadow: [
                    BoxShadow(
                      color: Colors.greenAccent[200],
                      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, 
      //Deug banner is turned off
    ), //MaterialApp
  );
}

输出：

说明：如前所述， BoxDecoration小部件有一个名为boxShadow的参数，它接受List (一个BoxShadow小部件列表)作为向框投射阴影的对象。列表中最顶部的小部件出现在应用程序的最底部。

现在，查看代码，我们可以看到列表中的第一个BoxShadow小部件被分配了greenAccent[400]颜色，这就像应用程序中框的实际阴影。然后我们将 x 轴和 y 轴的偏移量设置为5.0 ，这是绿色阴影投射的距离。然后我们将模糊半径设置为 10，这会为阴影提供雾霾效果，然后将传播半径设置为 2。

在第二个BoxShadow小部件中，分配的颜色是白色，并且 x 轴和 y 轴的偏移量都设置为零，这是为了使图像背景为白色(这是原始颜色)。如果我们没有添加第二个BoxShadow小部件，那么输出将是下图。

所以，这就是我们如何将Boxshadow添加到我们的flutter应用程序中。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?