What is the best way to create a unique shadow effect for a container in Flutter?

I am facing a challenge with my screen layout that uses GridView.builder with crossAxisCount: 3. In the itemBuilder, I am returning a Container with shadows on the left, right, and bottom, but so far, I have not been able to achieve the desired outcome.

Here is the current result:

And here is the result I am aiming for:

GridView.builder(
  padding: EdgeInsets.symmetric(horizontal: 15),
  scrollDirection: Axis.vertical,
  physics: BouncingScrollPhysics(),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 15,
    mainAxisSpacing: 20,
    childAspectRatio: 2 / 3.3,
  ),
  primary: false,
  shrinkWrap: true,
  itemCount: 100,
  itemBuilder: (context, index) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            spreadRadius: 5,
            offset: Offset(1, 1)),
        ]),
    );
  },
),
cssflutterdartcontainersshadow

Answer №1

I have successfully implemented the desired layout based on the provided image using a Card widget with elevated design instead of a box shadow. In addition, I made adjustments to the crossAxisSpacing to closely match the picture.

GridView.builder(
    padding: EdgeInsets.symmetric(horizontal: 15),
    scrollDirection: Axis.vertical,
    physics: BouncingScrollPhysics(),
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3,
      crossAxisSpacing: 10,
      mainAxisSpacing: 20,
      childAspectRatio: 2 / 3.3,
    ),
    primary: false,
    shrinkWrap: true,
    itemCount: 100,
    itemBuilder: (context, index) {
      return Card(
        elevation: 5,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      );
    },
  ),

Answer №2

Your current code includes higher blur radius and spread radius values, which may be causing excessive blurring. It is recommended to reduce these values and adjust them based on your desired outcome. You can try the following code snippet and fine-tune the blur and spread radius according to your specific requirements:

    BoxShadow(
                  color: Colors.black12,
                  blurRadius: 2,
                  spreadRadius: 2,
                  offset: Offset(0, 0)),

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the purpose of activating hover styles when tapping on mobile devices?

On my button, you can see the color change when hovering: button { background-color: orange; } button:hover { background-color: darkorange; } Check out this example: https://jsfiddle.net/oepb5ks4/ While this works well on desktop, it's a diffe ...

htmlcss

Elements are receiving CSS properties from other elements within the same component

I'm encountering an issue with my components: 1. I cannot seem to style html and body in signin.component.css for some reason. The workaround I found was using: encapsulation: ViewEncapsulation.None ==> This works perfectly However, when I switch ...

htmlcssangular

Arrange a variety of images with different dimensions in a narrow row while keeping the width fixed and adjusting the height accordingly

Imagine you have a collection of 3 (or more) images, each with different sizes and aspect ratios, within a fixed-width div (for example width:100%): <div class="image-row"> <img src="1.png"> <img src="2.png"> <img src="3.png" ...

htmlcssimageflexboxalignment

Responsiveness of the element along the vertical axis

I have an element that, when clicked, should display additional content. However, when the headline contains a lot of text, the element does not expand vertically as it should. Thank you for your help! Check out how it looks currently This is my HTML co ...

htmlcssresponsive-designresponsiveness

Is there a way to define the 'topic' attribute in FCM?

While attempting to send an FCM (Firebase Cloud Messaging) message in Node.js, I ran into an issue where the 'topic' property was flagged as invalid. Despite consulting the official documentation, a solution remained elusive. How can I correctly ...

androidnode.jsflutterdartfirebase-cloud-messaging

Creating two horizontal flex containers with an input box that is responsive can be achieved by setting the display property

I need some assistance with a layout issue I am facing. Currently, I have two flex containers in a row - one set to flex-start and the other to flex-end. Both of these containers are within a wrapping div that is also set to flex. When the width of the wi ...

cssflexbox

Is it possible to modify the color of a span element within a select dropdown?

Is there a way to change the color of a span to red within a select option in js fiddle? I am trying to modify the color of <span class="myError">This is a required field.</span> to red https://i.sstatic.net/nRF2c.png select{ color: green; ...

javascriptjqueryhtmlcss

What is preventing the 'p:nth-child(1)' from functioning properly in my HTML code?

Even though I used p:nth-child(1){color: white;} in my CSS style tag, it did not produce the expected result. body { background-color: #162b85; } button, p:nth-child(1) { color: white; } <p class="center">Register your account</p&g ...

htmlcss

Is the <ul> tag aligning to the left?

I recently encountered an issue while designing my website. I created a div with a width of 200px on the right side of the webpage, and added a list of links within it. However, I noticed that elements inside the div are aligning slightly to the left, givi ...

htmlcss

What are the steps to creating a webpage with scrolling in HTML?

Essentially, I have a question that may sound similar to others, but please hear me out. What I am looking for is the ability to have one photo fixed in place while being able to scroll within it. To provide a better understanding, here is an example: www. ...

htmlcss

Trigger a series of functions upon clicking with ReactJS

Need some assistance with an alert message functionality. I have a button labeled Checkout, and when clicked, it should clear the cart and display an alert. At present, the individual functions work as expected - calling emptyCart() works fine, and calling ...

javascripthtmljquerycssreactjs

Continue duplicating image to stretch header across entire screen

Looking to create a seamless connection between a Header image (2300x328px) and another image (456x328px) so that the header fills the entire width available without overlapping due to a pattern. I need the second image to extend the header to th ...

htmlcssheaderrepeat

Allow users to manually resize <td>'s within a platform

Looking for a way to allow users to manually resize a textarea and iframe in a system I am developing. Here's an example of what I mean: <body> <table width="100%"> <tr> <!-- I want the user to be able to re ...

htmlcssresize

Even when applying a class, the CSS link:hover style will only affect the initial occurrence

I've hit a wall on this issue and can't seem to find a solution. I styled a few links using classes, but it seems that only the first link is accepting the :hover and :visited state styling. I made sure to use classes to style all of them. Not su ...

htmlcsshyperlinkhovervisited

Personalize scrollbar appearance in Mozilla Firefox and Internet Explorer

When it comes to customizing the scrollbar in chrome, CSS makes it easy: ::-webkit-scrollbar { width: 7px; } Unfortunately, this method does not have the same result in Firefox (version 38) and IE (version 11). I attempted the following code as an alter ...

cssscrollbar

Utilizing opera and applying an inset box-shadow when active

Check out this link When viewing in Chrome, the button looks great. However, when switching to Opera, the box-shadow is not visible when the button is pressed (:active). This issue only occurs when the box-shadow on the :active state is set to inset, like ...

cssopera

`inline-block elements are centered when displayed in Firefox`

I have a question regarding formatting h2 and h3 elements to display as inline-block. Below is the code snippet: <div id="content" class="content-width"> <h2 class="headline"> My Headline </h2> <h3 class="subheadline"> My S ...

htmlcss

Guide to displaying options in the Vue material select box even when the default value is blank

I have implemented the material design framework vuematerial with vue.js. In traditional HTML, a selection box looks like this: <select> <option value="">You should initially see this</option> <option value="1">One</o ...

javascripthtmlcssvue.jsvue-material

How can we show pictures when a user clicks?

After creating a model for displaying images in a modal when clicked by the user, I encountered an issue. Whenever I try to access the images from the gallery within the modal content, it only displays a blank popup. I want the pictures from the image gall ...

javascripthtmlcssmodal-dialogshopify

The pre tag does not have any effect when added after the onload event

I have been experimenting with a jQuery plugin for drawing arrows, detailed in this article. When using the plugin, this code is transformed: <pre class="arrows-and-boxes"> (Src) > (Target) </pre> into this format: Src --> Target The ...

javascriptjquerycsspre