How to create custom theme file for Flutter app

Question

I am looking for a custom color theme pattern in Flutter. Something like following written in Swift .

struct Colors {
    struct Text {
        static var success: UIColor {
            return UIColor.green
        }
        static var error: UIColor {
            return UIColor.red
        }
    }

    struct Button {
        static var normal: UIColor {
            return UIColor.black
        }
        static var onPressed: UIColor {
            return UIColor.blue
        }
    }
}

So that I can use something like,

let successTextColor = Colors.Text.success
let normalButtonColor = Colors.Button.normal

> Main Objective:

I am looking for something that is appropriate or best for flutter project, the above is for reference only.

I have tried overriding the ThemeData but as per my understanding I can only override the TextTheme and can't use any custom value such as errorText or successText , etc.

I want something that will provide me the color palates (fonts, size, etc) for buttons or other widgets.

Also keeping in mind that I need to support the light and dark theme.

Any suggestions will be appreciatable.

Answer 1

Here's my light theme I override the base the with different colors for text etc and at the bottom the buttonTheme:

import 'package:flutter/material.dart';

ThemeData lightTheme() {
  TextTheme _basicTextTheme(TextTheme base) {
    return base.copyWith(
      headline1: base.headline1.copyWith(
        fontSize: 72.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'Lato',
        color: Colors.white,
      ),
      headline6: base.headline6.copyWith(
        fontSize: 23.0,
        fontFamily: 'Lato',
      ),
      bodyText2: base.bodyText2.copyWith(
        fontSize: 16.0,
        fontFamily: 'Lato',
        color: Colors.deepPurple[300],
      ),
      headline4: base.headline4.copyWith(
        fontSize: 18.0,
        fontFamily: 'Lato',
        color: Colors.deepPurple[600],
      ),
      headline5: base.headline4.copyWith(
        fontSize: 18.0,
        fontFamily: 'Lato',
        color: Colors.deepPurple[50],
        //buttons
      ),
      caption: base.headline5.copyWith(
        fontSize: 12.0,
        fontFamily: 'Lato',
      ),
      bodyText1: base.bodyText1.copyWith(
        color: Colors.deepPurple[300],
        fontSize: 14,
      ),
    );
  }

  final ThemeData base = ThemeData.light();
  return base.copyWith(
      textTheme: _basicTextTheme(base.textTheme),
      primaryColor: Colors.deepPurple[300],
      accentColor: Colors.deepPurple[300],
      iconTheme: IconThemeData(
        color: Colors.deepPurple[300],
        size: 20.0,
      ),
      buttonTheme: ButtonThemeData(
        buttonColor: Colors.deepPurple[300],
        shape: RoundedRectangleBorder(),
        textTheme: ButtonTextTheme.primary,
      ),
      sliderTheme: SliderThemeData(
        activeTrackColor: Colors.deepPurple[300],
        overlayColor: Colors.deepPurple[300].withAlpha(32),
        thumbColor: Colors.deepPurple[300],
      ),

}

Answer 2

Flutter is all about widgets. So start thinking in this aspect, and consider the above text and buttons are widgets. What you can now do is create them as re-usable widgets in your code, so that they can be created anywhere, and essentially form your custom theme.

For example, create a standardtext.dart file and put in below

import 'package:flutter/material.dart';

class StandardText extends StatelessWidget {
  final String title;
  final Color normalColor;
  StandardText({this.title, this.normalColor})

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        title,
        style: TextStyle(
          color: normalColor,
        ),
      ),
    );
  }
}

then throughout the applicaton, use it as below

StandardText(title: 'Text', normalColor: Colors.blue)

in detail:

class Main extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: StandardText(title: 'Text', normalColor: Colors.blue),
    );
  }
}