Flutter Web Application Development with and setting the path url strategy

Web Application Development with Flutter 

Flutter 2.0 is now live and the creation of the web application using Flutter is now fully supported. In this blog post, we are going to create a web application using Flutter and Navigator 2.0.

Create Web Application Project 

For creating the web application using you need to install  2.0 or a later version of the Flutter. You check the version of the dart and Flutter using the below command.

flutter --version

Flutter 2.0.6 • channel stable • https://github.com/flutter/flutter.git

Framework • revision 1d9032c7e1 (2 weeks ago) • 2021-04-29 17:37:58 -0700

Engine • revision 05e680e202

Tools • Dart 2.12.3

You can follow the steps mention on flutter.dev getting started page to configure the web application. For this post, I am going to create a simple web application that will show the route name in the browser as we change the view in the apps. Let's give the project a name web navigator demo.

Step1:- Create a Web Application using Android Studio

Open the Android Studio and tab on File -> New Flutter Project It will open the below Window as per the latest android studio version 4.2.1

Choose Flutter App and tab on next:-

If you want to create only for the Web then untick the Android and iOS option in the above window and give the name to project and tab on Finish. It will create a project with basic code in it.

For testing the web application just select the browser and tab on run, first time it will take some time to complete the compilation and then launch the application in the separate Chrome tab.

How to remove the # in the Url of the web application in Flutter

For removing the # from the URL pattern we have two options.

Option 1:  Configure the URL strategy as advised in the Flutter document

Add the following in the pubspec.yaml file and set the path into your main.dart file before the runApp().

dependencies:
  flutter:
    sdk: flutter
  flutter_web_plugins:
    sdk: flutter

void main() {
  setUrlStrategy(PathUrlStrategy());
  runApp(MyApp());
}

Option2: If you don't want to use the flutter_web_plugin then add the url_strategy package and add the below code in main.dart file before runApp() like given below.

void main() {
  // Here we set the URL strategy for our web app.
  // It is safe to call this function when running on mobile or desktop as well.
  setPathUrlStrategy();
  runApp(MyApp());
}

Thanks for visiting the page, will continue on this Web application and the next post will share the routing of the web application with Navigator 2.0