Colors & Fonts - ArtemMikhaylov/my_flutter_notes GitHub Wiki

Colors

For MaterialApp Flutter provides a set of material colors, you can see all of them in docs: https://api.flutter.dev/flutter/material/Colors-class.html
It seems like the set of colors is the same as in the color system of material design

You can use them like this:

backgroundColor: Colors.blueGrey.shade200

or, which is equivalent, like this:

backgroundColor: Colors.blueGrey[200]

Custom color

See Color class docs

You can't create an integer color from hex string (#F4F3FD) like in Java Android (Color.parse("#F4F3FD")), but it is not a problem unless you need to use hex string colors dynamically (for example you receive them from a REST API).

To convert hex string to hex int color, you have to rechange # with 0x, and if first two letters representing alpha channel are missing, then place ff or FF (case does not matter) as alpha channel representation, which equals 255 in decimal, or 100% opacity. For example: #F4F3FD equals 0xFFF4F3FD; #80000000 equals 0x80000000.

There are also some solutions to convert color programmatically: Using Hex Color Strings in Flutter

class MyColors {
  static const Color bkgr_main = const Color(0xFFF4F3FD);
}
backgroundColor: MyColors.bkgr_main,

If you need to set a custom theme color, it's a different game:

MaterialColor createMaterialColor(Color color) {
  List strengths = <double>[.05];
  Map swatch = <int, Color>{};
  final int r = color.red, g = color.green, b = color.blue;

  for (int i = 1; i < 10; i++) {
    strengths.add(0.1 * i);
  }
  strengths.forEach((strength) {
    final double ds = 0.5 - strength;
    swatch[(strength * 1000).round()] = Color.fromRGBO(
      r + ((ds < 0 ? r : (255 - r)) * ds).round(),
      g + ((ds < 0 ? g : (255 - g)) * ds).round(),
      b + ((ds < 0 ? b : (255 - b)) * ds).round(),
      1,
    );
  });
  return MaterialColor(color.value, swatch);
}

Fonts

You can download a custom font from fonts.google.com

Then you need to create a folder in the Flutter project directory and move .ttf file in this folder. Add custom font in pubspec.yaml like this. (NOTE! Indents are matter in pubspec.yaml !)

img

Then you can use the font like this

Text(
  'Singed in as ' + userName,
  style: TextStyle(
    fontFamily: 'IndieFlower',
  ),
),
⚠️ **GitHub.com Fallback** ⚠️