About an error over overflow after hidden SystemTitleBar

[ilgnefz]

If we hide the system title bar

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

  await windowManager.ensureInitialized();

  windowManager.waitUntilReadyToShow().then((_) async {
    await windowManager.setTitle('Hello World');
    await windowManager.setTitleBarStyle(TitleBarStyle.hidden,
        windowButtonVisibility: false);
    // windowManager.center();
    await windowManager.maximize();
    await windowManager.setMinimumSize(const Size(800, 800));
    await windowManager.show();
    await windowManager.setSkipTaskbar(false);
  });
  runApp(const MyApp());
}

and create your own, we usually use Column

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:  HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: const [
          // DragToMoveArea(child: Container(height: 20.8, color: Colors.red)),
          AppTitleBar(),
          Expanded(child: Center(child: Text('Hello World'))),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return DragToMoveArea(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: const [
          Spacer(),
          SizedBox(
            width: 138,
            height: 50 - 29.2,
            child: WindowCaption(),
          )
        ],
      ),
    );
  }
}

If we do not set the height of the first child element to 20.8, we will have a bottom overflow error
If we don't set the width of WindowCaption to 138, we will have a right overflow error
Why is this? Since I tried bitsdojo_window, I didn't have this problem

[damywise]

Have you tried looking what's inside the WindowCaption widget itself? I recommend using it as-is and don't wrap it in anything. Or, make your own custom widget with it as a reference.
To answer your question, though, the WindowCaptionButton widget has a minimum width of 46. 46 times 3 is 138.
As for the height, I tried your code, but I don't see it having any problem. It doesn't have a minimum height whatsoever, but it does have a maximum height (can't be bigger than the app).

[ilgnefz]

Have you tried looking what's inside the WindowCaption widget itself? I recommend using it as-is and don't wrap it in anything. Or, make your own custom widget with it as a reference. To answer your question, though, the WindowCaptionButton widget has a minimum width of 46. 46 times 3 is 138. As for the height, I tried your code, but I don't see it having any problem. It doesn't have a minimum height whatsoever, but it does have a maximum height (can't be bigger than the app).

If I don't use SizedBox package WindowCaption, and use WindowCaptionButton. like this:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: const [
          DragToMoveArea(
            child: Row(
              children: [
                Expanded(child: SizedBox()),
                WindowCaptionButton.minimize(),
                WindowCaptionButton.maximize(),
                WindowCaptionButton.close(),
              ],
            ),
          ),
          Expanded(child: Center(child: Text('Hello World'))),
        ],
      ),
    );
  }
}

I will go to an overflow error. it's about height. If I set it a height of 50

DragToMoveArea(
  child: SizedBox(
    height: 50,
    child: Row(
      children: [
        const Expanded(child: SizedBox()),
        WindowCaptionButton.minimize(),
        WindowCaptionButton.maximize(),
        WindowCaptionButton.close(),
      ],
    ),
  ),
),

As a result, its height can only be set to 20.8.
But I want to customize a title bar with a height of 50. What should I do?

[yhsj0919]

After using 'windowManager.setTitleBarStyle', the window size has changed when the window is minimized.

Changing the window size also has the same overflow error

[damywise]

I probably should have done this from the start, but I have corrected your code (I have tested it, and it works on my machine):

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

  await windowManager.ensureInitialized();

  windowManager.waitUntilReadyToShow().then((_) async {
    await windowManager.setTitle('Hello World');
    await windowManager.setTitleBarStyle(TitleBarStyle.hidden,
        windowButtonVisibility: false);
    // windowManager.center();
    await windowManager.maximize();
    await windowManager.setMinimumSize(const Size(800, 800));
    await windowManager.show();
    await windowManager.setSkipTaskbar(false);
  });
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: const [
          AppTitleBar(),
          Expanded(child: Center(child: Text('Hello World'))),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width,
      height: 50,
      child: FutureBuilder(
        future: windowManager.isMaximized(),
        builder: (context, AsyncSnapshot<bool> snapshot) =>
        DragToResizeArea(
          enableResizeEdges: snapshot.data == true ? [] : [
            ResizeEdge.topLeft,
            ResizeEdge.top,
            ResizeEdge.topRight,
          ],
          child: WindowCaption(),
        ),
      ),
    );
  }
}

[ilgnefz]

@damywise Sorry, blame me for not expressing clearly. The overflow error is triggered when the page (application) is hidden by the minimize button and clicking on the taskbar icon.😥

[damywise]

Well, that's probably a problem in the internal, then.

[rmill777]

I have the same issue

[ilgnefz]

@rmill777 Try bitsdojo_window, not have this problem

[rmill777]

@rmill777 Try bitsdojo_window, not have this problem

Don’t like that package. For me on windows, the maximize and minimize buttons have a horrible click to action delay

[ilgnefz]

@rmill777 Two mixed use