Skip to content

Instantly share code, notes, and snippets.

@rydmike
Created November 24, 2020 12:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rydmike/82d2817761d52aa2c1eb47d0edf4bb5f to your computer and use it in GitHub Desktop.
Save rydmike/82d2817761d52aa2c1eb47d0edf4bb5f to your computer and use it in GitHub Desktop.
Tooltip size test - For testing legibility of different sizes on different platforms
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool isDarkMode;
@override
void initState() {
isDarkMode = false;
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Tooltip Size Test',
debugShowCheckedModeBanner: false,
theme: ThemeData.from(colorScheme: ColorScheme.light()),
darkTheme: ThemeData.from(colorScheme: ColorScheme.dark()),
themeMode: isDarkMode ? ThemeMode.dark : ThemeMode.light,
home: TooltipTest(
setDarkMode: (bool value) {
setState(() {
isDarkMode = value;
});
},
),
);
}
}
class TooltipTest extends StatefulWidget {
const TooltipTest({
Key key,
this.setDarkMode,
}) : super(key: key);
final ValueChanged<bool> setDarkMode;
@override
_TooltipTestState createState() => _TooltipTestState();
}
class _TooltipTestState extends State<TooltipTest> {
bool isDarkMode;
@override
void initState() {
isDarkMode = false;
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Tooltips Sample'),
elevation: 0,
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Column(
children: [
Text('Tooltips on Windows Desktop',
style: Theme.of(context).textTheme.headline5),
Text(
'Device pixel ratio is ${MediaQuery.of(context).devicePixelRatio}'),
SwitchListTile.adaptive(
title: const Text(
'Change theme mode',
),
value: isDarkMode,
onChanged: (bool value) {
setState(() {
isDarkMode = value;
widget.setDarkMode(isDarkMode);
});
},
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FakeTooltip(
message: 'Tooltip message ijklmnop ABC 123',
fontSize: 9,
),
Text('Default system font, size 9'),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FakeTooltip(
message: 'Tooltip message ijklmnop ABC 123',
fontSize: 10,
),
Text('Default system font, size 10'),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FakeTooltip(
message: 'Tooltip message ijklmnop ABC 123',
fontSize: 11,
),
Text('Default system font, size 11'),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FakeTooltip(
message: 'Tooltip message ijklmnop ABC 123',
fontSize: 12,
),
Text('Default system font, size 12'),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FakeTooltip(
message: 'Tooltip message ijklmnop ABC 123',
fontSize: 13,
),
Text('Default system font, size 13'),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FakeTooltip(
message: 'Tooltip message ijklmnop ABC 123',
fontSize: 14,
),
Text('Default system font, size 14'),
],
)
],
),
),
),
);
}
}
class FakeTooltip extends StatelessWidget {
const FakeTooltip({
Key key,
this.message,
this.height = 24,
this.fontSize = 10,
this.padding = const EdgeInsets.symmetric(horizontal: 8.0),
this.margin = const EdgeInsets.all(0.0),
}) : super(key: key);
final String message;
final double height;
final double fontSize;
final EdgeInsetsGeometry padding;
final EdgeInsetsGeometry margin;
@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
BoxDecoration decoration;
TextStyle textStyle;
if (theme.brightness == Brightness.dark) {
textStyle = theme.textTheme.bodyText2.copyWith(
color: Colors.black,
fontSize: fontSize,
);
decoration = BoxDecoration(
color: Colors.white.withOpacity(0.9),
borderRadius: const BorderRadius.all(Radius.circular(4)),
);
} else {
textStyle = theme.textTheme.bodyText2.copyWith(
color: Colors.white,
fontSize: fontSize,
);
decoration = BoxDecoration(
color: Colors.grey[700].withOpacity(0.9),
borderRadius: const BorderRadius.all(Radius.circular(4)),
);
}
return ConstrainedBox(
constraints: BoxConstraints(minHeight: height),
child: DefaultTextStyle(
style: Theme.of(context).textTheme.bodyText2,
child: Container(
decoration: decoration,
padding: padding,
margin: margin,
child: Center(
widthFactor: 1.0,
heightFactor: 1.0,
child: Text(
message,
style: textStyle,
),
),
),
),
);
}
}
@rydmike
Copy link
Author

rydmike commented Nov 24, 2020

Related to Flutter issue flutter/flutter#71052

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment