Flutter Web: Problems, Solutions, and My Conclusion

My thoughts building my first web page using Flutter

https://flutter.dev/multi-platform/web

Url — Query Parameters (and Leading Hash)

import 'package:flutter/material.dart';

class CustomPageRoute<T> extends MaterialPageRoute<T> {
CustomPageRoute({required Widget page, required String routeName})
: super(builder: (BuildContext context) => page, settings: RouteSettings(name: routeName));

@override
Widget buildTransitions(BuildContext context, _, __, Widget child) {
return child;
}
}
onGenerateRoute: (RouteSettings route) {
/// for when page is pushed using Navigator
if (route.name == "/") {
return CustomPageRoute(page: HomePage(contactUsType: _contactUsType), routeName: HomePage.routeName);
}
if (route.name == StoresPage.routeName) {
final int _pageIndex = route.arguments as int;
return CustomPageRoute(page: StoresPage(isPushed: true), routeName: "/stores?page=${_pageIndex.toString()}");
}
if (route.name == StoreDetailPage.routeName) {
final String _storeId = route.arguments as String;
return CustomPageRoute(page: const StoreDetailPage(), routeName: "/stores?store_id=$_storeId");
}

/// for when page is refreshed and there is a query variable (if no variable, this part is not needed)
if (Uri.base.hasQuery) {
final String? _pageIndex = Uri.base.queryParameters["page"];
final String? _storeId = Uri.base.queryParameters["store_id"];
if (_pageIndex != null) return CustomPageRoute(page: StoresPage(), routeName: "/stores?page=$_pageIndex");
if (_storeId != null) return CustomPageRoute(page: StoreDetailPage(), routeName: "/stores?store_id=$_storeId");
}
return CustomPageRoute(page: const HomePage(), routeName: HomePage.routeName);
},
),
await Navigator.of(context).pushNamed(StoreDetailPage.routeName, arguments: _stores[index].storeId);

How to Run Flutter Web on Mobile Browser?

flutter run -d web-server --web-port 1234 --web-hostname <your_ip_address> --web-renderer canvaskit
http://<ip_address>:1234
ifconfig

How to Know What the “Platform” is?

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
static const routeName = "/";

@override
Widget build(BuildContext context) {
return defaultTargetPlatform == TargetPlatform.iOS || defaultTargetPlatform == TargetPlatform.android
? const HomeMobile()
: const HomeWeb();
}
}

How to Change Title & Favicon Icon

<link rel="shortcut icon" type="image/png" href="icons/your-icon-name.jpg" />

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store