Cs Styling in Flutter

By pjain      Published May 15, 2020, 5:17 a.m. in blog Programming   

Part of Series - Flutter/Dart Series


font settings 101

fontSize: 30.0,

You can set the weight with numbers like FontWeight.w100 where w400 is the same as normal and w700 is the same as bold.

fontStyle: FontStyle.italic,

NOTE: For more info see Custom fonts section below.

When fontSize is not given, the default size is 14 logical pixels Logical pixels are independent of a device's density. That is, the text should appear to be to be basically the same size no matter what the pixel density of a user's device may be.

F! accessibility is enabled by default. However, this font size is also multiplied by a textScaleFactor depending on the user's preferred font size. This often means large fonts that can break layouts. You CAN disable accessibility on individual Text widgets, but this would hurt some users. It may be better to redesign the layout instead.

Text( 'Some text', style: TextStyle(fontSize: 30.0),
        textScaleFactor: 1.0, // disables accessibility - so text ALWAYS displays at set 30 logical pixels ignoring user's preferred size

color - foreground

color: Color.white,  // .green .blue .red ..
you can set shades on a color, like Colors.blue[100] or Colors.blue[700].

color - background

Paint paint = Paint(); paint.color = Colors.blue;
Text('text', style:TextStyle(background: paint, ...))


  • Generally 1 shadow is good enough, but you can have multiple, and of different colors

    TextStyle( shadows: [ Shadow( blurRadius: 10.0, color: Colors.blue, offset: Offset(5.0, 5.0), ), Shadow( color: Colors.red, blurRadius: 10.0, offset: Offset(-5.0, 5.0), ), ], ),

Decorations eg underline, lineThrough (strikethru), or overline

      decoration: TextDecoration.underline,
      decorationColor: Colors.black,
      decorationStyle: TextDecorationStyle.solid, // solid, double, dashed, dotted, or wavy

Spacing and Kerning

  • A negative value moves the letters or words closer together.

    TextStyle( letterSpacing: -1.0, wordSpacing: 5.0, )


textDirection:  TextDirection:ltr,


Custom fonts

  • TOSEE Introducing Google Fonts for Flutter v 1.0.0! - Flutter - Medium

  • In usage you set the font and font weight You can set the weight with numbers like FontWeight.w100 where w400 is the same as normal and w700 is the same as bold.

    TextStyle( fontWeight:FontWeight.bold, fontStyle: FontStyle.italic, fontFamily: 'Open Sans', fontSize: 40) )

  • Copy over font files as a subdir of assets

    /lib /assets /fonts OpenSans-Bold.ttf OpenSans-ExtraBold.ttf OpenSans-Light.ttf OpenSans-Regular.ttf

  • Import in pubspec.yaml - uncomment fonts section there

  • have a font family with detailed asset files
  • weight ranges determine what specific asset file is used for font ranges ie when you set fontWeight: FontWeight.w300 the font that will be used is assets/fonts/OpenSans-Light.ttf.

    fonts: - family: Open Sans fonts: - asset: assets/fonts/OpenSans-Bold.ttf weight: 700 - asset: assets/fonts/OpenSans-ExtraBold.ttf weight: 800 - asset: assets/fonts/OpenSans-Light.ttf weight: 300 - asset: assets/fonts/OpenSans-Regular.ttf weight: 400

Text Spans

  • url spans within text and url_launcher

    You can make a span clickable by adding a TapGestureRecognizer. This would allow you to open a URL, for example, if used along with the url_launcher plugin.

      text: spanText,
      style: style,
      recognizer: TapGestureRecognizer()
        ..onTap = () {
          // do something

Rich Text


There are no comments yet

Add new comment

Similar posts

List++ Advanced Application Features

Interview Questions in Flutter

NAV: URL Launcher, Deep Links

NAV: Navigation Drawers