Teaching tip

example/lib/main.dart

@@ -308,19 +308,27 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
  ),
  ),
  PaneItem(
- icon: const Icon(FluentIcons.hint_text),
- title: const Text('Tooltip'),
+ icon: const Icon(FluentIcons.pop_expand),
+ title: const Text('Flyout'),
  body: DeferredWidget(
  surfaces.loadLibrary,
- () => popups.TooltipPage(),
+ () => popups.Flyout2Screen(),
  ),
  ),
  PaneItem(
- icon: const Icon(FluentIcons.pop_expand),
- title: const Text('Flyout'),
+ icon: const Icon(FluentIcons.field_filled),
+ title: const Text('Teaching Tip'),
  body: DeferredWidget(
  surfaces.loadLibrary,
- () => popups.Flyout2Screen(),
+ () => surfaces.TeachingTipPage(),
+ ),
+ ),
+ PaneItem(
+ icon: const Icon(FluentIcons.hint_text),
+ title: const Text('Tooltip'),
+ body: DeferredWidget(
+ surfaces.loadLibrary,
+ () => popups.TooltipPage(),
  ),
  ),
  PaneItemHeader(header: const Text('Theming')),

example/lib/routes/surfaces.dart

@@ -3,4 +3,5 @@ export '../screens/surface/commandbars.dart';
 export '../screens/surface/expander.dart';
 export '../screens/surface/info_bars.dart';
 export '../screens/surface/progress_indicators.dart';
+export '../screens/popups/teaching_tip.dart';
 export '../screens/surface/tiles.dart';

example/lib/screens/popups/teaching_tip.dart

@@ -0,0 +1,211 @@
+import 'package:example/theme.dart';
+import 'package:example/widgets/card_highlight.dart';
+import 'package:example/widgets/page.dart';
+import 'package:fluent_ui/fluent_ui.dart';
+import 'package:provider/provider.dart';
+
+class TeachingTipPage extends StatefulWidget {
+ const TeachingTipPage({Key? key}) : super(key: key);
+
+ @override
+ State<TeachingTipPage> createState() => _TeachingTipPageState();
+}
+
+class _TeachingTipPageState extends State<TeachingTipPage> with PageMixin {
+ final nonTargetedController = FlyoutController();
+
+ static const alignments = {
+ 'Bottom left': Alignment.bottomLeft,
+ 'Bottom center': Alignment.bottomCenter,
+ 'Bottom right': Alignment.bottomRight,
+ 'Center': Alignment.center,
+ 'Top left': Alignment.topLeft,
+ 'Top center': Alignment.topCenter,
+ 'Top right': Alignment.topRight,
+ };
+ static const placements = {
+ 'Bottom left': FlyoutPlacementMode.bottomLeft,
+ 'Bottom center': FlyoutPlacementMode.bottomCenter,
+ 'Bottom right': FlyoutPlacementMode.bottomRight,
+ 'Center': FlyoutPlacementMode.left,
+ 'Top left': FlyoutPlacementMode.topLeft,
+ 'Top center': FlyoutPlacementMode.topCenter,
+ 'Top right': FlyoutPlacementMode.topRight,
+ };
+ late String alignment = 'Bottom center';
+ final targetedController = FlyoutController();
+
+ @override
+ void dispose() {
+ nonTargetedController.dispose();
+ targetedController.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ final theme = FluentTheme.of(context);
+ final appTheme = context.watch<AppTheme>();
+
+ return ScaffoldPage.scrollable(
+ header: const PageHeader(title: Text('Teaching Tip')),
+ children: [
+ description(
+ content: const Text(
+ 'A teaching tip is a semi-persistent and content-rich flyout '
+ 'that provides contextual information. It is often used for '
+ 'informing, reminding, and teaching users about important and new '
+ 'features that may enhance their experience.',
+ ),
+ ),
+ subtitle(
+ content: const Text('Show a non-targeted TeachingTip with buttons'),
+ ),
+ CardHighlight(
+ child: Row(children: [
+ FlyoutTarget(
+ controller: nonTargetedController,
+ child: Button(
+ child: const Text('Show TeachingTip'),
+ onPressed: () {
+ showTeachingTip(
+ flyoutController: nonTargetedController,
+ nonTargetedAlignment: alignments[alignment],
+ placementMode: placements[alignment]!,
+ builder: (context) => TeachingTip(
+ title: const Text('Change themes without hassle'),
+ subtitle: const Text(
+ 'It\'s easier to see control samples in both light and dark theme',
+ ),
+ buttons: [
+ Button(
+ child: const Text('Toggle theme now'),
+ onPressed: () {
+ if (theme.brightness.isDark) {
+ appTheme.mode = ThemeMode.light;
+ } else {
+ appTheme.mode = ThemeMode.dark;
+ }
+ Navigator.of(context).pop();
+ },
+ ),
+ Button(
+ child: const Text('Got it'),
+ onPressed: Navigator.of(context).pop,
+ ),
+ ],
+ ),
+ );
+ },
+ ),
+ ),
+ const SizedBox(width: 18.0),
+ SizedBox(
+ width: 150.0,
+ child: ComboBox<String>(
+ placeholder: const Text('Alignment'),
+ items: List.generate(alignments.length, (index) {
+ final entry = alignments.entries.elementAt(index);
+
+ return ComboBoxItem(
+ value: entry.key,
+ child: Text(entry.key.uppercaseFirst()),
+ );
+ }),
+ value: alignment,
+ onChanged: (a) {
+ if (a != null) setState(() => alignment = a);
+ },
+ ),
+ ),
+ ]),
+ codeSnippet: '''final teachingTip = TeachingTip(
+ title: Text('Change themes without hassle'),
+ subtitle: Text(
+ 'It's easier to see control samples in both light and dark theme',
+ ),
+ buttons: <Widget>[
+ Button(
+ child: const Text('Toggle theme now'),
+ onPressed: () {
+ // toggle theme here
+
+ // then close the popup
+ Navigator.of(context).pop();
+ },
+ ),
+ Button(
+ child: const Text('Got it'),
+ onPressed: Navigator.of(context).pop,
+ ),
+ ],
+),
+
+showTeachingTip(
+ context: context,
+ teachingTip: teachingTip,
+);''',
+ ),
+// subtitle(
+// content: const Text('Show a targeted TeachingTip'),
+// ),
+// CardHighlight(
+// child: Row(
+// children: [
+// Button(
+// child: const Text('Show TeachingTip'),
+// onPressed: () {
+// targetKey.currentState?.showTeachingTip(builder: (context) {
+// return const TeachingTip(
+// alignment: Alignment.bottomCenter,
+// placementMargin: EdgeInsets.all(20.0),
+// title: Text('Change themes without hassle'),
+// subtitle: Text(
+// 'It\'s easier to see control samples in both light and dark theme',
+// ),
+// );
+// });
+// },
+// ),
+// const Spacer(),
+// TeachingTipTarget(
+// key: targetKey,
+// child: Container(
+// height: 100,
+// width: 200,
+// color: theme.accentColor.defaultBrushFor(theme.brightness),
+// ),
+// ),
+// ],
+// ),
+// codeSnippet: '''final teachingTip = TeachingTip(
+// title: Text('Change themes without hassle'),
+// subtitle: Text(
+// 'It's easier to see control samples in both light and dark theme',
+// ),
+// buttons: <Widget>[
+// Button(
+// child: const Text('Toggle theme now'),
+// onPressed: () {
+// // toggle theme here
+
+// // then close the popup
+// Navigator.of(context).pop();
+// },
+// ),
+// Button(
+// child: const Text('Got it'),
+// onPressed: Navigator.of(context).pop,
+// ),
+// ],
+// ),
+
+// showTeachingTip(
+// context: context,
+// teachingTip: teachingTip,
+// );''',
+// ),
+ ],
+ );
+ }
+}

lib/fluent_ui.dart

@@ -80,6 +80,7 @@ export 'src/controls/surfaces/info_bar.dart';
 export 'src/controls/surfaces/list_tile.dart';
 export 'src/controls/surfaces/progress_indicators.dart';
 export 'src/controls/surfaces/snackbar.dart';
+export 'src/controls/surfaces/teaching_tip.dart';
 export 'src/controls/surfaces/tooltip.dart';
 export 'src/controls/utils/divider.dart';
 export 'src/controls/utils/hover_button.dart';

lib/src/controls/flyouts/flyout.dart

@@ -351,10 +351,12 @@ class _FlyoutPositionDelegate extends SingleChildLayoutDelegate {
  double clampHorizontal(double x) {
  if (!shouldConstrainToRootBounds) return x;
 
+ final max = rootSize.width - flyoutSize.width - margin;
+
  return clampDouble(
  x,
- margin,
- rootSize.width - flyoutSize.width - margin,
+ clampDouble(margin, double.negativeInfinity, max),
+ max,
  );
  }
 

lib/src/controls/surfaces/dialog.dart

@@ -161,8 +161,8 @@ class ContentDialog extends StatelessWidget {
  }
 }
 
-/// Displays a Material dialog above the current contents of the app, with
-/// Material entrance and exit animations, modal barrier color, and modal
+/// Displays a Fluent dialog above the current contents of the app, with
+/// Fluent entrance and exit animations, modal barrier color, and modal
 /// barrier behavior (dialog is dismissible with a tap on the barrier).
 ///
 /// This function takes a `builder` which typically builds a [Dialog] widget.
@@ -262,7 +262,7 @@ Future<T?> showDialog<T extends Object?>({
 /// onto the [Navigator] stack to enable state restoration. See
 /// [showDialog] for a state restoration app example.
 ///
-/// This function takes a `builder` which typically builds a [Dialog] widget.
+/// This function takes a `builder` which typically builds a [ContentDialog] widget.
 /// Content below the dialog is dimmed with a [ModalBarrier]. The widget
 /// returned by the `builder` does not share a context with the location that
 /// `showDialog` is originally called from. Use a [StatefulBuilder] or a
@@ -294,7 +294,7 @@ Future<T?> showDialog<T extends Object?>({
 /// * [showDialog], which is a way to display a DialogRoute.
 /// * [showGeneralDialog], which allows for customization of the dialog popup.
 class FluentDialogRoute<T> extends RawDialogRoute<T> {
- /// A dialog route with Material entrance and exit animations,
+ /// A dialog route with Fluent entrance and exit animations,
  /// modal barrier color
  FluentDialogRoute({
  required WidgetBuilder builder,