Widget BoxShadow – Flutter

Publicado em 11/12/2023 por cacpnrj

Tempo de leitura: 3 minutes

BoxShadow é um widget embutido no flutter, cuja funcionalidade é projetar sombra em uma caixa. O widget BoxShadow é geralmente usado com BoxDecoration. No widget BoxDecoration, um de seus parâmetros é boxShadow que pega uma lista de BoxShadow para projetar uma sombra ao redor de uma caixa.

BoxShadow({
  Color color = const Colors.write,
  Offset offset = Offset.zero,
  double blurRadius = 0.0,
  double spreadRadius = 0.0,
  BlurStyle blurStyle = BlurStyle.normal,
})

Propriedades do BoxShadow Widget:

blurRadius: Esta propriedade assume um valor duplo como o objeto. Ele controla a nebulosidade nas bordas da sombra.
blurSignma: Esta propriedade tem um valor duplo como objeto. Ele controla o raio de desfoque em termos de sigma em vez de pixels lógicos.
color: A propriedade color leva a classe Color como o objeto para decidir a cor da sombra.
offset: a classe Offset é o objeto dado a esta propriedade que controla até que ponto a sombra será visível.
spreadRadius: Esta propriedade também assume um valor duplo como o objeto para decidir até que ponto a caixa deve ser inflada antes de aplicar o desfoque.
blueStyle: O BlurStyle a ser usado para esta sombra com seguintes tipos (normal, solid, outer, inner)

Exemplo: Aqui veremos como projetar sombra em uma caixa, usando o widget BoxShadow dentro de BoxDecoration.

Este é o widget BoxDecoration que tem uma imagem e uma borda ao seu redor. Veremos como aplicar sombra a esta caixa.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: const Text(
            'Demonstração do BoxShedow',
            style: TextStyle(
                fontWeight: FontWeight.w600, fontSize: 16, color: Colors.white),
          ),
          leading: IconButton(
            icon: const Icon(
              Icons.menu,
              color: Colors.white,
            ),
            tooltip: 'Menu',
            onPressed: () {},
          ),
          actions: <Widget>[
            IconButton(
              icon: const Icon(
                Icons.comment,
                color: Colors.white,
              ),
              tooltip: 'Comment',
              onPressed: () {},
            ),
          ],
        ),
        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://capsistema.com.br/wp-content/uploads/2023/12/cropped-LogoCapSistema.jpg'), //NetworkImage
                    scale: 3.0,
                  ), //DecprationImage
                  border: Border.all(
                    color: Colors.blueAccent,
                    width: 4.0,
                    style: BorderStyle.solid,
                  ), //Border.all

                  borderRadius: const 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.blueAccent[200]!,
                      offset: const Offset(
                        5.0,
                        5.0,
                      ),
                      blurRadius: 10.0,
                      spreadRadius: 2.0,
                    ), //BoxShadow
                    const BoxShadow(
                      color: Colors.white,
                      offset: Offset(0.0, 0.0),
                      blurRadius: 0.0,
                      spreadRadius: 0.0,
                    ), //BoxShadow
                  ],
                ), //BoxDecoration
              ), //Container
            ), //SizedBox
          ), //Padding
        ), //Center
      ),
    ); //Scaffol
  }
 )
}

Explicando

Como mencionado anteriormente, o widget BoxDecoration tem um parâmetro chamado boxShadow que leva em List <BoxShadow> (uma lista de widgets BoxShadow ) como o objeto para projetar uma sombra na caixa. O widget na parte superior da lista aparece na parte inferior do aplicativo.

Agora, dando uma olhada no código, podemos ver que ao primeiro widget BoxShadow da lista é atribuída uma cor de blueAccent [200] , que está agindo como a sombra real da caixa no aplicativo. E então temos o deslocamento que é definido como 5,0 para os eixos x e y, esta é a distância para a qual a sombra verde será projetada. Então, temos o raio de desfoque definido como 10, que está dando um efeito de neblina à sombra seguido pelo raio de espalhamento definido como 2.

No segundo widget BoxShadow, a cor atribuída é branco e o deslocamento é definido como zero para os eixos x e y, para tornar o fundo da imagem branco (que é a cor original). Se não tivéssemos adicionado o segundo widget BoxShadow , a saída teria sido a imagem abaixo.