Flutter Web and Desktop

Believe it or not, Flutter originally started as a fork of Chrome with a simple question — how fast can the web run if you don’t worry about maintaining over 20 years of technical debt? The answer to that question is the blazingly fast mobile framework that we love.

Since Flutter 2.0, developers can create mobile, web, and desktop apps; this means that you can create apps that work on iOS, Android, the web, Windows, macOS, Linux, or embedded devices with the same code base.

While you could use exactly the same design and code for all operating systems and devices, there are cases where this might not be the optimal approach: an app screen designed for a smartphone might not be ideal for a large desktop, and not all packages are compatible with all systems. Also, setting up permissions depends on the target destination of your app.

When creating a desktop app, you need to develop in the same platform as your target app: you...

Creating a responsive app leveraging Flutter Web

Running a web app with Flutter might be as simple as running the flutter run -d chrome command on your Terminal. In fact, most of the apps you create with Flutter may also run on the web without any change, but some plugins might only work for specific platforms, and you may need to adjust the UI for larger screens.

In this recipe, you will see how to make your layout responsive, building your app so that it can later be published to any web server. You will also see how to solve a Cross-Origin Resource Sharing (CORS) issue when loading images.

You will build an app that retrieves data from the Google Books API and shows text and images. After running it on your mobile emulator or device, you will then make it responsive so that when the screen is large, the books will be shown in two columns instead of one.

Getting ready

There are no specific requirements for this recipe, but in order to debug your Flutter apps for...

Running your app on macOS

You can compile Flutter projects to native macOS, Windows, and Linux apps.

In this recipe, you will see how to run your app on a Mac, and solve a specific permission issue that prevents your code from retrieving data from the web.

Getting ready

Before following this recipe, you should have completed the app in the previous recipe, Creating a responsive app leveraging Flutter Web.

In order to develop for macOS with Flutter, you should also have Xcode and CocoaPods installed on your Mac, as described in Chapter 1, Getting Started with Flutter.

How to do it...

In order to run the app you have built on your Mac, implement the following steps:

1. In a Terminal window, run this command:

    flutter devices
   

2. In the list of devices returned by the command, make sure that macOS (desktop) now shows among the available devices.
3. From your editor, choose macOS as your target and run the app, or in the Terminal...

Running your app on Windows

Most desktop computers run on Windows, and that’s a fact. Being able to deploy an app built with Flutter to the most widespread desktop operating system is a huge add-on to the Flutter framework.

In this recipe, you will see how to run your apps on Windows.

Getting ready

Before following this recipe, you should have completed the app in the first recipe in this chapter, Creating a responsive app leveraging Flutter Web.

In order to develop for Windows with Flutter, you should also have the full version of Visual Studio (this is not Visual Studio Code) with the Desktop Development with C++ workload installed on your Windows PC.

You can download Visual Studio for free at https://visualstudio.microsoft.com.

Visual Studio is a full-featured integrated development environment (IDE), mainly designed for development using the .NET framework and other languages like C++, Python, and more.

Visual Studio Code is a lightweight...

Deploying a Flutter website

Once you build your Flutter app for the web, you can deploy it to any web server. One of your options is using Firebase as your hosting platform.

In this recipe, you will deploy your project as a website to Firebase.

Getting ready

Before following this recipe, you should have completed the first recipe in this chapter, Creating a responsive app leveraging Flutter Web.

How to do it...

In order to deploy your web app to the Firebase hosting platform, please take the following steps:

1. Open a Terminal window and move it to your project folder.
2. Type the following command:

    flutter build web --web-renderer html
   

3. Open your browser and go to the Firebase console at this address: https://console.firebase.google.com/u/0/.
4. Create a new Firebase project (you can also use an existing one).

   For a refresher on Firebase projects, see the Configuring a Firebase app recipe in Chapter 13, Using Firebase...

Responding to mouse events in Flutter Desktop

While, with mobile devices, users generally interact with your apps through touch gestures, with bigger devices, they may use a mouse, and from a developer perspective, mouse input is different from touch.

In this recipe, you will learn how to respond to common mouse gestures such as click and right-click. In particular, you will make the user select and deselect items in a GridView, and change the color of the background to give some feedback to your users.

Getting ready

Before following this recipe, you should have completed the first recipe in this chapter, Creating a responsive app leveraging Flutter Web.

How to do it…

In order to respond to mouse gestures within your app, please follow these steps:

1. Open the book_list_screen.dart file in your project.
2. At the top of the _BookListScreenState class, add a new Color list, called bgColors, and set it to an empty List:

    List<Color>...

Interacting with desktop menus

Desktop apps have menus that do not exist on mobile form factors. Typically, you expect to see the important actions of a desktop app in its top menu.

In this recipe, you will learn how to add a menu that works on Windows and macOS.

Getting ready

Before following this recipe, you should have completed the first recipe in this chapter, Creating a responsive app leveraging Flutter Web.

Depending on where you want to run your app, you should also have completed one of the previous recipes in this chapter:

• For Windows: Running your app on Windows
• For macOS: Running your app on macOS

How to do it...

In order to add a menu to your desktop app, follow the next steps:

1. In your project, add the dependency to the menu_bar package by typing in your Terminal:

   flutter pub add menu_bar
   

2. At the top of the book_list_screen.dart file, add the menubar import, and hide MenuBar from the material...

Summary

The focus of this chapter has been on developing and running apps on web and desktop devices, and creating responsive apps based on screen size.

First, you explored how to create responsive apps using Flutter Web. You also saw how to deploy a Flutter website leveraging Firebase hosting.

You saw how to run apps on macOS and Windows devices, and learned how to respond to mouse events in Flutter Desktop, such as right-clicks. Lastly, you saw how to create and interact with desktop menus.

Now you should know how to develop and run your apps on web and desktop devices, and create responsive apps based on the screen size where the app is running. Flutter capabilities go beyond mobile devices, and understanding how to target web and desktop devices may become a great asset in your toolbox.

Join us on Discord 

Read this book alongside other app developers.

Ask questions, participate in challenges, provide solutions to other readers, network and much...