Hey Paul, let's figure out how to make that "Location information" underline switch to white when your app toggles to dark mode. Here are a couple of straightforward solutions that play nicely with your existing MyThemes setup:

Option 1: Check Theme Brightness Directly (Quick & Simple) #

This is the easiest way if you just need to adjust this single underline's color. You can use Theme.of(context) to get the current theme's brightness and set the color conditionally.

Example for a Container-based underline: #

// Replace your existing underline Container with this
Container(
  height: 1, // Match your original underline's height
  color: Theme.of(context).brightness == Brightness.dark 
      ? Colors.white 
      : Colors.black, // Black for light theme, white for dark
)

Example for a Divider: #

If your underline is a Divider widget, the approach is nearly identical:

Divider(
  thickness: 1,
  color: Theme.of(context).brightness == Brightness.dark 
      ? Colors.white 
      : Colors.black,
)

Example for Text's built-in underline: #

If the underline is part of the "Location information" text itself (using TextDecoration.underline), adjust the decorationColor property:

Text(
  "Location information",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationThickness: 1,
    decorationColor: Theme.of(context).brightness == Brightness.dark 
        ? Colors.white 
        : Colors.black,
  ),
)

Option 2: Use a Custom Theme Extension (Scalable for Large Apps) #

If you want to keep all theme-related colors organized (ideal for bigger projects), you can add a custom color extension to your ThemeData definitions. This lets you reference the underline color consistently across your entire app.

Step 1: Define the custom color extension #

Add this class outside your MyThemes class:

class CustomColors extends ThemeExtension<CustomColors> {
  final Color underlineColor;

  CustomColors({required this.underlineColor});

  @override
  CustomColors copyWith({Color? underlineColor}) {
    return CustomColors(
      underlineColor: underlineColor ?? this.underlineColor,
    );
  }

  @override
  CustomColors lerp(ThemeExtension<CustomColors>? other, double t) {
    if (other is! CustomColors) return this;
    return CustomColors(
      underlineColor: Color.lerp(underlineColor, other.underlineColor, t)!,
    );
  }
}

Step 2: Update your theme definitions #

Modify both your light and dark themes to include the custom extension:

class MyThemes {
  static final lightTheme = ThemeData(
    scaffoldBackgroundColor: Colors.white,
    colorScheme: ColorScheme.light(),
    // Add custom color for light theme
    extensions: [
      CustomColors(underlineColor: Colors.black),
    ],
    // Your other light theme configurations...
  );

  static final darkTheme = ThemeData(
    scaffoldBackgroundColor: Colors.grey[800],
    colorScheme: ColorScheme.dark(),
    listTileTheme: ListTileThemeData(iconColor: Colors.white,),
    textTheme: TextTheme(
      subtitle2: TextStyle(
        color: Colors.white,
      ),
    ),
    // Add custom color for dark theme
    extensions: [
      CustomColors(underlineColor: Colors.white),
    ],
  );
}

Step 3: Use the custom color in your widget #

Now reference the custom color wherever you build the underline:

Container(
  height: 1,
  color: Theme.of(context).extension<CustomColors>()?.underlineColor ?? Colors.black,
)

Both methods work perfectly—pick the one that fits your app's size and structure. The first option is great for quick fixes, while the second keeps your theme code clean and scalable.

内容的提问来源于stack exchange，提问作者Paul