in my app I've a reorderable grid with some Container with rouded corner.
My problem is that while I'm changing the position of a container on the grid I can see a colored corner.

I know that is due to the scaffold backgroundcolor property.
How can I handle this?
This is my code:

ReorderableGridView.count(
  padding: const EdgeInsets.all(16),
  crossAxisSpacing: 4,
  mainAxisSpacing: 4,
  crossAxisCount: 2,
  childAspectRatio: 1,
  children: homeButtons
    .map((index) => Container(
      key: ValueKey(index),
      alignment: Alignment.center,
      width: double.infinity,
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [
            Color(0xFF4D4D64),
            Color(0xFF363649)
          ],
          stops: [0, 1],
          begin: AlignmentDirectional(1, -1),
          end: AlignmentDirectional(-1, 1),
        ),
        borderRadius: BorderRadius.circular(30),
      ),
      child: InkWell(
        onTap: () {
          String path = '/$index';
          Get.toNamed(path);
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SvgPicture.asset(
              'assets/icons/$index.svg',
              color: Colors.red,
            ),
            Text(index),
          ],
        ),
      ),
    ))
    .toList(),
  onReorder: (oldIndex, newIndex) async {
    String path = homeButtons.removeAt(oldIndex);
    homeButtons.insert(newIndex, path);
    setState(() {
      box.remove(key);
      box.write(key, homeButtons);
    });
  },
),

And here what I've tried:

I've tried to adding a parent Container with a Colors.transparent backgroud:

    .map((index) => Container(
      key: ValueKey(index),
      decoration: BoxDecoration(
        color: Colors.transparent,
      ),
      child: Container(
        alignment: Alignment.center,
        width: double.infinity,
        decoration: BoxDecoration(
          gradient: const LinearGradient(
            colors: [
              Color(0xFF4D4D64),
              Color(0xFF363649)
            ],
            stops: [0, 1],
            begin: AlignmentDirectional(1, -1),
            end: AlignmentDirectional(-1, 1),
          ),
          borderRadius: BorderRadius.circular(30),
        ),
        child: InkWell(
          onTap: () {
            String path = '/$index';
            Get.toNamed(path);
          },
          child: Column(..),
        ),
      ),
    ))

I've tried also to move up the Inkwell:

    .map((index) => Container(
      key: ValueKey(index),
      decoration: BoxDecoration(
        color: Colors.transparent,
      ),
      child: InkWell(
        onTap: () {
          String path = '/$index';
          Get.toNamed(path);
        },
        child: Container(
          alignment: Alignment.center,
          width: double.infinity,
          decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [
                Color(0xFF4D4D64),
                Color(0xFF363649)
              ],
              stops: [0, 1],
              begin: AlignmentDirectional(1, -1),
              end: AlignmentDirectional(-1, 1),
            ),
            borderRadius: BorderRadius.circular(30),
          ),
          child: Column(...),
        ),
      ),
    ))

and finally I've tried to move this transparent Container up around the SafeArea

  return Scaffold(
    backgroundColor: const Color(0xFF2f2e3c),
    appBar: AppBar(
      backgroundColor: const Color(0xFF2f2e3c),
      elevation: 0,
      title: Text(
        'Q.bit',
        style: GoogleFonts.outfit(
          textStyle: const TextStyle(
            color: Colors.white,
            fontSize: 25.0,
          ),
        ),
      ),
      centerTitle: true,
    ),
    body: Container(
      decoration: BoxDecoration(
        color: Colors.transparent,
      ),
      child: SafeArea(...),

I always get the same problem in the container color.
Anyone can help me?
Thanks in advance

CodePudding user response：

You should try clip with Container widget

Container(clipBehavior: Clip.antiAlias, decoration: ....)

CodePudding user response：

You should use dragWidgetBuilder, try this:

ReorderableGridView.count(
        clipBehavior: Clip.antiAlias,
        padding: const EdgeInsets.all(16),
        crossAxisSpacing: 4,
        mainAxisSpacing: 4,
        crossAxisCount: 2,
        childAspectRatio: 1,
        dragStartBehavior: DragStartBehavior.down,
        dragWidgetBuilder: (index, child) {
          return Scaffold(
            backgroundColor: Colors.transparent,
            body: Container(
              clipBehavior: Clip.antiAlias,
              alignment: Alignment.center,
              width: double.infinity,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [Color(0xFF4D4D64), Color(0xFF363649)],
                  stops: [0, 1],
                  begin: AlignmentDirectional(1, -1),
                  end: AlignmentDirectional(-1, 1),
                ),
                borderRadius: BorderRadius.circular(30),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // SvgPicture.asset(
                  //   'assets/icons/$index.svg',
                  //   color: Colors.red,
                  // ),
                  Text(homeButtons[index]),
                ],
              ),
            ),
          );
        },
        children: homeButtons
            .map((index) => Container(
                  clipBehavior: Clip.antiAlias,
                  key: ValueKey(index),
                  alignment: Alignment.center,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    gradient: const LinearGradient(
                      colors: [Color(0xFF4D4D64), Color(0xFF363649)],
                      stops: [0, 1],
                      begin: AlignmentDirectional(1, -1),
                      end: AlignmentDirectional(-1, 1),
                    ),
                    borderRadius: BorderRadius.circular(30),
                  ),
                  child: InkWell(
                    focusColor: Colors.transparent,
                    splashColor: Colors.transparent,
                    onTap: () {
                      // String path = '/$index';
                      // Get.toNamed(path);
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        // SvgPicture.asset(
                        //   'assets/icons/$index.svg',
                        //   color: Colors.red,
                        // ),
                        Text(index),
                      ],
                    ),
                  ),
                ))
            .toList(),
        onReorder: (oldIndex, newIndex) async {
          String path = homeButtons.removeAt(oldIndex);
          homeButtons.insert(newIndex, path);
          // setState(() {
          //   box.remove(key);
          //   box.write(key, homeButtons);
          // });
        },
      )