¿Cómo agregar una elevación inferior a un contenedor en Flutter?

Verificamos profundamente cada posts en nuestro espacio con el objetivo de enseñarte en todo momento información certera y certera.

Solución:

En mi opción, la mejor manera es agregar Material() sobre el widget que está utilizando actualmente.

return Material(
       elevation: 20,
       child Container(),
       );

Usar ClipRRect para eliminar efectos de sombra y agregar fondo margin a Container para superar ClipRRect en la parte inferior solo para mostrar el efecto de sombra.

Ejemplo:

import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  Widget build(BuildContext context) 
    return MaterialApp(
      home: HomePage(),
    );
  


class HomePage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(5.0),
            child: Container(
              height: 100.0,
              margin: const EdgeInsets.only(bottom: 6.0), //Same as `blurRadius` i guess
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5.0),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey,
                    offset: Offset(0.0, 1.0), //(x,y)
                    blurRadius: 6.0,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  

Resultado:

Si solo desea agregar una sombra, entonces BoxDecoration combinado con BoxShadow hará el trabajo

...
...
body: Container(
    margin: EdgeInsets.all(8),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0),
        color: Colors.white,
        boxShadow: [
            BoxShadow(
                color: Colors.black,
                blurRadius: 2.0,
                spreadRadius: 0.0,
                offset: Offset(2.0, 2.0), // shadow direction: bottom right
            )
        ],
    ),
    child: Container(width: 100, height: 50) // child widget, replace with your own
),
...
...

Reseñas y puntuaciones

Te invitamos a apoyar nuestro estudio mostrando un comentario o dejando una valoración te lo agradecemos.

---

---

Utiliza Nuestro Buscador