Repository: flutter
Issue: Title Bar widget & Buttons for Window - for Desktop Platforms
Labels: c: new feature,c: proposal,a: desktop,P3,team-framework,triaged-framework

## Use case - Problem and Alternative

**Problem**: The default window of flutter adapts the native window of the host operating system. The problem with using the default os window is the title bar, which has the same appearance across all themes of the flutter application. Especially since flutter promotes Material Design principles in its application, which is not native to any Desktop OS platforms, the need for a custom window Title Bar is high. For any application for the desktop built using flutter, title bar is the only thing standing out after the app design and UI is implemented.

**Alternative**: Currently, the only alternative that provides a similar functionality is the _BitsDojo Window_ package at https://pub.dev/packages/bitsdojo_window. However, this package is only available for the windows platform and is also not highly customizable.

## Proposal

Flutter providing this functionality natively will welcome a lot of developers to desktop development with Flutter. A title bar is not useless feature for a desktop application. Flutter native support will help in ensuring that there aren't any security issues. It will also help in extending this functionality to enable left click menus for the title bar, enable popup alert message when the user clicks the close button. In short the advantages are endless. Native support will also help in providing this feature in all desktop platforms.

**Best Way**: Provide all of the below functionalities.

###  1 - Title Bar with Buttons
<details>
<summary>Title Bar with Buttons - Code Sample</summary>

```
disableDefaultTitleBar: true;
...
...
TitleBar(
  head: Text(
    'flutter app',
    style: TextStyle(
      color: Colors.black27,
      fontFamily: 'Quicksand',
      fontWeight: FontWeight.bold,
      fontSize: 30,
    ),
  ),
  headPlacement: Alignment.left,
  child: TextField(
    decoration: InputDecoration(
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(
          width: 1.0,
          color: Colors.grey,
          style: BorderStyle.solid
        ),
        borderRadius: BorderRadius.circular(10),
      ),
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          width: 1.0,
          color: Colors.black45,
          style: BorderStyle.solid,
        ),
        borderRadius: BorderRadius.circular(10),
      ),
      hintText: '',
    ),
  ),
  childPlacement: Alignment.center,
  tail: <TitleBarButtons>[
    TitleBarButtons.minimize(
      color: Colors.blue,
      icon: Icons.minimize_rounded,
      backgroundColor: Colors.transparent,
      focusedColor: Colors.grey,
      highlightColor: Colors.black87,
    ),
    TitleBarButtons.maximize(
      color: Colors.blue,
      icon: Icons.maximize_rounded,
      backgroundColor: Colors.transparent,
      focusedColor: Colors.grey,
      highlightColor: Colors.black87,
    ),
    TitleBarButtons.close(
      color: Colors.blue,
      icon: Icons.close_rounded,
      backgroundColor: Colors.transparent,
      focusedColor: Colors.grey,
      highlightColor: Colors.black87,
    ),
  ],
  tailPlacement: Alignment.right,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10)
    borderSide: BorderSide(
      width: 3.0,
      color: Colors.grey,
      style: BorderStyle.solid,
    )
  ),
),
```

</details>

Add a Title Bar widget that when included in the desktop application, replaces the default OS title bar. The user should be able to drag the portion of the title bar without the buttons to move the window around. Also, for diversity and expanded functionality, add a Vertical property to display the title bar vertically. Add a child property so as to include text and icons to the title bar and possibly a menu and other widgets. Making it customizable is the best way to ensure increased usage and consistency with default design principles of flutter.
![Title Bar Image Demo](https://raw.githubusercontent.com/AldrinMathew/issues/main/FR-1-FlutterTitleBar/titlebar.svg)

### 2 - Individual Buttons
<details>
<summary>Individual Buttons - Code Sample</summary>

```
disableDefaultTitlebar: true;
...
...

Container(
  padding: EdgeInsets.symmetric(horizontal: 100, vertical: 20),
  child: Row(
    children: [
      WindowMinimizeButton(
        color: Color.fromRGBO(240, 240, 240, 1),
        icon: Icons.minimize_rounded,
        backgroundColor: Color.fromRGBO(100, 100, 100, 1),
        focusedColor: Color.fromRGBO(50, 50, 50, 1),
        highlightColor: Colors.black,
        onPressed: () {}, // onPressed property seems dumb here, but I mean it as custom function execution addtional to the window action.
        borderRadius: BorderRadius.circular(20),
      ),
      WindowMaximizeButton(
        color: Color.fromRGBO(240, 240, 240, 1),
        icon: Icons.maximize_rounded,
        backgroundColor: Color.fromRGBO(100, 100, 100, 1),
        focusedColor: Color.fromRGBO(50, 50, 50, 1),
        highlightColor: Colors.black,
        onPressed: () {},
        borderRadius: BorderRadius.circular(20),
      ),
      WindowCloseButton(
        color: Color.fromRGBO(240, 240, 240, 1),
        icon: Icons.close_rounded,
        backgroundColor: Color.fromRGBO(100, 100, 100, 1),
        focusedColor: Color.fromRGBO(50, 50, 50, 1),
        highlightColor: Colors.black,
        onPressed: () {
          showDialog(...);
        },
        borderRadius: BorderRadius.circular(20),
      ),
    ],
  ),
  decoration: BoxDecoration(
    color: Color.fromRGBO(240, 240, 240, 1),
    borderRadius: BorderRadius.circular(40)
  ),
),
```
</details>

Provide option to disable the default title bar and then provide individual widgets for the Close, Maximize/Restore, Minimize buttons. And make it customizable. Add properties that will trigger functions or popup alerts when the user clicks the Close button.
![Title Bar Image Demo](https://raw.githubusercontent.com/AldrinMathew/issues/main/FR-1-FlutterTitleBar/buttons.svg)

### 3 - Function Calls
<details>
<summary>Function Calls - Code Sample</summary>

```
disableDefaultTitleBar: true;
...
...
IconButton(
  icon: Icons.close_rounded,
  onPressed: () {
    // showDialog(...);
    WindowUtility.closeWindow();
  }
),
```
</details>

Provide option to disable the default title bar and then provide functions that can be called when the user clicks on any button or area or on Gesture Detection or anything. This provides the maximum flexibility and makes sure that the functionality can be implemented in custom widgets and UI according to the developer's need.

## Note
This level of app customization will welcome a lot of developers into the flutter desktop ecosystem. It is really a missing feature. There might be previous feature requests for the same feature, I am just forwarding an elaborate approach that gives the developers a lot of options.
Hopefully, Flutter Team can add this functionality to the framework soon.