feat: Teaching tip (#570)

Author: bdlukaa

CHANGELOG.md

@@ -40,6 +40,8 @@
 - feat: Handle `TextBox` context menu controls on mobile platforms ([#1022](https://github.com/bdlukaa/fluent_ui/issues/1022))
 - fix: Default `TextBox` border
 - feat: Added Nepali localization support ([#1177](https://github.com/bdlukaa/fluent_ui/pull/1177))
+- feat: Teaching Tips ([#412](https://github.com/bdlukaa/fluent_ui/issues/412))
+- feat: Added more flyout placement modes: `leftTop`, `leftCenter`, `leftBottom`, `rightTop`, `rightCenter` and `rightBottom`. `left` and `right` are now deprecated and default to `leftCenter` and `rightCenter`, respectively. Additionally, added the `full` placement mode, which allows the flyout to position itself within the screen. ([#570](https://github.com/bdlukaa/fluent_ui/pull/570))
 
 ## 4.10.0
 

example/lib/main.dart

@@ -301,22 +301,28 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
       title: const Text('ContentDialog'),
       body: const SizedBox.shrink(),
     ),
+    PaneItem(
+      key: const ValueKey('/popups/flyout'),
+      icon: const Icon(FluentIcons.pop_expand),
+      title: const Text('Flyout'),
+      body: const SizedBox.shrink(),
+    ),
     PaneItem(
       key: const ValueKey('/popups/menu_bar'),
       icon: const Icon(FluentIcons.expand_menu),
       title: const Text('MenuBar'),
       body: const SizedBox.shrink(),
     ),
     PaneItem(
-      key: const ValueKey('/popups/tooltip'),
-      icon: const Icon(FluentIcons.hint_text),
-      title: const Text('Tooltip'),
+      key: const ValueKey('/popups/teaching_tip'),
+      icon: const Icon(FluentIcons.field_filled),
+      title: const Text('Teaching Tip'),
       body: const SizedBox.shrink(),
     ),
     PaneItem(
-      key: const ValueKey('/popups/flyout'),
-      icon: const Icon(FluentIcons.pop_expand),
-      title: const Text('Flyout'),
+      key: const ValueKey('/popups/tooltip'),
+      icon: const Icon(FluentIcons.hint_text),
+      title: const Text('Tooltip'),
       body: const SizedBox.shrink(),
     ),
     PaneItemHeader(header: const Text('Theming')),
@@ -974,6 +980,15 @@ final router = GoRouter(navigatorKey: rootNavigatorKey, routes: [
         ),
       ),
 
+      /// Teaching Tip
+      GoRoute(
+        path: '/popups/teaching_tip',
+        builder: (context, state) => DeferredWidget(
+          surfaces.loadLibrary,
+          () => popups.TeachingTipPage(),
+        ),
+      ),
+
       /// /// Theming
       /// Colors
       GoRoute(

example/lib/routes/popups.dart

@@ -1,4 +1,5 @@
 export '../screens/popups/content_dialog.dart';
 export '../screens/popups/menu_bar.dart';
 export '../screens/popups/flyout.dart';
+export '../screens/popups/teaching_tip.dart';
 export '../screens/popups/tooltip.dart';

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/navigation/navigation_view.dart

@@ -15,7 +15,7 @@ class NavigationViewPage extends StatefulWidget {
 
 class _NavigationViewPageState extends State<NavigationViewPage>
     with PageMixin {
-  static const double itemHeight = 300.0;
+  static const double itemHeight = 500.0;
 
   int topIndex = 0;
 
@@ -66,6 +66,7 @@ class _NavigationViewPageState extends State<NavigationViewPage>
       enabled: false,
       onTap: () => debugPrint('Tapped disabled'),
     ),
+    PaneItemHeader(header: const Text('Apps')),
     PaneItemExpander(
       icon: const Icon(FluentIcons.account_management),
       title: const Text('Account'),
@@ -84,7 +85,6 @@ class _NavigationViewPageState extends State<NavigationViewPage>
       ),
       onTap: () => debugPrint('Tapped account'),
       items: [
-        PaneItemHeader(header: const Text('Apps')),
         PaneItem(
           icon: const Icon(FluentIcons.mail),
           title: const Text('Mail'),
@@ -376,13 +376,13 @@ NavigationView(
               selected: topIndex,
               onItemPressed: (index) {
                 // Do anything you want to do, such as:
-                if (index == topIndex) {
-                  if (displayMode == PaneDisplayMode.open) {
-                    setState(() => this.displayMode = PaneDisplayMode.compact);
-                  } else if (displayMode == PaneDisplayMode.compact) {
-                    setState(() => this.displayMode = PaneDisplayMode.open);
-                  }
-                }
+                // if (index == topIndex) {
+                //   if (displayMode == PaneDisplayMode.open) {
+                //     setState(() => this.displayMode = PaneDisplayMode.compact);
+                //   } else if (displayMode == PaneDisplayMode.compact) {
+                //     setState(() => this.displayMode = PaneDisplayMode.open);
+                //   }
+                // }
               },
               onChanged: (index) => setState(() => topIndex = index),
               displayMode: displayMode,