Flutter Web page address issue

Question

Hello. I created 3 pages. The pages are as follows:

main.dart:

import 'package:flutter/material.dart';
import 'package:fotografci_sitesi/pages/home.dart';
import 'package:fotografci_sitesi/pages/profile.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

void main() {
  setUrlStrategy(PathUrlStrategy());
  runApp(mainApp());
}
class mainApp extends StatefulWidget {
  mainApp({Key? key}) : super(key: key);
  @override
  State<mainApp> createState() => _mainAppState();
}

class _mainAppState extends State<mainApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        homePage.route: (context) => homePage(),
        profile.route: (context) => profile(),
      },
      home: homePage(),
    );
  }
}

pages/home.dart:

import 'package:flutter/material.dart';
import 'package:fotografci_sitesi/pages/profile.dart';

class homePage extends StatefulWidget {
  static const String route = '/home';
  homePage({Key? key}) : super(key: key);
  @override
  State<homePage> createState() => _homePageState();
}

class _homePageState extends State<homePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: 'Ana ',
      home: Scaffold(
        appBar: AppBar(
          title: Text("Home"),
        ),
        body: Column(
          children: [
            OutlinedButton(
              child: Text("Profile"),
              onPressed: () {
                Navigator.of(context).pushNamed(profile.route);
              },
            ),
          ],
        ),
      ),
    );
  }
}

pages/profile.dart:

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

class profile extends StatefulWidget {
  static const String route = '/profile';
  profile({Key? key}) : super(key: key);
  @override
  State<profile> createState() => _profileState();
}

class _profileState extends State<profile> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/profile',
      home: Scaffold(
        appBar: AppBar(
          title: Text("Profile"),
        ),
        body: Center(
          child: Text("Profile"),
        ),
      ),
    );
  }
}

If you look at the codes, I tried to set up a URL system. I want to set up a URL system like this:

• If it is entered to example.com, I want it to be redirected to homePage via main.dart.
• If I enter example.com/home, I want it to be redirected to homePage.
• If it is entered in example.com/profile, I want it to be redirected to profile.

Actually, I did what I wanted, but there is a problem. For example, when I enter example.com/profile, the URL in the address bar changes to example.com/. So it goes to the profile in the URL.

How can I solve this problem?

Sorry if I confused you. I think you understand my problem. Thanks in advance for your help.

Answer 1

Well, I notice you use both initialRoute and home property in the Material app (NB* ONLY USE ONE!!!). Try removing the home property and using only initialRoute. Also as a rule when you use forward slash as an initalRoute use '/' do not use something like '/profile'. compare with code below ...

MaterialApp(
  
  initialRoute: '/',
  routes: {
    '/': (context) => const homepage(),
    '/profile': (context) => const profile(),
   
  },
)