There is a white border in dark mode? How to remove it?

[disonwei]

 return Accordion(
      disableScrolling: true,
      paddingListTop: 0,
      paddingListBottom: 0,
      maxOpenSections: 1,
      headerBackgroundColorOpened: Colors.transparent,
      headerBackgroundColor: Colors.transparent,
      headerBorderColor: Colors.transparent,
      headerBorderColorOpened: Colors.transparent,
      contentBackgroundColor:
          Theme.of(context).extension<CustomThemeData>()?.backgroundColor,
      contentBorderColor:Theme.of(context).extension<CustomThemeData>()?.backgroundColor,
      contentBorderWidth:0,
      contentBorderRadius:10,
      scrollIntoViewOfItems: ScrollIntoViewOfItems.fast,
      sectionOpeningHapticFeedback: SectionHapticFeedback.medium,
      sectionClosingHapticFeedback: SectionHapticFeedback.medium,
      headerPadding: EdgeInsets.zero,
      contentHorizontalPadding: 0,
      contentVerticalPadding: 2,
      paddingListHorizontal: 0,
      scaleWhenAnimating: false,

      children: children,
    );

My parameters are set as follows. The background is consistent with the page background in bright mode without any problems. But when I switched the app to dark mode, I found that the content had a white border.

      contentBorderColor:Theme.of(context).extension<CustomThemeData>()?.backgroundColor,
      contentBorderWidth:0,

Even with this setting, there is still a white border.

This issue is only found on Android

[GotJimmy]

contentBorderColor is for one AccordionSection only (header & content). I don't see how Accordion could paint this border (and only on Android). Do you have I wrapped in some sort of container?

[spiritoftime]

Hi @GotJimmy, the border appears when background is black. color is set to colors.white instead of contentbackgroundcolor at accordion_section.dart, line 303.

 child: Container(
                        clipBehavior: Clip.antiAlias,
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.vertical(
                                bottom: Radius.circular(
                                    contentBorderRadius / 1.02))),

Thanks for the library!

[GotJimmy]

You may want to fork the package and try to make the change yourself. I've tried with black background on iOS, macOS & Chrome with no trace of a white border around anything. One thing that comes to mind is the new Impeller renderer vs Skia (that might still be used on Android). Are you on the latest versions of Flutter and turned on Impeller (I think it's in preview now and not turned on by default).

[spiritoftime]

yup im on android and have tried making the change- i could upload a video of the border disappearing when i change from colors.white to contentBackgroundColor tmr

would it be possible for you to make the change? was gonna fork the repo and make a pull request, but it was taking forever to clone it

thank you!

[GotJimmy]

Have you ever tried it on an iOS device or simulator or the web? I still cannot grasp why this would happen since Flutter draws on the same canvas for any device or OS and therefore there shouldn't be such a difference. Regarding changing this right now: I'd have to check all different combinations and configurations before making this change. Problem is that I'm completely swamped at this point ...

[GotJimmy]

Have you tried the Accordion example app? Can you replicate the problem there? Also: why is there no white border around the top top items in your screenshot, why only on the bottom two? And why is the content border around 2 items (the content concerns only 1 item)?

[spiritoftime]

video: https://github.com/GotJimmy/accordion/assets/98036884/6b7c33b0-1c9e-4ff5-bb32-b018d7198d85 No idea why it is happening too, i just kept uncommenting your source code till i narrowed it down to that line. i didnt setup ios device emulator, so cant help you with it

Reproducible example:

import 'package:accordion/accordion.dart';
import 'package:accordion/controllers.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.black,
        // colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const AccordionPage(),
    );
  }
}

class AccordionPage extends StatelessWidget {
  const AccordionPage({Key? key}) : super(key: key);

  static const headerStyle = TextStyle(
      color: Color(0xffffffff), fontSize: 18, fontWeight: FontWeight.bold);
  static const contentStyleHeader = TextStyle(
      color: Color(0xff999999), fontSize: 14, fontWeight: FontWeight.w700);
  static const contentStyle = TextStyle(
      color: Color(0xff999999), fontSize: 14, fontWeight: FontWeight.normal);
  static const loremIpsum =
      '''Lorem ipsum is typically a corrupted version of 'De finibus bonorum et malorum', a 1st century BC text by the Roman statesman and philosopher Cicero, with words altered, added, and removed to make it nonsensical and improper Latin.''';
  static const slogan =
      'Do not forget to play around with all sorts of colors, backgrounds, borders, etc.';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Accordion(
        headerBorderColor: Colors.black,
        headerBorderColorOpened: Colors.transparent,
        // headerBorderWidth: 1,
        headerBackgroundColorOpened: Colors.black,
        contentBackgroundColor: Colors.black,
        contentBorderColor: Colors.black,
        contentBorderWidth: 3,
        contentHorizontalPadding: 20,
        scaleWhenAnimating: true,
        openAndCloseAnimation: true,
        headerPadding: const EdgeInsets.symmetric(vertical: 7, horizontal: 15),
        sectionOpeningHapticFeedback: SectionHapticFeedback.heavy,
        sectionClosingHapticFeedback: SectionHapticFeedback.light,
        children: [
          AccordionSection(
            contentBackgroundColor: Colors.black,
            isOpen: true,
            contentVerticalPadding: 20,
            leftIcon:
                const Icon(Icons.text_fields_rounded, color: Colors.white),
            header: const Text('Simple Text', style: headerStyle),
            content: const Text(loremIpsum, style: contentStyle),
          ),
        ],
      ),
    );
  }
}

[GotJimmy]

Sorry, cannot help you right now. I suggest you download the source, add it directly to your project in the lib folder, and make the change that you found.