Font Features: Tabular vs Proportional Features

main.dart

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('My App')),
        backgroundColor: Colors.white,
        body: BodyWidget(),
      ),
    );
  }
}

class BodyWidget extends StatefulWidget {
  @override
  _BodyWidgetState createState() => _BodyWidgetState();
}

class _BodyWidgetState extends State<BodyWidget> {
  double _value = 1000;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        SizedBox(height: 20),
        Text(
          'There are ${_value.toInt()} cars.',
          style: TextStyle(
            fontSize: 40,
            fontFeatures: [
              FontFeature.tabularFigures(),
            ]
          ),
        ),
        Text(
          'There are ${_value.toInt()} cars.',
          style: TextStyle(
              fontSize: 40,
              fontFeatures: [
                FontFeature.proportionalFigures(),
              ]
          ),
        ),
        Slider(
          value: _value,
          min: 1000,
          max: 9000,
          onChanged: (newValue) {
            setState(() {
              _value = newValue;
            });
          },
        )
      ],
    );
  }
}