We can use the theme to set colors and properties to our app and widgets that way we don't have to specify colors for every widget manually and if we do, we should refer the color back to our theme object. doing this makes life easier and if we do want to change the colors we could do so by just changing the theme color as opposed to going to every widget and changing the colors there. 

 

we specify theme in the material app such as below:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Personal Expense',
      theme: ThemeData(
        primarySwatch: Colors.purple,
        primaryColor: Colors.purple,
        accentColor: Colors.purple[300],
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

 

 

PrimarySwatch is the primary shades of color used in widgets, meaning flutter will adjust many shades of colors used in different widgets using this color.

primary color and accent color are self-explanatory since they are responsible for the primary colors and secondary colors used in different widgets.

 

to access the theme colors in your widget you can use the following syntax:

Theme.of(context). -- this will enables you to choose any of the theme-defined colors or properties.

TextStyle(
    color: Theme.of(context).primaryColor,
    fontSize: 20,
    fontWeight: FontWeight.bold,
                    ),

 

 

Adding custom fonts:

to add custom fonts you need to place your .ttf file which are font files in your flutter directory and let flutter know where this direcotry is via pubspec.yaml

 

usually, it's placed in an assets folder inside a font's directory.  you can then give your fonts names via the "family" parameter and use that name in your apps

  fonts:
    - family: OpenSans
      fonts:
        - asset: assets/fonts/OpenSans-Regular.ttf
        - asset: assets/fonts/OpenSans-Bold.ttf
          weight: 700
    - family: QuickSand
      fonts:
        - asset: assets/fonts/Quicksand-Regular.ttf
        - asset: assets/fonts/Quicksand-Bold.ttf
          weight: 700

 

use the fonts in your theme:

  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Personal Expense',
      theme: ThemeData(
        fontFamily: 'Quicksand',
        primarySwatch: Colors.purple,
        primaryColor: Colors.purple,
        accentColor: Colors.purple[300],
        textTheme: ThemeData.light().textTheme.copyWith(
              headline1: TextStyle(
                  color: Colors.purple,
                  fontSize: 18,
                  fontFamily: 'OpenSans',
                  fontWeight: FontWeight.bold),
              headline6: TextStyle(
                  color: Colors.purple[300],
                  fontSize: 14,
                  fontFamily: 'OpenSans',
                  fontWeight: FontWeight.w400),
            ),
        visualDensity: VisualDensity.adaptivePlatformDensity,
        appBarTheme: AppBarTheme(
          textTheme: ThemeData.light().textTheme.copyWith(
                title: TextStyle(fontSize: 20, fontFamily: 'OpenSans'),
              ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

 

 

and use the theme setting in your widgets, this way the styles are managed globally.

My text widget with a smaller text

                    Text(
                      DateFormat.yMMMMd().format(transactions[index].date),
                      style: Theme.of(context).textTheme.headline6,
                    ),

 

My Text widget with the main title

            Text(
                      transactions[index].title,
                      style: Theme.of(context).textTheme.headline1,
                   )