Created
November 24, 2020 12:37
-
-
Save rydmike/82d2817761d52aa2c1eb47d0edf4bb5f to your computer and use it in GitHub Desktop.
Tooltip size test - For testing legibility of different sizes on different platforms
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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, | |
), | |
), | |
), | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Related to Flutter issue flutter/flutter#71052