Flutter - onUnknownRoute does not get triggered after using flutter build web - flutter

Question

So, I built a website using flutter web. Everything works fine when I run using flutter run command, the onUnknownRoute gets triggered when I type something in the URL that does not exist. But when I build my project using the flutter build web command, the onUnknownRoute never gets triggered. I have uploaded my project on github pages but onUnknownRoute never gets triggered. I don't even understand what the error could be so, I don't know what exactly should I be posting here as the error-prone code. I shall be delighted if I could get some help. Thank You.
The main.dart
import 'package:flutter/material.dart';
import 'package:app/constants.dart';
import 'package:app/provider/themeProvider.dart';
import 'package:app/provider/themeStyles.dart';
import 'package:app/sections/error404.dart';
import 'package:app/sections/getInTouch/getInTouch.dart';
import 'package:app/sections/mainSection.dart';
import 'package:app/sections/serviceDetails/serviceDetails.dart';
import 'package:app/utils/routeConfiguration.dart';
import 'package:provider/provider.dart';
import 'package:url_strategy/url_strategy.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
setPathUrlStrategy();
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
ThemeProvider _themeProvider = ThemeProvider();
void getCurrentAppTheme() async {
_themeProvider.lightTheme = await _themeProvider.darkThemePref.getTheme();
}
#override
void initState() {
getCurrentAppTheme();
super.initState();
}
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => ThemeProvider()),
],
child: MaterialApp(
debugShowCheckedModeBanner: false,
title: 'App',
theme: ThemeStyles.themeData(_themeProvider.lightTheme, context),
onGenerateRoute: RouteConfiguration.onGenerateRoute,
initialRoute: MainPage.Route,
onUnknownRoute: (settings) {
return CustomPageRoute(
builder: (_) => ErrorPage(),
// ignore: prefer_const_constructors
settings: RouteSettings(name: ErrorPage.Route));
},
),
);
}
}
The routeConfiguration.dart
// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';
import 'package:app/sections/error404.dart';
import 'package:app/sections/mainSection.dart';
import 'package:app/utils/Path.dart';
class RouteConfiguration {
/// List of [Path] to for route matching. When a named route is pushed with
/// [Navigator.pushNamed], the route name is matched with the [Path.pattern]
/// in the list below. As soon as there is a match, the associated builder
/// will be returned. This means that the paths higher up in the list will
/// take priority.
static List<Path> paths = [
Path(
r'^' + ErrorPage.Route + '\$',
(context, match) => ErrorPage(),
),
Path(
r'^' + ErrorPage.Route + '/\$',
(context, match) => ErrorPage(),
),
];
/// The route generator callback used when the app is navigated to a named
/// route. Set it on the [MaterialApp.onGenerateRoute] or
/// [WidgetsApp.onGenerateRoute] to make use of the [paths] for route
/// matching.
static Route<dynamic> onGenerateRoute(RouteSettings settings) {
if (settings.name == "/") {
return CustomPageRoute(
builder: (context) => MainPage(),
settings: settings,
);
}
for (Path path in paths) {
final regExpPattern = RegExp(path.pattern!);
if (regExpPattern.hasMatch(settings.name!)) {
final firstMatch = regExpPattern.firstMatch(settings.name!);
final match = (firstMatch!.groupCount == 1) ? firstMatch.group(1) : null;
return CustomPageRoute(
builder: (context) {
return path.builder(context, match);
},
settings: RouteSettings(name: ErrorPage.Route),
);
}
}
// If no match was found, we let [WidgetsApp.onUnknownRoute] handle it.
return CustomPageRoute(
builder: (_) => ErrorPage(),
settings: RouteSettings(name: ErrorPage.Route));
}
}
class CustomPageRoute extends PageRouteBuilder {
final Widget Function(dynamic)? builder;
final RouteSettings settings;
CustomPageRoute({this.builder, required this.settings})
: super(
pageBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) =>
builder!.call(context),
transitionsBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) =>
FadeTransition(
opacity: animation,
child: ScaleTransition(
scale: Tween<double>(
begin: 0.5,
end: 1.0,
).animate(
CurvedAnimation(
parent: animation,
curve: Curves.fastOutSlowIn,
),
),
child: child,
),
),
settings: settings);
}
the error404.dart
// ignore_for_file: prefer_const_constructors
import 'dart:ui';
import 'package:flutter/rendering.dart';
import 'package:app/animations/glitchAnimation.dart';
import 'package:app/provider/themeProvider.dart';
import 'package:app/sections/mainSection.dart';
import 'package:app/utils/animatedUFO.dart';
import 'package:app/utils/star_field.dart';
import 'package:app/widget/adaptiveText.dart';
import 'package:mouse_parallax/mouse_parallax.dart';
import 'package:provider/provider.dart';
import 'package:seo_renderer/seo_renderer.dart';
import 'package:flutter/material.dart';
import 'package:app/animations/entranceFader.dart';
import 'package:app/sections/navBar/navBarLogo.dart';
class ErrorPage extends StatefulWidget {
static const String Route = "/404";
#override
_ErrorPageState createState() => _ErrorPageState();
}
class _ErrorPageState extends State<ErrorPage>
with SingleTickerProviderStateMixin {
final globalKey = GlobalKey<ScaffoldState>();
ThemeProvider _themeProviders = ThemeProvider();
bool isPressed = false;
bool _isScrollingDown = false;
ScrollController _scrollController = ScrollController();
static const double idleSpeed = .2;
static const int starAnimDurationIn = 4500;
ValueNotifier<double> _speedValue = ValueNotifier(idleSpeed);
late AnimationController _starAnimController;
late Animation<double> _starAnimSequence;
#override
void initState() {
_scrollController = _themeProviders.scroll;
_scrollController.addListener(() {
if (_scrollController.position.userScrollDirection ==
ScrollDirection.reverse) {
if (!_isScrollingDown) {
_isScrollingDown = true;
setState(() {});
}
}
if (_scrollController.position.userScrollDirection ==
ScrollDirection.forward) {
if (_isScrollingDown) {
_isScrollingDown = false;
setState(() {});
}
}
});
_starAnimController = AnimationController(
vsync: this,
duration: Duration(milliseconds: starAnimDurationIn),
reverseDuration: Duration(milliseconds: starAnimDurationIn ~/ 3),
);
_starAnimController.addListener(() {
_speedValue.value = _starAnimSequence.value;
});
//Create an animation sequence that moves our stars back, then forwards, then to rest at 0.
//This will be played each time we load a detail page, to create a flying through space transition effect
_starAnimSequence = TweenSequence([
TweenSequenceItem<double>(
tween: Tween<double>(begin: idleSpeed, end: -2)
.chain(CurveTween(curve: Curves.easeOut)),
weight: 20.0,
),
TweenSequenceItem<double>(
tween: Tween<double>(begin: -2, end: 20)
.chain(CurveTween(curve: Curves.easeOut)),
weight: 30.0,
),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 20, end: 0)
.chain(CurveTween(curve: Curves.easeOut)),
weight: 50.0,
)
]).animate(_starAnimController);
super.initState();
// WidgetsBinding.instance?.addPostFrameCallback((_) {
// if (regExpBots.hasMatch(window.navigator.userAgent.toString()) && (globalKey.currentState != null)) {
// globalKey.currentState.openDrawer();
// }
// });
}
#override
void dispose() {
_scrollController.dispose();
_scrollController.removeListener(() {});
_starAnimController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
final _themeProv = Provider.of<ThemeProvider>(context);
double _height = MediaQuery.of(context).size.height;
int starCount = 400;
return Container(
child: Stack(
children: [
Container(
width: double.maxFinite,
height: double.maxFinite,
child: ImageRenderer(
alt: 'Background Image For Decoration',
link: 'assets/logos/i8.jpg',
child: Image.asset(
'assets/logos/i8.jpg',
fit: BoxFit.cover,
),
),
),
BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 30.0,
sigmaY: 30.0,
),
child: Scaffold(
key: globalKey,
extendBodyBehindAppBar: true,
backgroundColor: _themeProv.lightTheme
? Colors.white
: Colors.black.withOpacity(0.0),
appBar: (MediaQuery.of(context).size.width < 860)
? AppBar(
automaticallyImplyLeading: false,
iconTheme: IconThemeData(
color: _themeProv.lightTheme
? Color(0xff1C1C28)
: Colors.white),
elevation: 0,
backgroundColor: Colors.transparent,
actions: [
GestureDetector(
onTap: () {
Navigator.pushNamedAndRemoveUntil(
context, MainPage.Route, (c) {
return false;
});
},
child: NavBarLogo(),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.05,
)
],
)
: _appBarTabDesktop(_themeProv),
body: Stack(
children: [
ValueListenableBuilder<double>(
valueListenable: _speedValue,
builder: (context, value, child) {
//Scrolling star background
return StarField(starSpeed: value, starCount: starCount);
},
),
Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 27.0),
child: ParallaxStack(
resetOnExit: true,
useLocalPosition: true,
referencePosition: 0.6,
dragCurve: Curves.easeIn,
resetCurve: Curves.bounceOut,
layers: [
ParallaxLayer(
yRotation: 0.80,
xRotation: 0.80,
xOffset: 90,
yOffset: 80,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: TextRenderer(
text: GlithEffect(
child: AdaptiveText(
"404",
style: TextStyle(
fontSize: _height * 0.1,
fontFamily: 'Montserrat',
fontWeight: FontWeight.w900,
color: Colors.white,
),
),
),
),
),
SizedBox(
height: _height * 0.02,
),
TextRenderer(
text: AdaptiveText(
"We searched as far as we could, but were unable to find the page you were looking for.\nSorry.",
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Ubuntu',
fontSize: _height * 0.02,
color: Colors.white,
height: 2.0,
),
),
),
],
),
),
],
),
),
),
],
),
),
),
],
),
);
}
AppBar _appBarTabDesktop(ThemeProvider _themeProv) {
return AppBar(
elevation: 0.0,
backgroundColor:
_themeProv.lightTheme ? Colors.white : Colors.transparent,
automaticallyImplyLeading: false,
centerTitle: false,
title: MediaQuery.of(context).size.width < 780
? EntranceFader(
duration: Duration(milliseconds: 250),
offset: Offset(0, -10),
delay: Duration(seconds: 3),
child: GestureDetector(
onTap: () {
Navigator.pushNamedAndRemoveUntil(context, MainPage.Route,
(c) {
return false;
});
},
child: NavBarLogo(
height: 37.0,
),
))
: EntranceFader(
offset: Offset(0, -10),
duration: Duration(milliseconds: 250),
delay: Duration(milliseconds: 100),
child: GestureDetector(
onTap: () {
Navigator.pushNamedAndRemoveUntil(context, MainPage.Route,
(c) {
return false;
});
},
child: NavBarLogo(
height: MediaQuery.of(context).size.height * 0.065,
),
),
),
);
}
}
Also, I read in some other solution for a custom 404 page for github pages that I need a custom domain for it to work. So, is that what is causing my problem.

Answer 1

You should use Navigator v2 for web. it has more features and makes working with web routes very easy.