Skip to content

Instantly share code, notes, and snippets.

@suragch
Last active July 19, 2021 01:40
Show Gist options
  • Save suragch/2a0b7519bc45698de7845a3953d275cc to your computer and use it in GitHub Desktop.
Save suragch/2a0b7519bc45698de7845a3953d275cc to your computer and use it in GitHub Desktop.
Font Features: Tabular vs Proportional Features
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;
});
},
)
],
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment