License page colors cannot be changed when wrapped with Theme widget

Hi everybody.

The buttons in the AboutDialoog seem to be using the default colors and ignore coloring themes defined higher up.
On Android, this results in "View Licences" and "Close" buttons in some shade of cyan (I believe this is the default Material accentColor).
On iOS, it results in standard blue buttons and a blue AppBar on the "Licences" page when clicking the "View Licences" button.

I'm grateful for any hints on how to work around this.

@rgisi

Hi @rgisi
does this code represent the situation you are describing?

sample code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
  theme: ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.green[800],
    accentColor: Colors.red[600],
    fontFamily: 'Montserrat',
    textTheme: TextTheme(
      headline: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      title: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      body1: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  ),
  home: MyHomePage(),
);
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  static void _showAboutDialog({
    @required BuildContext context,
    String applicationName,
    String applicationVersion,
    Widget applicationIcon,
    String applicationLegalese,
    List<Widget> children,
  }) {
    assert(context != null);
    showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AboutDialog(
          applicationName: applicationName,
          applicationVersion: applicationVersion,
          applicationIcon: applicationIcon,
          applicationLegalese: applicationLegalese,
          children: children,
        );
      },
    );
  }


  @override
  Widget build(BuildContext context) =>Scaffold(
    appBar: AppBar(),
      body: Center(
        child: FlutterLogo(size: 200,),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: ()=> _showAboutDialog(
          context: context,
          applicationName:'name',
          applicationVersion:'1.0',
          applicationIcon: FlutterLogo(),
          applicationLegalese:'legal', 
          children: <Widget>[Container()]
        ),
        child: Icon(Icons.question_answer),
      ),
    );
}

doctor

[√] Flutter (Channel dev, v1.12.1, on Microsoft Windows [Version 10.0.19013.1122], locale en-US)
    • Flutter version 1.12.1 at C:\src\flutter
    • Framework revision 86c91b12d8 (4 days ago), 2019-11-11 13:29:46 -0800
    • Engine revision 31cd2dfca2
    • Dart version 2.7.0


[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at C:\Users\iapic\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 41.1.2
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] VS Code, 64-bit edition (version 1.40.1)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.6.0

[√] Connected device (3 available)
    • Pixel 3a   • 965AY0WP5C • android-arm64  • Android 10 (API 29)
    • Chrome     • chrome     • web-javascript • Google Chrome 78.0.3904.97
    • Web Server • web-server • web-javascript • Flutter Tools

• No issues found!

I'm not sure to understand the issue,
the colors of the buttons respond to the different Theme;
can you provide more details about the issue?
thank you

@iapicca

Thank you for your input, @iapicca !

Indeed, your code works in a fresh sample project, which I guess should be kind of embarassing for me...

In my code, I use an AboutListTile() (but the behaviour is the same with showAboutDialog(). What strikes me as strange is that I can directly wrap the widget with

Theme(data: ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.green[800],
    accentColor: Colors.red[600],
), child: AboutListTile(...))

The result: The color of the text in the AboutListTile changes (to unreadable white because of the dark theme), however the upcoming AboutDialog still has the same (default) button colors.

doctor

[√] Flutter (Channel stable, v1.9.1+hotfix.6, on Microsoft Windows [Version 10.0.18362.418], locale de-CH)
• Flutter version 1.9.1+hotfix.6 at C:\src\flutter
• Framework revision 68587a0 (9 weeks ago), 2019-09-13 19:46:58 -0700
• Engine revision b863200
• Dart version 2.5.0

[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
• Android SDK at C:\Users\gregr\AppData\Local\Android\sdk
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-28, build-tools 28.0.3
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
• All Android licenses accepted.

[√] Android Studio (version 3.5)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin version 41.1.2
• Dart plugin version 191.8593
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] Connected device (1 available)
• LG H870 • LGH870f4432d2 • android-arm64 • Android 9 (API 28)

• No issues found!

Well, I guess that particular weirdness seems to be specific to my project.
Still grateful for any pointers on what to check - otherwise I'm okay with closing this issue.
Thank you!

@darrenaustin

CC @darrenaustin

Hi everybody,
Just a quick update in case that helps: We built our latest release with the new stable flutter version (1.12.3+hotfix.8) and the buttons in the AboutDialog are still acting weird, albeit in a slightly different way:

on iOS (no change): AboutDialog buttons ("View Licences" and "Close") are in the standard blue color, ignoring the Theme defined higher up. When clicking "View Licences", the licences page is in the standard blue color as well.
on Android: AboutDialog buttons are not cyan anymore, but white on white (and thus invisible, which is doubly annoying...). When clicking "View Licences", the licences page follows the design theme defined higher up.

Hope that helps.

Thanks for your awesome work!

... and with the current flutter dev version (1.15.17) as well, same behaviour still

Update: The "white on white" problem on Android apparently was a product of my own stupidity: A ButtonTheme with colorScheme.dark() caused it.

Now it's the default blue an Android an iOS, even when wrapping the AboutListTile directly in my Theme().

Code Sample

// Flutter code sample for AboutListTile

// This sample shows two ways to open [AboutDialog]. The first one
// uses an [AboutListTile], and the second uses the [showAboutDialog] function.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.bodyText2;
    final List<Widget> aboutBoxChildren = <Widget>[
      SizedBox(height: 24),
      RichText(
        text: TextSpan(
          children: <TextSpan>[
            TextSpan(
                style: textStyle,
                text:
                    'Flutter is Googleâ��s UI toolkit for building beautiful, '
                    'natively compiled applications for mobile, web, and desktop '
                    'from a single codebase. Learn more about Flutter at '),
            TextSpan(
                style: textStyle.copyWith(color: Theme.of(context).accentColor),
                text: 'https://flutter.dev'),
            TextSpan(style: textStyle, text: '.'),
          ],
        ),
      ),
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text('Show About Example'),
      ),
      drawer: Drawer(
        child: SingleChildScrollView(
          child: SafeArea(
            child: Theme(
              data: ThemeData(
                // brightness: Brightness.dark,
                primaryColor: Colors.green[800],
                accentColor: Colors.red[600],
              ),
              child: AboutListTile(
                icon: Icon(Icons.info),
                applicationIcon: FlutterLogo(),
                applicationName: 'Show About Example',
                applicationVersion: 'August 2019',
                applicationLegalese: 'Â© 2014 The Flutter Authors',
                aboutBoxChildren: aboutBoxChildren,
              ),
            ),
          ),
        ),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Show About Example'),
          onPressed: () {
            showAboutDialog(
              context: context,
              applicationIcon: FlutterLogo(),
              applicationName: 'Show About Example',
              applicationVersion: 'August 2019',
              applicationLegalese: 'Â© 2014 The Flutter Authors',
              children: aboutBoxChildren,
            );
          },
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel dev, 1.20.0-2.0.pre, on Mac OS X 10.15.5 19F101, locale
    en-GB)
    • Flutter version 1.20.0-2.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision 15a28159bc (9 days ago), 2020-06-23 04:52:58 -0700
    • Engine revision 91a63d6a44
    • Dart version 2.9.0 (build 2.9.0-19.0.dev 7e72c9ae7e)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.0
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.46.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.1

[✓] Connected device (5 available)
    • SM M305F      • 32003c30dc19668f          • android-arm64  • Android 10
      (API 29)
    • Taha’s iPhone • 00008020-001059882212002E • ios            • iOS 13.5.1
    • macOS desktop • macos                     • darwin-x64     • Mac OS X
      10.15.5 19F101
    • Web Server    • web-server                • web-javascript • Flutter Tools
    • Chrome        • chrome                    • web-javascript • Google Chrome
      83.0.4103.116

• No issues found!

Hi there. The AboutDialog now uses the app's primary color for the button text, this solves my specific problem and I'm okay with closing this issue if you think that makes sense.

(However, from my short tests it seems wrapping the AboutListTile in a Theme widget still doesn't do anything...?)

Fix `showLicensePage` does not inherit ambient `Theme` (#161599)

Fix `showLicensePage` does not inherit ambient `Theme` (flutter#161599)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

License page colors cannot be changed when wrapped with `Theme` widget #44922

9 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

License page colors cannot be changed when wrapped with Theme widget #44922

Description

Activity

iapicca commented on Nov 15, 2019

rgisi commented on Nov 15, 2019

HansMuller commented on Nov 15, 2019

rgisi commented on Feb 18, 2020

rgisi commented on Mar 27, 2020

rgisi commented on Jun 25, 2020

TahaTesser commented on Jul 2, 2020

rgisi commented on Aug 11, 2020

9 remaining items

github-actions commented on Jan 28, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

License page colors cannot be changed when wrapped with `Theme` widget #44922