CODEWITHSUNDEEP
androidiosfluttermobileflutter-theme
Tapas Pal
Tapas Pal

Reputation: 7207

How to create custom theme file for Flutter app

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.

Upvotes: 1

Views: 6350

Answers (2)

Home of Creation
Home of Creation

Reputation: 57

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],
      ),

}

Upvotes: 4

zavora
zavora

Reputation: 363

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),
    );
  }
}

Upvotes: -1

Related Questions