Flutter web: The simple steps to make it responsive to other devices

Flutter has currently been taking a huge step on the scene of mobile app development. An open-source web framework created by Google, Flutter has taken the internet world by storm due to its endless benefits. Flutter framework has several benefits and one of the major benefits include its responsiveness. Cross-platform development is the key point in Flutter web development.

Responsive Flutter web tutorial
Responsive Flutter web tutorial

Nonetheless, it is quite stable and the plugin support for Flutter web is also improving fast. So if you haven’t yet had a chance to check it out, this is the perfect time to hop on and give it a try. So now, we – ArrowHiTech would like to introduce to you guys some of the basic steps on how to make Flutter web much more responsive on multiple devices. We believe that after reading this article, you will have enough knowledge of Flutter web development.

Let’s go!

Step #1. Enable web and desktop development

In order to enable web development, you must first be on Flutter’s beta channel. There are two ways to get to that point:

  • Install Flutter directly on the beta channel by downloading the appropriate latest beta version from the SDK archive.
  • If you already have Flutter installed, switch to the beta channel with $ flutter channel beta. Then perform the switch itself by updating your Flutter version with $ flutter upgrade.

After that, you can run this:

$ flutter config --enable-web

To enable support for desktop development, you need to switch to the master release channel. This can be done by following the same steps outlined earlier for the beta channel. Then, run the following by replacing <OS_NAME> with either Linux, windows, or macos:

$ flutter config --enable-<OS_NAME>-desktop

Step #2. Running and building flutter web apps

Flutter web support isn’t bad at all, and this is reflected in the ease of development for the web. If you have installed Chrome but it’s not showing up, you need to set the CHROME_EXECUTABLE environment variable to the path to the Chrome executable file.

First thing first, we need to run this code:

$ flutter devices

After that, it should show right away an entry for something like this:

Web Server • web-server • web-javascript • Flutter Tools

Moreover, when you try to run on the Chrome server, it will definitely cause Flutter to show an entry for it as well. Running flutter run on a compatible Flutter project when the only “connected device” showing up is the web server will cause Flutter to start a web server on localhost:<RANDOM_PORT>. This will allow you to access your Flutter web app from any browser.

Step #3. Running and building flutter on desktop apps

After you’ve enabled Flutter desktop support, you can run a Flutter app natively on your development workstation with flutter run -d <OS_NAME>, replacing <OS_NAME> with the same value you used when enabling desktop support. You can also build binaries in the build directory with flutter build <OS_NAME>.

Running and building in desktop apps
Running and building in desktop apps

Moreover, before you can do any of that, though, you need to have a directory containing what Flutter needs to build for your platform. This will be created automatically when you create a new project, but you’ll need to create it for an existing project with flutter create.

Step #4. Check the compatibility on-spot

To make this point absolutely clear to everyone and avoid misunderstanding, note that a Flutter plugin is a particular Flutter package that contains platform-specific code that is necessary for it to provide its features. For example, you can use the Google-developed url_launcher package as much as you want.

Check the compability of Flutter web on-spot
Check the compability on-spot

For example, you can use the shared_preferences package, which relies on HTML localStorage on the web. Similar caveats are valid regarding desktop platforms: Very few plugins are compatible with desktop platforms, and, as this is a recurring theme, much more work on this needs to be done on the desktop side than is really necessary on Flutter for the web.

Step #5. Create responsive layouts in Flutter web

There are two ways to do this:

One way is to take the information from the MediaQueryData of the MediaQuery root InheritedWidget, which has to exist in the widget tree in order for a Flutter app to work, which you can get, just like any other InheritedWidget, with MediaQuery.of(context), which has a size property, which therefore has two width and height properties of the type double.

Create layouts for web

The other way is to use a LayoutBuilder, which is a builder widget that passes to the builder function a BoxConstraints object that has minHeight, maxHeight, minWidth, and maxWidth properties.

Final words

That should be it! Here are the simple steps on how to make Flutter web more responsive than ever before. All in all, Flutter is a lovely framework, and very easy to use. Also, its extreme cross-platform support only makes it more essential to learn and start using. So, you should start using this platform on website development as soon as possible. That way, your business can be much more flourished and your reputation will skyrocketed.

We – ArrowHiTech is proud to be one of the most well-established outsourcing companies all around the world. With over 12 years of experience, we can provide the best Mobile Application and Web Application Development Services for your eCommerce business.

Vietnam Software Outsourcing Company | ArrowHiTech Jsc
ArrowHiTech services

If you have any questions, don’t hesitate to contact us now