Home > Software engineering >  How do I set multiple color in theme data flutter?
How do I set multiple color in theme data flutter?

Time:10-26

Here is my code:

  static final darkTheme = ThemeData(
      textTheme: GoogleFonts.rubikTextTheme()
          .apply(bodyColor: Color(0xFFf2f2f2), displayColor: Color(0xFFf2f2f2))
                .copyWith(bodyText1: TextStyle(color: Colors.greenAccent)),
      scaffoldBackgroundColor: Color(0xFF1f1f1f),
      primaryColor: Color(0xFF474747),
      colorScheme: ColorScheme.dark(
          primaryContainer: Color(0xFF282828),
          secondaryContainer: Color(0xFF3D3D3D)),
      iconTheme: IconThemeData(color: Color(0xFFf2f2f2)),
      primaryIconTheme: IconThemeData(color: Color(0xFFf2f2f2)),
      hintColor: Color(0xFFf2f2f2),
      backgroundColor: Color(0xFFd9d9d9),
      dividerColor: Color(0xFFf2f2f2));

I want set multiple color in textTheme, but how do i know which TextStyle property should i use? in this case i have text said "open" and i want it to be greenAccent in dark mode and green in light mode, and here i use bodyText1, but the green color apply on other text instead on the "Open" text.

should i try every property from displayLarge until overline to find property colored which text. And im not sure if i use .copyWith the right way or not. even if i manage to find it using this method, i think it is wrong. i use the .apply to color most text in white

CodePudding user response:

check it

MaterialApp(
  title: appName,
  theme: ThemeData(
    // Define the default brightness and colors.
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],

    // Define the default font family.
    fontFamily: 'Georgia',

    // Define the default `TextTheme`. Use this to specify the default
    // text styling for headlines, titles, bodies of text, and more.
    textTheme: const TextTheme(
      headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  ),
  home: const MyHomePage(
    title: appName,
  ),
);

CodePudding user response:

Instead of using Text widget use RichText widget.It can make your life really easy.Just look up RichText.

  • Related