Created
December 1, 2020 13:55
-
-
Save rydmike/483bee488423664b80c6b755c9b88a3b to your computer and use it in GitHub Desktop.
Another Flutter tooltip example for issue: https://github.com/flutter/flutter/issues/71429#issuecomment-736098032
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()); | |
const String demoTooltip = 'Share the selected files and folders\n' | |
'with other people on the network.'; | |
// const String demoTooltip = 'Tooltip message ijklmnop ABC 123'; | |
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: demoTooltip, | |
fontSize: 9, | |
), | |
Text('Default system font, size 9'), | |
], | |
), | |
const SizedBox(height: 10), | |
Row( | |
mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
children: [ | |
FakeTooltip( | |
message: demoTooltip, | |
fontSize: 10, | |
), | |
Text('Default system font, size 10'), | |
], | |
), | |
const SizedBox(height: 10), | |
Row( | |
mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
children: [ | |
FakeTooltip( | |
message: demoTooltip, | |
fontSize: 11, | |
), | |
Text('Default system font, size 11'), | |
], | |
), | |
const SizedBox(height: 10), | |
Row( | |
mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
children: [ | |
FakeTooltip( | |
message: demoTooltip, | |
fontSize: 12, | |
), | |
Text('Default system font, size 12'), | |
], | |
), | |
const SizedBox(height: 10), | |
Row( | |
mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
children: [ | |
FakeTooltip( | |
message: demoTooltip, | |
fontSize: 13, | |
), | |
Text('Default system font, size 13'), | |
], | |
), | |
const SizedBox(height: 10), | |
Row( | |
mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
children: [ | |
FakeTooltip( | |
message: demoTooltip, | |
fontSize: 14, | |
), | |
Text('Default system font, size 14'), | |
], | |
), | |
const SizedBox(height: 10), | |
Tooltip( | |
message: demoTooltip, | |
child: Text( | |
'Show the same string as an actual default styled tooltip'), | |
), | |
], | |
), | |
), | |
), | |
); | |
} | |
} | |
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