Skip to content

Instantly share code, notes, and snippets.

@s0nerik
Last active October 4, 2021 12:25
Show Gist options
  • Save s0nerik/905b5de1058e3e8ac054c0939a648db6 to your computer and use it in GitHub Desktop.
Save s0nerik/905b5de1058e3e8ac054c0939a648db6 to your computer and use it in GitHub Desktop.
Figma line height vs Flutter's TextStyle height illustration
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
const lineHeight = 27.0;
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Figma line height vs Flutter\'s TextStyle height',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.grey[300],
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text('"Bad" text height'),
Container(
width: 100,
height: 40,
color: Colors.white,
child: BadText(),
),
const SizedBox(height: 24),
const Text('"Good" text height'),
Container(
width: 100,
height: 40,
color: Colors.white,
child: GoodText(),
),
],
),
),
);
}
}
class BadText extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Icon(Icons.fiber_smart_record_outlined),
SizedBox(width: 12),
Text(
'Text',
style: TextStyle(
fontSize: 17,
height: lineHeight / 17,
fontWeight: FontWeight.w400,
),
),
],
);
}
}
class GoodText extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Icon(Icons.fiber_smart_record_outlined),
const SizedBox(width: 12),
Container(
height: lineHeight,
alignment: Alignment.center,
child: const Text(
'Text',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w400,
),
),
),
],
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment