Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – AboutDialog Label Color

I am adding to my flutter app an AboutDialog.

The main color of the app is black so I changed the background color of the AboutDialog to black inside ThemeData thanks to DialogTheme but the problem is that I don’t know how to change the color of the labels, of the AboutDialog: applicationName, applicationVersion and applicationLegalese, those labels are grey and it’s hard to read them with the black background.

I tried to modify the colorScheme in ThemeData but nothing.

How can I change the label’s color to white for example?

TextButton(
      onPressed: () => showDialog<String>(
      barrierColor: Colors.black,
      context: context,
      builder: (BuildContext context) => AboutDialog(
         applicationName: '1234',
         applicationIcon: Flexible(
         child: Image.asset('assets/icon/icon.png',width: 100,height: 100,),),
         applicationVersion:'1234',
         applicationLegalese:'1234',
         )),
        child: const Text( textAlign: TextAlign.center,maxLines: 2,
                     overflow: TextOverflow.ellipsis,'More Info',
                     style: TextStyle(color: Colors.white),
)),
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to @Hamed for the inspiration, this is what worked for me:

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '1234',
      theme: ThemeData(
        textTheme: const TextTheme(
          headlineSmall: TextStyle(color: Colors.white),
          bodyMedium: TextStyle(color: Colors.white),
          bodySmall: TextStyle(color: Colors.white),
        ), //ADDED THIS
        dialogTheme: const DialogTheme(
            shadowColor: Colors.white, backgroundColor: Colors.black), //ADDED THIS
        colorScheme: ColorScheme.fromSeed(
            seedColor: Colors.white,
            primary: Colors.white,
            secondary: Colors.white),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '1234'),
    );
  }
}

    It doesn't work if I add the theme inside the AboutDialog

    Edit: That setup caused me some visual problem on the Licenses so this is the final code:

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '1234',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.black, //ADDED THIS
        textTheme: const TextTheme(
          headlineSmall: TextStyle(color: Colors.white),
          headlineMedium: TextStyle(color: Colors.white), //ADDED THIS
          headlineLarge: TextStyle(color: Colors.white), //ADDED THIS
          bodyMedium: TextStyle(color: Colors.white),
          bodySmall: TextStyle(color: Colors.white),
          bodyLarge: TextStyle(color: Colors.white), //ADDED THIS
        ), 
        dialogTheme: const DialogTheme(
            shadowColor: Colors.white, backgroundColor: Colors.black),
        colorScheme: ColorScheme.fromSeed(
            seedColor: Colors.white,
            primary: Colors.white,
            secondary: Colors.white
            surface: Colors.black, //ADDED THIS
            onSurface: Colors.white, //ADDED THIS
            onSurfaceVariant: Colors.white, //ADDED THIS
            shadow: Colors.white, //ADDED THIS
        ),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '1234'),
    );
  }
}

    Now both AboutDialog and Licenses look very good


  2. 0 
    void _showAboutDialog(BuildContext context) {
  showAboutDialog(
    context: context,
    applicationName: 'My App',
    applicationVersion: '1.0.0',
    applicationLegalese: '© 2024 My Company',
    children: <Widget>[
      Theme(
        data: ThemeData(
          dialogBackgroundColor: Colors.black,
          textTheme: TextTheme(
            bodyLarge: TextStyle(color: Colors.white),
            bodyMedium: TextStyle(color: Colors.white),
          ),
        ),
        child: Container(), // This container is required to apply the theme.
      ),
    ],
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search