Flutter: Move theme (ThemeData) to a separate file

user_6266336 0
Viewed 1475

I am just starting a new project in flutter and am absolutely new to it.

What is the convention with defining themes in Flutter?

I would like to have a separate file with a theme to keep the main.dart simple. Is there a good/correct/classic way to do it?

Currently my main.dart looks like this:

void main() => runApp(MaterialApp(
      initialRoute: '/',
      theme: ThemeData(
          appBarTheme: AppBarTheme(
            color: Colors.teal,
          ),
          textButtonTheme: TextButtonThemeData(
              style: TextButton.styleFrom(
            primary: Colors.teal,
          )),
          scaffoldBackgroundColor: Colors.grey[200],
          textTheme: TextTheme(
            bodyText1: TextStyle(),
            bodyText2: TextStyle(),
          ).apply(
            bodyColor: Colors.teal[800],
          )),
      routes: {
        '/': (context) => Loading(),
        '/home': (context) => Home(),
        '/alarms': (context) => SetUpAlarm(),
      },
    ));
dart flutter themes styles
2 Answers

you can create one class and define the theme there also can use comma (,) at the ending so your code will beautify more.

class CommonMethod {
  
  ThemeData themedata = ThemeData(
      appBarTheme: AppBarTheme(
        color: Colors.teal,
      ),
      textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(
            primary: Colors.teal,
          ),
      ),
      scaffoldBackgroundColor: Colors.grey[200],
      textTheme: TextTheme(
        bodyText1: TextStyle(),
        bodyText2: TextStyle(),
      ).apply(
        bodyColor: Colors.teal[800],
      ));
}

and then you can access this theme as CommonMethod().themedata

user_112548180

For better practice to deal with Theme Structure in Flutter... You should create a separate file named e.g. app_themes.dart. And you can define your favorite colors in that file. It will be accessible in entire application. I'm sharing some code for your reference.

static ThemeData darkTheme = ThemeData(
  brightness: Brightness.dark,
  backgroundColor: Colors.grey[700],
  accentColor: Colors.white,
);
    
static List<ThemeData> _appThemes = [
  ///Theme 1
  ThemeData(
    textSelectionHandleColor: Colors.white,
    selectedRowColor: Colors.green
  ),
  ///Theme 2
  ThemeData(
    textSelectionHandleColor: Colors.white,
    selectedRowColor: Colors.green
  ),
  ///Theme 3
  ThemeData(
    textSelectionHandleColor: Colors.white,
    selectedRowColor: Colors.green
  ),
]
user_164554210
Related