+
+**Features**:
+
+ - Custom window frame - remove standard Windows/macOS/Linux titlebar and buttons
+ - Hide window on startup
+ - Show/hide window
+ - Move window using Flutter widget
+ - Minimize/Maximize/Restore/Close window
+ - Set window size, minimum size and maximum size
+ - Set window position
+ - Set window alignment on screen (center/topLeft/topRight/bottomLeft/bottomRight)
+ - Set window title
+
+# Getting Started
+
+Install the package using `pubspec.yaml`
+
+# For Windows apps
+
+Inside your application folder, go to `windows\runner\main.cpp` and add these two lines at the beginning of the file:
+
+```cpp
+#include
+
+
+#
+# ❤️ **Sponsors - friends helping this package**
+
+I am developing this package in my spare time and any help is appreciated.
+If you want to help you can [become a sponsor](https://github.com/sponsors/bitsdojo).
+
+🙏 Thank you!
+
+Want to help? [Become a sponsor](https://github.com/sponsors/bitsdojo)
diff --git a/dependencies/bitsdojo_window-0.1.5/lib/bitsdojo_window.dart b/dependencies/bitsdojo_window-0.1.5/lib/bitsdojo_window.dart
new file mode 100644
index 0000000..0b3205e
--- /dev/null
+++ b/dependencies/bitsdojo_window-0.1.5/lib/bitsdojo_window.dart
@@ -0,0 +1,5 @@
+export 'src/widgets/window_border.dart';
+export 'src/widgets/window_button.dart';
+export 'src/widgets/window_caption.dart';
+export 'src/icons/icons.dart';
+export 'src/app_window.dart';
diff --git a/dependencies/bitsdojo_window-0.1.5/lib/src/app_window.dart b/dependencies/bitsdojo_window-0.1.5/lib/src/app_window.dart
new file mode 100644
index 0000000..8ab6e38
--- /dev/null
+++ b/dependencies/bitsdojo_window-0.1.5/lib/src/app_window.dart
@@ -0,0 +1,43 @@
+import 'package:bitsdojo_window_platform_interface/bitsdojo_window_platform_interface.dart';
+import 'package:bitsdojo_window_platform_interface/method_channel_bitsdojo_window.dart';
+import 'package:bitsdojo_window_windows/bitsdojo_window_windows.dart';
+import 'package:bitsdojo_window_macos/bitsdojo_window_macos.dart';
+import 'package:bitsdojo_window_linux/bitsdojo_window_linux.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter/foundation.dart' show kIsWeb;
+import 'dart:io' show Platform;
+
+bool _platformInstanceNeedsInit = true;
+
+void initPlatformInstance() {
+ if (!kIsWeb) {
+ if (BitsdojoWindowPlatform.instance is MethodChannelBitsdojoWindow) {
+ if (Platform.isWindows) {
+ BitsdojoWindowPlatform.instance = BitsdojoWindowWindows();
+ } else if (Platform.isMacOS) {
+ BitsdojoWindowPlatform.instance = BitsdojoWindowMacOS();
+ } else if (Platform.isLinux) {
+ BitsdojoWindowPlatform.instance = BitsdojoWindowLinux();
+ }
+ }
+ } else {
+ BitsdojoWindowPlatform.instance = BitsdojoWindowPlatformNotImplemented();
+ }
+}
+
+BitsdojoWindowPlatform get _platform {
+ var needsInit = _platformInstanceNeedsInit;
+ if (needsInit) {
+ initPlatformInstance();
+ _platformInstanceNeedsInit = false;
+ }
+ return BitsdojoWindowPlatform.instance;
+}
+
+void doWhenWindowReady(VoidCallback callback) {
+ _platform.doWhenWindowReady(callback);
+}
+
+DesktopWindow get appWindow {
+ return _platform.appWindow;
+}
diff --git a/dependencies/bitsdojo_window-0.1.5/lib/src/icons/icons.dart b/dependencies/bitsdojo_window-0.1.5/lib/src/icons/icons.dart
new file mode 100644
index 0000000..c0b00eb
--- /dev/null
+++ b/dependencies/bitsdojo_window-0.1.5/lib/src/icons/icons.dart
@@ -0,0 +1,114 @@
+import 'dart:math';
+
+import 'package:flutter/widgets.dart';
+
+// Switched to CustomPaint icons by https://github.com/esDotDev
+
+/// Close
+class CloseIcon extends StatelessWidget {
+ final Color color;
+ CloseIcon({Key? key, required this.color}) : super(key: key);
+ @override
+ Widget build(BuildContext context) => Align(
+ alignment: Alignment.topLeft,
+ child: Stack(children: [
+ // Use rotated containers instead of a painter because it renders slightly crisper than a painter for some reason.
+ Transform.rotate(
+ angle: pi * .25,
+ child:
+ Center(child: Container(width: 14, height: 1, color: color))),
+ Transform.rotate(
+ angle: pi * -.25,
+ child:
+ Center(child: Container(width: 14, height: 1, color: color))),
+ ]),
+ );
+}
+
+/// Maximize
+class MaximizeIcon extends StatelessWidget {
+ final Color color;
+ MaximizeIcon({Key? key, required this.color}) : super(key: key);
+ @override
+ Widget build(BuildContext context) => _AlignedPaint(_MaximizePainter(color));
+}
+
+class _MaximizePainter extends _IconPainter {
+ _MaximizePainter(Color color) : super(color);
+ @override
+ void paint(Canvas canvas, Size size) {
+ Paint p = getPaint(color);
+ canvas.drawRect(Rect.fromLTRB(0, 0, size.width - 1, size.height - 1), p);
+ }
+}
+
+/// Restore
+class RestoreIcon extends StatelessWidget {
+ final Color color;
+ RestoreIcon({
+ Key? key,
+ required this.color,
+ }) : super(key: key);
+ @override
+ Widget build(BuildContext context) => _AlignedPaint(_RestorePainter(color));
+}
+
+class _RestorePainter extends _IconPainter {
+ _RestorePainter(Color color) : super(color);
+ @override
+ void paint(Canvas canvas, Size size) {
+ Paint p = getPaint(color);
+ canvas.drawRect(Rect.fromLTRB(0, 2, size.width - 2, size.height), p);
+ canvas.drawLine(Offset(2, 2), Offset(2, 0), p);
+ canvas.drawLine(Offset(2, 0), Offset(size.width, 0), p);
+ canvas.drawLine(
+ Offset(size.width, 0), Offset(size.width, size.height - 2), p);
+ canvas.drawLine(Offset(size.width, size.height - 2),
+ Offset(size.width - 2, size.height - 2), p);
+ }
+}
+
+/// Minimize
+class MinimizeIcon extends StatelessWidget {
+ final Color color;
+ MinimizeIcon({Key? key, required this.color}) : super(key: key);
+ @override
+ Widget build(BuildContext context) => _AlignedPaint(_MinimizePainter(color));
+}
+
+class _MinimizePainter extends _IconPainter {
+ _MinimizePainter(Color color) : super(color);
+ @override
+ void paint(Canvas canvas, Size size) {
+ Paint p = getPaint(color);
+ canvas.drawLine(
+ Offset(0, size.height / 2), Offset(size.width, size.height / 2), p);
+ }
+}
+
+/// Helpers
+abstract class _IconPainter extends CustomPainter {
+ _IconPainter(this.color);
+ final Color color;
+
+ @override
+ bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}
+
+class _AlignedPaint extends StatelessWidget {
+ const _AlignedPaint(this.painter, {Key? key}) : super(key: key);
+ final CustomPainter painter;
+
+ @override
+ Widget build(BuildContext context) {
+ return Align(
+ alignment: Alignment.center,
+ child: CustomPaint(size: Size(10, 10), painter: painter));
+ }
+}
+
+Paint getPaint(Color color, [bool isAntiAlias = false]) => Paint()
+ ..color = color
+ ..style = PaintingStyle.stroke
+ ..isAntiAlias = isAntiAlias
+ ..strokeWidth = 1;
diff --git a/dependencies/bitsdojo_window-0.1.5/lib/src/widgets/mouse_state_builder.dart b/dependencies/bitsdojo_window-0.1.5/lib/src/widgets/mouse_state_builder.dart
new file mode 100644
index 0000000..3266758
--- /dev/null
+++ b/dependencies/bitsdojo_window-0.1.5/lib/src/widgets/mouse_state_builder.dart
@@ -0,0 +1,71 @@
+import 'package:flutter/widgets.dart';
+
+typedef MouseStateBuilderCB = Widget Function(
+ BuildContext context, MouseState mouseState);
+
+class MouseState {
+ bool isMouseOver = false;
+ bool isMouseDown = false;
+ MouseState();
+ @override
+ String toString() {
+ return "isMouseDown: ${this.isMouseDown} - isMouseOver: ${this.isMouseOver}";
+ }
+}
+
+T? _ambiguateClick to expand
+ +```dart +import 'package:flutter/material.dart'; +import 'package:bitsdojo_window/bitsdojo_window.dart'; + +void main() { + runApp(const MyApp()); + doWhenWindowReady(() { + final win = appWindow; + const initialSize = Size(600, 450); + win.minSize = initialSize; + win.size = initialSize; + win.alignment = Alignment.center; + win.title = "Custom window with Flutter"; + win.show(); + }); +} + +const borderColor = Color(0xFF805306); + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + debugShowCheckedModeBanner: false, + home: Scaffold( + body: WindowBorder( + color: borderColor, + width: 1, + child: Row( + children: const [LeftSide(), RightSide()], + ), + ), + ), + ); + } +} + +const sidebarColor = Color(0xFFF6A00C); + +class LeftSide extends StatelessWidget { + const LeftSide({Key? key}) : super(key: key); + @override + Widget build(BuildContext context) { + return SizedBox( + width: 200, + child: Container( + color: sidebarColor, + child: Column( + children: [ + WindowTitleBarBox(child: MoveWindow()), + Expanded(child: Container()) + ], + ))); + } +} + +const backgroundStartColor = Color(0xFFFFD500); +const backgroundEndColor = Color(0xFFF6A00C); + +class RightSide extends StatelessWidget { + const RightSide({Key? key}) : super(key: key); + @override + Widget build(BuildContext context) { + return Expanded( + child: Container( + decoration: const BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [backgroundStartColor, backgroundEndColor], + stops: [0.0, 1.0]), + ), + child: Column(children: [ + WindowTitleBarBox( + child: Row( + children: [Expanded(child: MoveWindow()), const WindowButtons()], + ), + ) + ]), + ), + ); + } +} + +final buttonColors = WindowButtonColors( + iconNormal: const Color(0xFF805306), + mouseOver: const Color(0xFFF6A00C), + mouseDown: const Color(0xFF805306), + iconMouseOver: const Color(0xFF805306), + iconMouseDown: const Color(0xFFFFD500)); + +final closeButtonColors = WindowButtonColors( + mouseOver: const Color(0xFFD32F2F), + mouseDown: const Color(0xFFB71C1C), + iconNormal: const Color(0xFF805306), + iconMouseOver: Colors.white); + +class WindowButtons extends StatelessWidget { + const WindowButtons({Key? key}) : super(key: key); + @override + Widget build(BuildContext context) { + return Row( + children: [ + MinimizeWindowButton(colors: buttonColors), + MaximizeWindowButton(colors: buttonColors), + CloseWindowButton(colors: closeButtonColors), + ], + ); + } +} +``` +
+ 
+ 
+ 
+
+## Installation
+
+Add the package to your dependencies:
+
+```yaml
+dependencies:
+ fluent_ui: ^3.10.0
+```
+
+OR:
+
+```yaml
+dependencies:
+ fluent_ui:
+ git: https://github.com/bdlukaa/fluent_ui.git
+```
+
+You can see the example app [here](https://bdlukaa.github.io/fluent_ui//)
+
+Finally, run `dart pub get` to download the package.
+
+Projects using this library should use the stable channel of Flutter
+
+### Badge
+
+Are you using this library on your app? You can use a badge to tell others:
+
+
+ 
+
+
+Add the following code to your `README.md` or to your website:
+
+```html
+
+
+
+```
+
+---
+
+# Style
+
+[Learn more about Fluent Style](https://docs.microsoft.com/en-us/windows/uwp/design/style/)
+
+You can use the `FluentTheme` widget to, well... theme your widgets. You can style your widgets in two ways:
+
+1. Using the `FluentApp` widget
+
+```dart
+FluentApp(
+ title: 'MyApp',
+ theme: ThemeData(
+ ...
+ ),
+)
+```
+
+2. Using the `FluentTheme` widget
+
+```dart
+FluentTheme(
+ theme: ThemeData(
+ ...
+ ),
+ child: ...,
+),
+```
+
+## Icons
+
+
+
+Inside your app, you use icons to represent an action, such as copying text or navigating to the settings page. This library includes an icon library with it, so you can just call `FluentIcons.[icon_name]` in any `Icon` widget:
+
+```dart
+Icon(FluentIcons.add),
+```
+
+For a complete reference of current icons, please check the [online demo](https://bdlukaa.github.io/fluent_ui/) and click on "Icons".
+
+The online demo has a search box and also supports clipboard copy in order to find every icon as fast as possible.
+
+
+
+## Colors
+
+This library also includes the Fluent UI colors with it, so you can just call `Colors.[color_name]`:
+
+```dart
+TextStyle(color: Colors.black),
+```
+
+Avaiable colors:
+
+- `Colors.transparent`
+- `Colors.white`
+- `Colors.black`
+- `Colors.grey`
+- `Colors.yellow`
+- `Colors.orange`
+- `Colors.red`
+- `Colors.magenta`
+- `Colors.purple`
+- `Colors.blue`
+- `Colors.teal`
+- `Colors.green`
+
+### Accent color
+
+Common controls use an accent color to convey state information. [Learn more](https://docs.microsoft.com/en-us/windows/uwp/design/style/color#accent-color).
+
+By default, the accent color is `Colors.blue`. However, you can also customize your app's accent color to reflect your brand:
+
+```dart
+ThemeData(
+ accentColor: Colors.blue,
+)
+```
+
+To use the system's accent color, you can use the plugin [system_theme](https://pub.dev/packages/system_theme) made by me :). It has support for (as of 04/01/2021) Android, Web and Windows.
+
+```dart
+import 'package:system_theme/system_theme.dart';
+
+ThemeData(
+ accentColor: SystemTheme.accentInstance.accent.toAccentColor(),
+)
+```
+
+## Brightness
+
+You can change the theme brightness to change the color of your app to
+
+1. `Brightness.light`
+
+ 
+
+2. `Brightness.dark`
+
+ 
+
+It defaults to the brightness of the device. (`MediaQuery.of(context).platformBrightness`)
+
+```dart
+ThemeData(
+ brightness: Brightness.light, // or Brightness.dark
+),
+```
+
+## Visual Density
+
+Density, in the context of a UI, is the vertical and horizontal "compactness" of the components in the UI. It is unitless, since it means different things to different UI components.
+
+The default for visual densities is zero for both vertical and horizontal densities. It does not affect text sizes, icon sizes, or padding values.
+
+For example, for buttons, it affects the spacing around the child of the button. For lists, it affects the distance between baselines of entries in the list. For chips, it only affects the vertical size, not the horizontal size.
+
+```dart
+ThemeData(
+ visualDensity: VisualDensity.adaptivePlatformDensity,
+),
+```
+
+The following widgets make use of visual density:
+
+- Chip
+- PillButtonBar
+- Snackbar
+
+## Typography
+
+To set a typography, you can use the `ThemeData` class combined with the `Typography` class:
+
+```dart
+ThemeData(
+ typography: Typography(
+ caption: TextStyle(
+ fontSize: 12,
+ color: Colors.black,
+ fontWeight: FontWeight.normal,
+ ),
+ ),
+)
+```
+
+### Font
+
+You should use one font throughout your app's UI, and we recommend sticking with the default font for Windows apps, **Segoe UI Variable**. It's designed to maintain optimal legibility across sizes and pixel densities and offers a clean, light, and open aesthetic that complements the content of the system. [Learn more](https://docs.microsoft.com/en-us/windows/apps/design/style/typography#font)
+
+
+
+
+### Type ramp
+
+The Windows type ramp establishes crucial relationships between the type styles on a page, helping users read content easily. All sizes are in effective pixels. [Learn more](https://docs.microsoft.com/en-us/windows/apps/design/style/typography#type-ramp)
+
+
+
+## Reveal Focus
+
+Reveal Focus is a lighting effect for [10-foot experiences](https://docs.microsoft.com/en-us/windows/uwp/design/devices/designing-for-tv), such as Xbox One and television screens. It animates the border of focusable elements, such as buttons, when the user moves gamepad or keyboard focus to them. It's turned off by default, but it's simple to enable. [Learn more](https://docs.microsoft.com/en-us/windows/uwp/design/style/reveal-focus)
+
+Reveal Focus calls attention to focused elements by adding an animated glow around the element's border:
+
+
+
+This is especially helpful in 10-foot scenarios where the user might not be paying full attention to the entire TV screen.
+
+### Enabling it
+
+Reveal Focus is off by default. To enable it, change the `focusTheme` in your app `ThemeData`:
+
+```dart
+theme: ThemeData(
+ focusTheme: FocusThemeData(
+ glowFactor: 4.0,
+ ),
+),
+```
+
+To enable it in a 10 foot screen, use the method `is10footScreen`:
+
+```dart
+import 'dart:ui' as ui;
+
+theme: ThemeData(
+ focusTheme: FocusThemeData(
+ glowFactor: is10footScreen(ui.window.physicalSize.width) ? 2.0 : 0.0,
+ ),
+),
+```
+
+Go to the [example](/example) project to a full example
+
+### Why isn't Reveal Focus on by default?
+
+As you can see, it's fairly easy to turn on Reveal Focus when the app detects it's running on 10 foot screen. So, why doesn't the system just turn it on for you? Because Reveal Focus increases the size of the focus visual, which might cause issues with your UI layout. In some cases, you'll want to customize the Reveal Focus effect to optimize it for your app.
+
+### Customizing Reveal Focus
+
+You can customize the focus border, border radius and glow color:
+
+```dart
+focusTheme: FocusStyle(
+ borderRadius: BorderRadius.zero,
+ glowColor: theme.accentColor?.withOpacity(0.2),
+ glowFactor: 0.0,
+ border: BorderSide(
+ width: 2.0,
+ color: theme.inactiveColor ?? Colors.transparent,
+ ),
+),
+```
+
+To customize it to a single widget, wrap the widget in a `FocusTheme` widget, and change the options you want:
+
+```dart
+FocusTheme(
+ data: FocusThemeData(...),
+ child: Button(
+ text: Text('Custom Focus Button'),
+ onPressed: () {},
+ )
+),
+```
+
+# Motion
+
+This package widely uses animation in the widgets. The animation duration and curve can be defined on the app theme.
+
+## Page transitions
+
+Page transitions navigate users between pages in an app, providing feedback as the relationship between pages. Page transitions help users understand if they are at the top of a navigation hierarchy, moving between sibling pages, or navigating deeper into the page hierarchy.
+
+It's recommended to widely use page transitions on `NavigationView`, that can be implemented using the widget `NavigationBody`.
+
+This library gives you the following implementations to navigate between your pages:
+
+#### Entrance
+
+Entrance is a combination of a slide up animation and a fade in animation for the incoming content. Use entrance when the user is taken to the top of a navigational stack, such as navigating between tabs or left-nav items.
+
+The desired feeling is that the user has started over.
+
+Avaiable with the widget `EntrancePageTransition`, it produces the following effect:
+
+
+
+#### Drill In
+
+Use drill when users navigate deeper into an app, such as displaying more information after selecting an item.
+
+The desired feeling is that the user has gone deeper into the app.
+
+Avaiable with the widget `DrillInPageTransition`, it produces the following effect:
+
+
+
+#### Horizontal
+
+It's avaiable with the widget `HorizontalSlidePageTransition`.
+
+# Navigation
+
+The default Flutter Navigation is available on the `FluentApp` widget, that means you can simply call `Navigator.push` and `Navigator.pop` to navigate between routes. See [navigate to a new screen and back](https://flutter.dev/docs/cookbook/navigation/navigation-basics)
+
+## Navigation View
+
+The NavigationView control provides top-level navigation for your app. It adapts to a variety of screen sizes and supports both _top_ and _left_ navigation styles.
+
+
+
+### App Bar
+
+The app bar is the top app bar that every desktop nowadays have.
+
+```dart
+NavigationView(
+ appBar: NavigationAppBar(
+ title: Text('Nice App Title :)'),
+ actions: Row(children: [
+ /// These actions are usually the minimize, maximize and close window
+ ]),
+ /// If automaticallyImplyLeading is true, a 'back button' will be added to
+ /// app bar. This property can be overritten by [leading]
+ automaticallyImplyLeading: true,
+ ),
+ ...
+)
+```
+
+### Navigation Pane
+
+The pane is the pane that can be displayed at the left or at the top.
+
+```dart
+NavigationView(
+ ...,
+ pane: NavigationPane(
+ /// The current selected index
+ selected: index,
+ /// Called whenever the current index changes
+ onChanged: (i) => setState(() => index = i),
+ displayMode: PaneDisplayMode.auto,
+ ),
+ ...
+)
+```
+
+You can change the `displayMode` to make it fit the screen.
+
+| Name | Screenshot | Info |
+| ------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Top |  | The pane is positioned above the content. We recommend top navigation when: - You have 5 or fewer top-level navigation categories that are equally important, and any additional top-level navigation categories that end up in the dropdown overflow menu are considered less important. - You need to show all navigation options on screen. - You want more space for your app content.
- Icons cannot clearly describe your app's navigation categories. | +| Open |  | The pane is expanded and positioned to the left of the content. We recommend _open_ navigation when:
- You have 5-10 equally important top-level navigation categories.- You want navigation categories to be very prominent, with less space for other app content. | +| Compact |  | The pane shows only icons until opened and is positioned to the left of the content. | +| Minimal |  | Only the menu button is shown until the pane is opened. When opened, it's positioned to the left of the content. | +| Auto |  | By default, `displayMode` is set to `auto`. In Auto mode, the NavigationView adapts between `minimal` when the window is narrow, to `compact`, and then `open` as the window gets wider. | + +You can customize the selected indicator. By default `StickyNavigationIndicator` is used, but you can also use the old windows indicator: + +```dart +pane: NavigationPane( + indicator: const EndNavigationIndicator(), +) +``` + +### Navigation body + +A navigation body is used to implement page transitions into a navigation view. It knows what is the current display mode of the parent `NavigationView`, if any, and define the page transitions accordingly. + +For top mode, the horizontal page transition is used. For the others, drill in page transition is used. + +You can also supply a builder function to create the pages instead of a list of widgets. For this use the `NavigationBody.builder` constructor. + +```dart +int _currentIndex = 0; + +NavigationView( + ..., + content: NavigationBody(index: _currentIndex, children: [...]), +) +``` + +You can use `NavigationBody.builder` + +```dart +NavigationView( + ..., + content: NavigationBody.builder( + index: _currentIndex, + itemBuilder: (context, index) { + return ...; + } + ) +) +``` + +`ScaffoldPage` is usually used with the navigation body as its children: + +```dart +NavigationBody( + index: _currentIndex, + children: [ + const ScaffoldPage( + topBar: PageHeader(header: Text('Your Songs')) + ) + ], +) +``` + +### Info Badge + +Badging is a non-intrusive and intuitive way to display notifications or bring focus to an area within an app - whether that be for notifications, indicating new content, or showing an alert. An `InfoBadge` is a small piece of UI that can be added into an app and customized to display a number, icon, or a simple dot. [Learn more](https://docs.microsoft.com/en-us/windows/apps/design/controls/info-badge) + + + +InfoBadge is built into `NavigationView`, but can also be placed as a standalone widget, allowing you to place InfoBadge into any control or piece of UI of your choosing. When you use an `InfoBadge` somewhere other than `NavigationView`, you are responsible for programmatically determining when to show and dismiss the `InfoBadge`, and where to place the `InfoBadge`. + +Here's an example of how to add an info badge to a `PaneItem`: + +```dart +NavigationView( + ..., + pane: NavigationPane( + ... + children: [ + PaneItem( + icon: Icon(FluentIcons.more), + title: const Text('Others'), + infoBadge: const InfoBadge( + source: Text('9'), + ), + ), + ], + ), + ... +) +``` + +Which produces the folllowing effects in the display modes: + +| Open | Compact | Top | +| ---- | ------- | --- | +|  |  |  | + +## Tab View + +The TabView control is a way to display a set of tabs and their respective content. TabViews are useful for displaying several pages (or documents) of content while giving a user the capability to rearrange, open, or close new tabs. [Learn more](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/tab-view) + +Here's an example of how to create a tab view: + +```dart +SizedBox( + height: 600, + child: TabView( + currentIndex: currentIndex, + onChanged: (index) => setState(() => currentIndex = index), + onNewPressed: () { + setState(() => tabs++); + }, + tabs: List.generate(tabs, (index) { + return Tab( + text: Text('Tab $index'), + closeIcon: FluentIcons.chrome_close, + ); + }), + bodies: List.generate( + tabs, + (index) => Container( + color: index.isEven ? Colors.red : Colors.yellow, + ), + ), + ), +), +``` + +The code above produces the following: + + + +## Bottom Navigation + +The bottom navigation displays icons and optional text at the bottom of the screen for switching between different primary destinations in an app. This is commomly used on small screens. [Learn more](https://developer.microsoft.com/pt-br/fluentui#/controls/android/bottomnavigation) + +Here's an example of how to create a bottom navigation: + +```dart +int index = 0; + +ScaffoldPage( + content: NavigationBody(index: index, children: [ + Container(), + Container(), + Container(), + ]), + bottomBar: BottomNavigation( + index: index, + onChanged: (i) => setState(() => index = i), + items: [ + BottomNavigationItem( + icon: Icon(Icons.two_k), + selectedIcon: Icon(Icons.two_k_plus), + title: Text('Both'), + ), + BottomNavigationItem( + icon: Icon(Icons.phone_android_outlined), + selectedIcon: Icon(Icons.phone_android), + title: Text('Android'), + ), + BottomNavigationItem( + icon: Icon(Icons.phone_iphone_outlined), + selectedIcon: Icon(Icons.phone_iphone), + title: Text('iOS'), + ), + ], + ) +) + +``` + +# Inputs + +Inputs are widgets that reacts to user interection. On most of the inputs you can set `onPressed` or `onChanged` to `null` to disable it. + +## Button + +A button gives the user a way to trigger an immediate action. [Learn more](https://docs.microsoft.com/en-us/windows/apps/design/controls/buttons) + +Here's an example of how to create a basic button: + +```dart +Button( + child: Text('Standard XAML button'), + // Set onPressed to null to disable the button + onPressed: () { + print('button pressed'); + } +) +``` + +The code above produces the following: + + + +You can also use some alternative buttons: + +### Filled Button + +This button is identical to the `Button`, but with accent color fill in background + +```dart +FilledButton( + child: Text('FILLED BUTTON'), + onPressed: () { + print('pressed filled button'); + }, +), +``` + +### Icon Button + +This button is used to display an `Icon` as content. It's optmized to show icons. + +```dart +IconButton( + icon: Icon(FluentIcons.add), + onPressed: () { + print('pressed icon button'); + }, +), +``` + +### Outlined Button + + ```dart + OutlinedButton( + child: Text('OUTLINED BUTTON'), + onPressed: () { + print('pressed outlined button'); + }, + ), + ``` + +### Text Button + +```dart +TextButton( + child: Text('TEXT BUTTON'), + onPressed: () { + print('pressed text button'); + }, +), +``` + +## Split Button + +A Split Button has two parts that can be invoked separately. One part behaves like a standard button and invokes an immediate action. The other part invokes a flyout that contains additional options that the user can choose from. [Learn more](https://docs.microsoft.com/en-us/windows/apps/design/controls/buttons#create-a-split-button) + +You can use a `SplitButtonBar` to create a Split Button. It takes two `Button`s in the `buttons` property. You can also customize the button spacing by changing the property `interval` in its theme. + +Here's an example of how to create a split button: + +```dart +const double splitButtonHeight = 25.0; + +SplitButtonBar( + style: SplitButtonThemeData( + interval: 1, // the default value is one + ), + // There need to be at least 2 items in the buttons, and they must be non-null + buttons: [ + SizedBox( + height: splitButtonHeight, + child: Button( + child: Container( + height: 24, + width: 24, + color: FluentTheme.of(context).accentColor, + ), + onPressed: () {}, + ), + ), + IconButton( + icon: const SizedBox( + height: splitButtonHeight, + child: const Icon(FluentIcons.chevron_down, size: 10.0), + ), + onPressed: () {}, + ), + ], +) +``` + +The code above produces the following button: + + + +## Toggle Button + +A button that can be on or off. + +Here's an example of how to create a basic toggle button: + +```dart +bool _value = false; + +ToggleButton( + child: Text('Toggle Button'), + checked: _value, + onChanged: (value) => setState(() => _value = value), +) +``` + +## Checkbox + +A check box is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The control has three selection states: unselected, selected, and indeterminate. Use the indeterminate state when a collection of sub-choices have both unselected and selected states. [Learn more](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/checkbox) + +Here's an example of how to create a checkbox: + +```dart +bool _checked = true; + +Checkbox( + checked: _checked, + onChanged: (value) => setState(() => _checked = value), +) +``` + +#### Handling its states + +| State | Property | Value | +| ------------- | --------- | -------- | +| checked | checked | `true` | +| unchecked | checked | `false` | +| indeterminate | checked | `null` | +| enabled | onChanged | non-null | +| disabled | onChanged | `null` | + + + +## Toggle Switch + +The toggle switch represents a physical switch that allows users to turn things on or off, like a light switch. Use toggle switch controls to present users with two mutually exclusive options (such as on/off), where choosing an option provides immediate results. [Learn more](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/toggles) + +Here's an example of how to create a basic toggle switch: + +```dart +bool _checked = false; + +ToggleSwitch( + checked: _checked, + onChanged: (v) => setState(() => _checked = v), + content: Text(_checked ? 'On' : 'Off'); +) +``` + + + +## Radio Buttons + +Radio buttons, also called option buttons, let users select one option from a collection of two or more mutually exclusive, but related, options. Radio buttons are always used in groups, and each option is represented by one radio button in the group. + +In the default state, no radio button in a RadioButtons group is selected. That is, all radio buttons are cleared. However, once a user has selected a radio button, the user can't deselect the button to restore the group to its initial cleared state. + +The singular behavior of a RadioButtons group distinguishes it from check boxes, which support multi-selection and deselection, or clearing. + +[Learn more](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/radio-button) + +Here's an example of how to create a basic set of radio buttons: + +```dart +int _currentIndex = -1; + +final List