How to fix layout issue with flutter license colors?

Viewed 682

I am designing an ios app, and am new to Flutter. I having trouble figuring out how to get the Flutter license page to display so that it's readable.

When I test on the simulator, the Flutter license page looks fine. It has a black background with white text.

However, when I test the app on my device, it's not readable. The background switches to white and it's all messed up.

I have updated my theme data to affect the look of the Flutter license so that it's readable.

I'm not sure what I'm doing wrong. If anyone has any experience dealing with this or advice for me, that would be greatly appreciated.

app being tested on my device, is unreadable

app being tested on the simulator, and looks readable

main.dart file where I control the color of the app

I edited three specific parts of the theme data in my main.dart file. They were heading 5, bodyText2, and caption. when I did this, I could properly read the Flutter license on my simulator , but still seems to not work when i test on device.

theme: ThemeData(
        primaryColor: Color(0XFFeb1555),
        accentColor: Color(0XFF5173A8),
        scaffoldBackgroundColor: Color(0xff1D1E33),
        canvasColor: Colors.black,
        textTheme: TextTheme(
          headline5: TextStyle(
            color: Colors.white,
          ),
          caption: TextStyle(
            color: Colors.white,
          ),
          bodyText2: TextStyle(
              color: Colors.white, fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
      ),

my settings.dart page where I list the Flutter license

import 'package:flutter/material.dart';
import 'package:tarotcards/screens/disclaimer.dart';
import 'package:url_launcher/url_launcher.dart';

_launchSupportURL() async {
  const String url =
      'mailto:terratarotapp@gmail.com?subject=Terra%20Tarot%20App%20Feedback';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

_launchSocialURL() async {
  const String url = 'http://instagram.com/terra_tarot';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

class Settings extends StatefulWidget {
  @override
  _SettingsState createState() => _SettingsState();
}

class _SettingsState extends State<Settings> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black26,
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Image.asset(
                    'images/castle.png',
                    height: 65,
                    fit: BoxFit.fill,
                  ),
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.fromLTRB(0, 20.0, 0, 10.0),
              child: Text(
                'GREETINGS',
                style: TextStyle(
                  fontSize: 40.0,
                  fontFamily: 'Pacifico',
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ),
            Text(
              'TAROT READER',
              style: TextStyle(
                fontSize: 20.0,
                fontFamily: 'San Source Pro',
                color: Color(0XFFeb1555),
              ),
            ),
            Container(
              padding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
              child: Text(
                'Do you have feedback on how to improve the app?'
                ' I\'d love to hear from you!',
                style: TextStyle(
                    color: Colors.white,
                    letterSpacing: 0.5,
                    height: 1.5,
                    fontFamily: 'Opensans',
                    fontSize: 16.0,
                    fontWeight: FontWeight.normal),
              ),
            ),
            SizedBox(
              height: 20.0,
            ),
            ButtonTheme(
              minWidth: 300.0,
              child: RaisedButton(
                child: Text('SEND FEEDBACK'),
                padding: EdgeInsets.all(10.0),
                textColor: Colors.white,
                color: Color(0XFFeb1555),
                onPressed: _launchSupportURL,
              ),
            ),
            SizedBox(
              height: 20.0,
            ),
            ButtonTheme(
              minWidth: 300.0,
              child: RaisedButton(
                child: Text('INSTAGRAM'),
                padding: EdgeInsets.all(10.0),
                textColor: Colors.black,
                color: Colors.white,
                onPressed: _launchSocialURL,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                FlatButton(
                  child: Text(
                    'Disclaimer →',
                    style: TextStyle(
                      color: Color(0XFFeb1555),
                    ),
                  ),
                  onPressed: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => Disclaimer(),
                        ));
                  },
                ),
                FlatButton(
                  child: Text(
                    'Licenses →',
                    style: TextStyle(
                      color: Color(0XFFeb1555),
                    ),
                  ),
                  onPressed: () {
                    showLicensePage(
                      context: context,
                      applicationName: 'Terra Tarot',
                      applicationVersion: '1.0.0',
                    );
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
2 Answers

I figured out how to fix this issue I was having with the flutter license. At first I was trying to make the layout match the look and feel of my app which is a black background and white text, but this wasn't possible.

I realized now that I should just let it do its thang and leave it alone. The Flutter license defaults to white background and black text.

I have just taken out the part where I had my text theme make the text white and now it works properly.

theme: ThemeData(
        primaryColor: Color(0XFFeb1555),
        accentColor: Color(0XFF5173A8),
        scaffoldBackgroundColor: Color(0xff1D1E33),
        canvasColor: Colors.black,
    ),

I had the same problem and figured out it is using the cardColor as the background color. So if you add it in your basic theme it should work.

theme: ThemeData(
  ...
  // whatever color you want for your background
  cardColor: Colors.black,
),

If you want to check other stylings you can simply open up the LicensePage and go through the code there.

Related