Flutter Web Url Route Doesn't Work on Real domain - flutter

I'm trying to use a url where I get a parameter and assign that parameter to a variable inside the web file.
for example my domain is example.com and in this website i need an id for user. I want to make example.com/?id=123 and getting that 123 id and giving a variable 123 value
In flutter web device It works but when i host this files it doesnt work on real domain. And flutter giving me a
Could not navigate to initial route.
The requested route name was: "/?id=sezen#gmail.com"
There was no corresponding route in the app, and therefore the initial route specified will be
ignored and "/" will be used instead.
Here is my code
void main() async {
WidgetsFlutterBinding.ensureInitialized();
setPathUrlStrategy();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}
String myurl = Uri.base.toString(); //get complete url
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// This widget is the root of your application.
#override
void initState() {
super.initState();
getParams();
}
#override
Widget build(BuildContext context) {
getParams();
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'QR Numaratör',
home: MyHomePage(id: mail),
);
}
}
void getParams() {
var uri = Uri.dataFromString(window.location.href);
Map<String, String> params = uri.queryParameters;
var origin = params['id'];
mail = origin;
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.id}) : super(key: key);
String? id = Uri.base.queryParameters["id"];
#override
State<MyHomePage> createState() => _MyHomePageState();
}

In your MaterialApp widget, you need to specify onGenerateRoute parameter.
Something like this:
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'QR Numaratör',
home: MyHomePage(id: mail),
onGenerateRoute: (settings) {
switch (kIsWeb? Uri.parse(settings.name).path : settings.name) {
case'/':
Map args = settings.arguments as Map;
if(kIsWeb && args == null) {
args=Uri.parse(settings.name).queryParameters;
}
return MaterialPageRoute(builder: (_) => MyHomePage(id: args[id]));
}
});

Related

Flutter Web Url Route Error While Passing Query Param [duplicate]

I'm trying to use a url where I get a parameter and assign that parameter to a variable inside the web file.
for example my domain is example.com and in this website i need an id for user. I want to make example.com/?id=123 and getting that 123 id and giving a variable 123 value
In flutter web device It works but when i host this files it doesnt work on real domain. And flutter giving me a
Could not navigate to initial route.
The requested route name was: "/?id=sezen#gmail.com"
There was no corresponding route in the app, and therefore the initial route specified will be
ignored and "/" will be used instead.
Here is my code
void main() async {
WidgetsFlutterBinding.ensureInitialized();
setPathUrlStrategy();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const MyApp());
}
String myurl = Uri.base.toString(); //get complete url
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
// This widget is the root of your application.
#override
void initState() {
super.initState();
getParams();
}
#override
Widget build(BuildContext context) {
getParams();
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'QR Numaratör',
home: MyHomePage(id: mail),
);
}
}
void getParams() {
var uri = Uri.dataFromString(window.location.href);
Map<String, String> params = uri.queryParameters;
var origin = params['id'];
mail = origin;
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.id}) : super(key: key);
String? id = Uri.base.queryParameters["id"];
#override
State<MyHomePage> createState() => _MyHomePageState();
}
In your MaterialApp widget, you need to specify onGenerateRoute parameter.
Something like this:
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'QR Numaratör',
home: MyHomePage(id: mail),
onGenerateRoute: (settings) {
switch (kIsWeb? Uri.parse(settings.name).path : settings.name) {
case'/':
Map args = settings.arguments as Map;
if(kIsWeb && args == null) {
args=Uri.parse(settings.name).queryParameters;
}
return MaterialPageRoute(builder: (_) => MyHomePage(id: args[id]));
}
});

Riverpod is not updating UI widget on state change

main.dart
void main() {
runApp(ProviderScope(child: MyApp()));
}
class MyApp extends ConsumerWidget {
MyApp({Key? key}) : super(key: key);
final _appProvider =
ChangeNotifierProvider<AppProvider>((ref) => AppProvider());
final _profileProvider = ChangeNotifierProvider<ProfileProvider>((ref) {
return ProfileProvider();
});
#override
Widget build(BuildContext context, WidgetRef ref) {
AppProvider appProvider = ref.watch(_appProvider);
ProfileProvider profileManager = ref.watch(_profileProvider);
print(appProvider.appLocale);
}
appProvider.dart
class AppProvider extends ChangeNotifier {
Locale? _appLocale = const Locale('en');
Locale get appLocale => _appLocale ?? const Locale("en");
static const supportedLanguage = [Locale('en', 'US'), Locale('km', 'KH')];
void changeLanguage(Locale type) async {
_appLocale = type;
notifyListeners();
}
}
// when i log value of _appLocale here , I can see the update value based on the state change. but it does not re render UI widgeet.
I fixed it by declaring global provider, remove any deplicated provider, same name, in other files.

Get class reference from routes flutter

Presume I have three classes: main, EndpointList and FillDataClass.
I have defined some routes in my main class as such:
void main() {
runApp(MaterialApp(
title: 'Named Routes Demo',
initialRoute: '/',
routes: {
'/': (context) => MyApp(),
'/endpoint_list': (context) => EndpointList(),
},
));
}
My EndpointList class is a simple list view:
import 'package:flutter/material.dart';
class EndpointData {
EndpointData(this.name, this.id, this.token, this.isIncoming);
final String name;
final String id;
final String token;
bool isIncoming;
}
class EndpointList extends StatefulWidget {
EndpointList({Key key}) : super(key: key);
#override
_EndpointList createState() => new _EndpointList();
}
class _EndpointList extends State<EndpointList> {
List<EndpointData> endpointList = <EndpointData>[];
#override
Widget build(BuildContext context) {
// build and show list
}
void insertEndpoint(EndpointData endpointData){
endpointList.add(endpointData);
}
}
My question is, how can I access and instance of EndpointList, from class that is not main, in order to call the insertEndpoint method?
In my java mind, I want to do this:
Endpoint endpoint = new Endpoint(); // This is done in route in main class
And then from class FillDataClass (presuming endpoint has been properly instanced in FillDataClass via constructor):
endpoint.insertEndpoint(data);
How can I create and access endpoint in order to populate, and then display, my list?
Use a separate the Endpoint class which will contain an insertEndPoint mothed.
class EndpointData {
EndpointData(this.name, this.id, this.token, this.isIncoming);
final String name;
final String id;
final String token;
bool isIncoming;
List<EndpointData> _endpointList = <EndpointData>[];
void insertEndpoint(EndpointData endpointData){
_endpointList.add(endpointData);
}
}
Then in your UI
class EndpointListUI extends StatefulWidget {
EndpointListUI({Key key}) : super(key: key);
#override
_EndpointListUI createState() => new _EndpointListUI();
}
class _EndpointListUI extends State<EndpointListUI> {
//You can create instance from anywhere and insert data to it
List<EndpointData> endpointList = <EndpointData>[];
endpointList.add(endpointData);
#override
Widget build(BuildContext context) {
// build and show list
}
}

keeping repository instance "alive" with bloc

I am still with my first bloc based app, adding features. While previously, I stored some of my page specific data with the bloc class, for the last feature, I now moved most variables into its repository. I already feared that the instance of calling the repository gets lost, afterwards, which now proved true.
Is there a proper, easy way to make the instance persistent?
I know of inherited widgets, however, I have not yet figured out how to implement this and my question around this unfortunately remained unanswered. It would be great, if someone could point me to some direction!
In general, my idea was to have the api dealing with local files and online data, the repository with frequently re-used data (session data, presented data etc) and helper variables within the bloc. So when the UI requests data, the bloc asks the repository which will either return a value stored in a variable or request a value from the api.
This is, how the strucuture basically looks like (hope I have not missed anything significant)
void main() async {
final UserRepository userRepository = UserRepository(); // <===== userRepository initialized
runApp(MyApp(userRepository: UserRepository()));
}
class MyApp extends StatelessWidget {
MyApp({Key key, this.userRepository}) : assert(userRepository != null), super(key: key);
final UserRepository userRepository;
#override
Widget build(BuildContext context) {
return BlocProvider<UserBloc>( <====== userBloc injection to top of widget tree
create: (_) => UserBloc(userRepository: userRepository)..add(AppStarted()),
child: App(),
);
}
}
// =================================================== APP WITH ROUTES
class App extends StatelessWidget {
App({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return CupertinoApp(
routes: {
'/': (_) => HomePage(),
'feature 1': (_) => HomePage(),
},
);
}
}
// =================================================== LANDING PAGE WITH MAIN MENU
class HomePage extends StatefulWidget {
HomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('MathUup'),
),
child: SafeArea(
child: CupertinoButton(
child: Text('Feature 1',
onPressed: () => Navigator.pushNamed(context, 'feature 1'),
),)));
}}
// =================================================== BLOC
class UserBloc extends Bloc<UserEvent, UserState> {
UserBloc({this.userRepository}) : super(AppInitial());
final UserRepository userRepository;
...
final user = await userRepository.getActiveUserData(userId);
final lastSessionData = await userRepository.getLastSession(userId);
...
}
// =================================================== REPOSITORY
class UserRepository {
UserRepository();
final UserApiClient achievementsApiClient = UserApiClient();
final SessionsApiClient sessionsApiClient = SessionsApiClient();
UserSession activeUserSession;
User activeUserData;
Future<String> getLastUserId() async {
final lastUserId = await sessionsApiClient.getLastUserId();
return lastUserId;
}
Future<UserSession> getActiveUser() async {
if (activeUserSession == null) {
activeUserSession = await sessionsApiClient.getLastUser();
}
return activeUserSession;
}
}
This line is creating and initializing your user repository:
final UserRepository userRepository = UserRepository(); // <===== userRepository initialized
However, this line is not passing that repository, it's creating a new repository, ignoring the one you just initialized:
runApp(MyApp(userRepository: UserRepository()));
I think you meant to use the variable you already have:
runApp(MyApp(userRepository: userRepository));

How to pass parameters to flutter web app

After hours of searching about the topic and due to lack of documentation on Flutter Web I am asking this question.
I was trying to create a web app using flutter and had an requirement where URL such as below
website.com/user/someUserCode
would be called and an page will be launched where the data (someUserCode) will be passed to the page
but haven't got any solutions yet to resolve it.
so just rounding it all up,
How to pass and fetch the data using (get / post) methods to flutter web app?
EDIT 1
What all I know / have tried yet
I am using below code to read if some parameters are being to some class file
final Map<String, String> params = Uri.parse(html.window.location.href).queryParameters;
String data = params["userData"];
all this actually solves the Fetch part of my question (maybe)
but the part where that data will be passed to the page via URL is still missing.
EDIT 2
Since I haven't got any replies and was not able to find anything i raised an ticket on Flutter GitHub page here
anyone else looking for the same issue can track it there (if it gets resolve)
May you could do it in a easy way:
import 'dart:html';
import 'package:flutter/material.dart';
import 'home_page.dart';
void getParams() {
var uri = Uri.dataFromString(window.location.href);
Map<String, String> params = uri.queryParameters;
var origin = params['origin'];
var destiny = params['destiny'];
print(origin);
print(destiny);
}
void main() {
getParams();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Your app',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
And then call it from browser:
http://localhost:52695/?origin=pointA&destiny=pointB
Output:
pointA
pointB
I tried the above method from #Mariano Zorrilla but it still opened the pages in order:
/
/user
/user/yFbOfUAwx1OCC93INK8O7VqgBXq2
I have found Fluro, and works efficiently and cleanly you only need to add one routing file and do all the routing in one file rather than editing every page you want to route to, here's how you would implement it:
main.dart
void main() {
FluroRouter.setupRouter();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Website Title',
onGenerateRoute: FluroRouter.router.generator
);
}
}
fluro_router.dart
class FluroRouter {
static Router router = Router();
//Define your routers here
static void setupRouter() {
router.define('/', handler: _homeHandler);
router.define('/login', handler: _loginHandler);
router.define('/online-enquiry/:userId', handler: _userHandler);
}
//Add your handlers here
static Handler _homeHandler = Handler(handlerFunc: (context, Map<String, dynamic> params) => Home());
static Handler _loginHandler = Handler(handlerFunc: (context, Map<String, dynamic> params) => Login());
static Handler _userHandler = Handler(handlerFunc: (context, Map<String, dynamic> params) => UserProfile(userID: params['userId'].first));
}
Source
You can get everything (paths, parameters, etc) from onGenerateRoute. Your Home will be / and everything from there can be grabbed and used to redirect users.
My approach to solve this is the following. Your base App() should be like:
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Website Title',
onGenerateRoute: (settings) => NavigatorRoute.route(settings.name),
);
}
}
and the class NavigatorRoute will be:
class NavigatorRoute extends StatefulWidget {
final String path;
static Route<dynamic> route(String path) {
return SimpleRoute(
name: '', // this one is always empty as you didn't route yet
title: 'Website Title',
builder: (_) => NavigatorRoute(path: path),
animated: false
);
}
const NavigatorRoute({Key key, this.path}) : super(key: key);
#override
_NavigatorRouteState createState() => _NavigatorRouteState();
}
class _NavigatorRouteState extends State<NavigatorRoute> {
#override
void initState() {
super.initState();
Future.microtask(() {
if (widget.path == '/') {
Navigator.of(context).pushAndRemoveUntil(HomeScreen.route(false), (_) => false);
return;
} else if (widget.path == '/user') {
Navigator.of(context).pushAndRemoveUntil(UserScreen.route(false), (_) => false);
return;
} else if (widget.path.contains('/user/')) {
Navigator.of(context).pushAndRemoveUntil(UserScreen.routeCode(widget.path.split('/')[2]), (_) => false);
return;
} else if (widget.path == '/about') {
Navigator.of(context).pushAndRemoveUntil(AboutScreen.route(), (_) => false);
return;
} else {
Navigator.of(context).pushAndRemoveUntil(HomeScreen.route(), (_) => false);
return;
}
});
}
#override
Widget build(BuildContext context) {
return SizedBox();
}
}
The code for the SimpleRoute is:
class SimpleRoute extends PageRoute {
SimpleRoute({#required String name, #required this.title, #required this.builder, #required this.animated})
: super(settings: RouteSettings(name: name));
final String title;
final WidgetBuilder builder;
final bool animated;
#override
Color get barrierColor => null;
#override
String get barrierLabel => null;
#override
bool get maintainState => true;
#override
Duration get transitionDuration => Duration(milliseconds: 200);
#override
Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
return animated
? FadeTransition(
opacity: animation,
child: Title(
title: this.title,
color: Theme.of(context).primaryColor,
child: builder(context),
),
)
: Title(
title: this.title,
color: Theme.of(context).primaryColor,
child: builder(context),
);
}
}
So, finally... if you want to easily open one of your screens, you can do:
class HomeScreen extends StatefulWidget {
static Route<dynamic> route(bool animated) {
return SimpleRoute(name: '/', title: 'Home', builder: (_) => HomeScreen(), animated: animated);
}
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
...
}
The routeCode could be:
static Route<dynamic> routeCode(String id) {
return SimpleRoute(name: '/user/$id', title: 'User', builder: (_) => UserScreen(id: id), animated: false);
}
The main benefit of doing this is avoiding the stack of pages generated by accessing the last screen.
For example, if you're using directly the onGenerateRoute for "www.mywebsite.com/user/userId/edit" then Flutter will open:
Home Screen
User Screen
UserId Screen
Edit Screen
but with this approach, only "Edit Screen" will be open.