Flutter desktop - custom window title bar, minimize, maximize, close buttons on Windows

Creating a new Windows app with  Flutter you want it to look awesome  You want a great design that your users will love  Maybe you start checking places  like Dribbble for design inspiration  Let's say you found this design on Dribbble  and want to implement it using Flutter  You start coding, run the  app and it looks like this  But something doesn't feel right What is that thing?  It is this bar on the top right here You probably don't want that  If you look again at designs you found on Dribbble  you will see they all have something in common  They don't show the standard Windows  title bar so you want to get rid of that  Moreover, if you look at popular apps like Spotify  Slack Facebook Messenger  Visual Studio Code you will see they don't show the standard   Windows title bar they have a custom one And that's what we'll do today  We will see how we can hide the standard  title bar and display our own using Flutter  Alright let's get started Hi everyone  I'm Bit When looking for a way to do this I   first went online and tried to find an existing  solution, but I could not find anything helpful  The reason why I'm making this video is  because I had to spend some time trying   to figure this out and I don't want you  to spend the time trying to do the same  In the end I created a package to help with this  I called it bitsdojo_window and it is  the package we will use in this tutorial Let's create a simple app using flutter create  and then in VS Code we will make some changes First go to lib\main.dart  delete all the lines in this  file and replace it with this  As you can see we have a simple  MaterialApp with a Scaffold and a Container  Now remember we want to build this Our window has two parts:   a left part and a right part We want to place those horizontally   so we will use a Row for that That Row will have two children:   a LeftSide widget and a RightSide widget Now let's create those widgets  For the LeftSide widget we will use a SizedBox  with a width of 200 while the RightSide widget   uses an Expanded to fill the rest of the window Next we specify a color for the LeftSide widget  Going to the RightSide widget we want  to use a gradient for the background  Next we want to have a top area that  contains the title bar and the minimize   maximize and close buttons so we will use a Column  We want the top area to be as  tall as a typical window title   bar Normally we would use a SizedBox for this but what height should we specify for the SizedBox?  I created a widget in the package to help  with this: the WindowTitleBarBox widget  To use this widget we will have  to add the package to our app   First we will add the package in pubspec.yaml  Then we'll go to lib\main.dart  and import the package Now let's go back to the RightSide widget  and add the WindowTitleBarBox widget Inside this WindowTitleBarBox we will  have the title bar and the buttons  The title bar area will expand  to fit the available width   and then we will have the window buttons We will use a Row for this Now let's create the WindowButtons widget We will also use a Row for this  The package comes with some widgets we can use: MinimizeWindowButton  MaximizeWindowButton and CloseWindowButton  Now if we run our app you can see we have those  three buttons that do what you expect them to do If we want the buttons to have  some colors that match our design   we can specify this and then  set those colors on our buttons Now we want to be able to move our window  Coming back to this Row we need to replace that  Container with a widget that will move the window  Fortunately we have a widget in the  package that can help us with that  It is the MoveWindow widget So let's replace our code with this  We can now move the window  but one thing is missing  We cannot move the window if  we use the top area on the left   In order to fix this we will  go back to the LeftSide widget  We will do the same as we  did for the RightSide widget:  add a Column as a child of our Container and the  WindowTitleBarBox that will represent the top area  Finally we will give the WindowTitleBarBox  a child MoveWindow widget  If we run the app again we can now move the  window using both the right side and the left side  Finally let's do what we wanted  to do in the first place:   remove the standard window title bar Let's go to windows\runner\main.cpp  At the beginning of this file  we will add these two lines:  We will save the file, go back to  main.dart and run the application  and.... Great!  We have removed the standard window title bar! Now we have our own custom title bar but...   let's see We have no border!  What if we want to add a border?  Well... there's no problem,  we can add it with Flutter Let's go to main.dart and  check the body of our Scaffold  The only thing we need to do is to wrap  that Row inside a WindowBorder widget   and set the color and the width for the border Now we have a border! Sometimes you might want to set  a custom size for your window  You probably want to do this  when the application is starting  So how do we do this? Let's go to the main function in main.dart   and after the runApp(myApp()) line let's add this: If we now start our app then we will  see our window has the size we wanted  However, if we try to resize the window and  make it small we will notice something like this  You probably don't want this to happen so what can we do about it?  Well, we can set a minimum size for the  window so let's modify our code to do this  If we run our app again you will see that we   can no longer make the window  smaller than the initial size There is one more thing we need  to take care of for this app  If you try to run the app again you will  notice a flicker when the app starts  This happens because the  window has an initial size   set by Flutter and that size is different  than the size we set in main.dart  So you first see the window with  the initial size and then with the   manual size we specified in main.dart and that is why you see that flicker So what can we do about it? We'll go back to  windows\runner\main.cpp Now at the end of this line we will add this:  This will make sure that our window is  hidden when the application is starting   and will only show up when we want it to Now let's save this file   and go back to lib\main.dart There is one more thing that we need to do here  We will need to show the  window inside doWhenWindowReady  We need to call appWindow.show() because  otherwise our window will be hidden  If we now run our app we'll  see the flicker is gone  That's great! Okay there is   one last thing we would like to change If you move the mouse over our app icon   you will see this: We would like to replace the   text saying sample_app with something else. So, how can we do it?  Going back to doWhenWindowReady  let's add this line  If we run the app again and move the mouse  over our app icon we'll see our custom title And.. that's it! You did it!  You now have a custom window for your Flutter app! I want to congratulate you for following   the tutorial so far. That's absolutely great!

Channel: Bits Dojo

Views: 65,057

Keywords: flutter, flutter desktop, windows, custom window, custom titlebar, custom minimize button, custom maximize button, custom close button, custom window skin, yt:cc=on

Id: bee2AHQpGK4

Length: 9min 31sec (571 seconds)

Published: Sat Nov 28 2020