Change title bar color in flutter windows desktop

Question

I am developing a windows desktop application and would like to change the title bar color if possible. for example I would like to go from something like this:

to something like this:

Is it possible using flutter and how to do it? Thanks.

Inoffensive

Answer 1

for this kind of customization, you will need to use the bitsdojo_windows community package, that allows you to customize the appearance of the window

Stylolite

That library is very buggy and crashy fyi. – Luxor

Answer 2

A bit late to the party but you can use window_manager to achieve what you want. In order to hide the title bar, you should use setTitleBarStyle() method before your runApp call, so the user will not see a lag or delay in UI. Here's a minimal example:

import 'package:flutter/material.dart';
import 'package:window_manager/window_manager.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized(); //Must be called
  await windowManager.ensureInitialized(); //Must be called
  //waitUntilReadyToShow ==> Optional method to use, requires modification of native runner - Read docs of the package.
  await windowManager.waitUntilReadyToShow().then((_) async {
    await windowManager.setTitleBarStyle(TitleBarStyle.hidden); //Hiding the titlebar
    await windowManager.setTitle("I don't have a titlebar!"); //We don't have a titlebar, this title appears in Task Manager for example.
    await windowManager.show(); //Finally show app window.
  });
  runApp(const MyApp());
}


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('My Titlebar-less app!'),
        ),
      ),
    );
  }
}

Augite

not working at alll – Wardrobe

@NicholasJela Please let me know "how" it's not working. I will be happy to explain further and edit the answer if needed. – Augite

Title is not displaying due to color Issue – Moeller

github.com/foamify/rounded_corner_example/blob/main/lib/… For anyone in the future take a look at this github repository – Gemperle

Answer 3

you can use window_manager

import 'package:flutter/material.dart';
import 'package:window_manager/window_manager.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await windowManager.ensureInitialized();

  WindowOptions windowOptions = const WindowOptions(
    size: Size(800, 600),
    center: true,
    backgroundColor: Colors.transparent,
    skipTaskbar: false,
    titleBarStyle: TitleBarStyle.hidden,
  );
  windowManager.waitUntilReadyToShow(windowOptions, () async {
    await windowManager.focus();
  });
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: const Size(double.maxFinite, 50),
          child: DragToMoveArea(
            child: AppBar(
              backgroundColor: Colors.green,
              actions: [
                IconButton(
                  onPressed: () => windowManager.minimize(),
                  icon: const Icon(Icons.minimize),
                ),
                IconButton(
                  onPressed: () => windowManager.maximize(),
                  icon: const Icon(Icons.maximize),
                ),
                IconButton(
                  onPressed: () => windowManager.close(),
                  icon: const Icon(Icons.close),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

Animatism