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

Issue with CSS color gradient transparency

I've successfully implemented a gradient that transitions from transparent to white by using the following CSS code: linear-gradient(to right, transparent, white) If you want to see it in action, click on this link: http://jsfiddle.net/fs8gpha2/ Al ...

csslinear-gradients

Using HTML and CSS, change the background color to red based on the value of each cell in a forEach loop

Need help with my HTML/CSS code. I have a table where I need to change the background color of any row that has a cell value of "Not Approved" while using a foreach loop in Google Apps Script to send an email with two tables. What is t ...

htmljquerycss

Forming triangles with outlines

Recently, I had the challenge of designing speech bubbles and found a clever technique to create the triangular tip at the end using CSS. By setting the element's width and height to 0 and playing around with borders, you can achieve diagonal shapes f ...

css

Positioning Input and Dropdown Elements within a Data Table Using CSS

I am currently working on setting up a data table for an application using Vue.js, and I am facing a challenge in relation to the arrangement of input elements. The specific requirement is that certain columns within the table should contain values that ar ...

cssvue.js

Is there a way to display an asterisk within a select2 dropdown to signify that a field is mandatory?

I'm facing an issue with the Select2 plugin in my form. While all fields are required and marked by an asterisk when empty, the Select2 dropdown ignores this validation attribute. Therefore, I am wondering: Is there a way to display an asterisk image ...

phpjquerycsscodeigniterjquery-select2

Arranging content in a horizontal row using div elements

My webpage features two div elements. One of the div represents header content, while the other div displays details content. I want both sets of content to be aligned side by side. Specifically, I need the details content to always appear on the right-han ...

htmlcss

Enclose an <img> tag within a <span> element and use jQuery to assign a class to the <span>

I am trying to wrap a specific <img> tag with a <span> element and assign a class to the <span>. Below is the relevant code snippet: <img id="wrapped-image" alt="" src=""> Despite my efforts, the following code does not seem to w ...

jqueryhtmlcss

What is the best way to center the input on the page?

Does anyone know how to align the <input type="text"> in the center? I'm trying to create a login form but having trouble with positioning the input element. ...

htmlcss

Optimizing the position of the datepicker dropdown in Boostrap 4

I am currently utilizing Bootstrap 4 (final) with the boostrap-datepicker-plugin 1.7.1. Since Bootstrap 4 no longer uses .input-group-addon elements for the calendar icon, but instead .input-group-prepend and .input-group-append, I made some modificatio ...

jquerycsstwitter-bootstrapdatepickerbootstrap-4

Is it possible for me to create a CSS class based on a condition using [ngCLASS]?

I am struggling with logic writing in my Angular2 project. On a HTML page, I have two buttons - YES and NO that I want to style with different colors. I have set up a condition in the div tag like this: ngClass="'result'?'yes':' ...

jquerycssangularangular2-templateangular2-forms

Is there a white outline on the Cordova Text Font?

Currently working on a Cordova app where I have encountered an issue with the text display. The problem lies in the white outline surrounding the text, which is not visually appealing. In my code, I have a div with the style attribute background-color: ye ...

csshtmlcordova

What is the best way to turn off default CSS styling in KendoUI?

I am facing an issue in my application where I am using global CSS definitions for "INPUT", "SELECT", and other elements. The problem arises when I try to incorporate KendoUI widgets, as they override my default CSS styles. For instance, my CSS code looks ...

javascriptjqueryhtmlcsskendo-ui

Exploring the Contrast between Using @import for Styles and js Import for Webpack Configuration

While delving into the source code of ant-design, I couldn't help but notice that each component has both an index.ts and a index.less file in the style folder. This got me thinking - why is JavaScript being used to manage dependencies here? What woul ...

javascriptcsswebpackimportless

Changing Parameters in Absolutely Positioned Sections

I have successfully created a fixed header with a higher z-index than the body content, allowing the content to slide underneath it. To position the content div directly below the fixed header, I applied a position:relative and specified a top value. Init ...

htmlcssposition

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

Can someone please review this source code? Here is the demo link: http://jsfiddle.net/bala2024/nvR2S/40/ $('.expand').click(function(){ $(this).stop().animate({ width:'73%', height:'130px' }); $( ...

javascriptjqueryhtmlcss

Tips for replacing the default pointer image

Is there a way to change the default image for cursor: pointer to a custom image without having to create a new class for every element? Creating a class and specifying the hover value for cursor is not an ideal solution as it would require adding the cla ...

htmlcsspointersmouse-cursor

triangle as a backdrop

Looking for a unique design for your website background? How about a triangle split with black on one side and white on the other, like this image? I can't seem to find this online, so any help would be greatly appreciated. Is it possible to achieve t ...

htmlcsscolorsbackground

Alternating CSS Designs for Displaying Multiple Mysql Query Results

I have a website where users can search for a specific product in their location, and the site will display a list of results. if(isset($_POST['zip'])){ $qry="SELECT business_id FROM ".TBL_BUSINESS." WHERE zip LIKE '%".$_POST['zip&apos ...

phpmysqlcss

Internet Explorer experiences performance issues when a table containing over 500 rows is being utilized

Can anyone offer advice on speeding up the display of large tables with 500+ rows in Internet Explorer? Here is my current approach: The MySQL query result includes 500+ rows, which I then loop through using a while loop to display: echo "<tr class=& ...

phpjqueryhtmlcssinternet-explorer

What are some techniques I can use to ensure my image grid is responsive in html/css?

If you want to check out the website, you can visit . The main goal is to create an image grid for a portfolio. It appears really nice on a 1080p screen, but anything below that seems messy and unorganized. Any assistance or suggestions on how to improve ...

htmlcssimagestyles