skip to Main Content

I have a GridView builder that renders a list of Container widgets. However, the box shadow of the Container widgets will be cut off as shown in the following screenshot.

enter image description here

GridLayOut Class

    import 'package:flutter/material.dart';
    import 'package:project/utils/constants/sizes.dart';
    
    class GridLayout extends StatelessWidget {
    const GridLayout({
        Key? key,
        required this.itemCount,
        required this.itemBuilder,
        this.mainAxisExtent = 190,
    }) : super(key: key);

    final int itemCount;
    final Widget? Function(BuildContext, int) itemBuilder;
    final double? mainAxisExtent;

    @override
    Widget build(BuildContext context) {
      return GridView.builder(
        itemCount: itemCount,
        shrinkWrap: true,
        padding: EdgeInsets.zero,
        physics: const NeverScrollableScrollPhysics(),
        clipBehavior: Clip.none,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisExtent: mainAxisExtent,
          mainAxisSpacing: 16,
          crossAxisSpacing: 16,
        ),
        itemBuilder: itemBuilder,
      );
    }
}
}

GridItem Class

import 'package:flutter/material.dart';
import 'package:project/utils/constants/colors.dart';
import 'package:project/utils/constants/sizes.dart';

class GridItem extends StatefulWidget {
  const GridItem({
    Key? key,
    required this.name,
    this.child,
    this.imagePath,
    this.hasSwitch = false,
  }) : super(key: key);

  final String name;
  final Widget? child;
  final String? imagePath;
  final bool hasSwitch;

  @override
  State<GridItem> createState() {
    return _GridItemState();
  }
}

class _GridItemState extends State<GridItem> {
  bool isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(15),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: isSwitched ? Color(0xFF535353) : Color(0xFFF5F6FA),
        boxShadow: isSwitched
            ? [
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  offset: const Offset(4.0, 4.0),
                  blurRadius: 5.0,
                  spreadRadius: 2.0,
                ),
              ]
            : [],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          widget.imagePath != null
              ? Container(
                  width: 50,
                  height: 50,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xFFE0E0E0),
                  ),
                  child: Center(
                    child: Image.asset(
                      widget.imagePath!,
                      height: 40,
                      // color: isSwitched ? Color(0xFFFFFFFF) : null,
                      fit: BoxFit.cover,
                    ),
                  ),
                )
              : const SizedBox(),
          const SizedBox(height: 8),
          Text(
            widget.name,
            style: Theme.of(context)
                .textTheme
                .titleLarge!
                .apply(color: isSwitched ? Color(0xFFFFFFFF) : null),
          ),
          const Spacer(),
          widget.hasSwitch
              ? Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      isSwitched ? "On" : "Off",
                      style: Theme.of(context)
                          .textTheme
                          .titleLarge!
                          .apply(color: isSwitched ? Color(0xFFFFFFFF) : null),
                    ),
                    Switch(
                      value: isSwitched,
                      onChanged: (value) {
                        setState(() {
                          isSwitched = value;
                        });
                      },
                    )
                  ],
                )
              : const SizedBox(),
        ],
      ),
    );
  }
}

UPDATE: If I add padding to the GridView.builder, it will mess up my layout as shown.

enter image description here

2

Answers


  1. The easier way to handle this situation is wrapping GridView with a Padding widget.

      Widget build(BuildContext context) {
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: GridView.builder(
    
    Login or Signup to reply.
  2. Add only right side padding padding: const EdgeInsets.only(right: 16.0) to the GridView widget i.e

    GridView.builder(
            itemCount: itemCount,
            shrinkWrap: true,
            const EdgeInsets.only(right: 16.0),
            physics: const NeverScrollableScrollPhysics(),
            clipBehavior: Clip.none,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisExtent: mainAxisExtent,
              mainAxisSpacing: 16,
              crossAxisSpacing: 16,
            ),
            itemBuilder: itemBuilder,
          );
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search