This Flutter sample demonstrates how to implement navigation and routing using the go_router API. It covers essential navigation scenarios such as parsing path parameters, handling sign-in redirection, and configuring deep linking for iOS and Android. This sample also includes nested navigation and using the Link widget for seamless user experience.
Table of Contents
Navigation and Routing
This Flutter sample demonstrates how to use the go_router API to handle common navigation scenarios.
Source code
Directory Structure
- android/: Updated for Flutter 3.16
- ios/: Updated for Flutter 3.16
- lib/: Core Flutter code showcasing navigation and routing using
go_router - linux/: Updated for Flutter 3.16
- macos/: Updated in the Flutter beta release
- test/: Contains tests for the navigation and routing sample
- web/: Updated with new bootstrapping logic and minimum SDK requirements
- windows/: Updated for Flutter 3.16
Key Files
- .gitignore: Standard git ignore file, replaced during the sample update
- .metadata: Metadata file for CI configurations
- README.md: Documentation and instructions for the sample
- analysis_options.yaml: Analysis options for the Flutter project
- codelab_rebuild.yaml: Configuration for rebuilding the sample
- pubspec.yaml: Dart package dependencies and configurations
README.md
Navigation and Routing
This sample demonstrates how to use the go_router API to handle common navigation scenarios in Flutter applications.
Goals
- Path Parameters Parsing: Demonstrate how to parse path parameters, such as
'/user/:id'. - Sign-In Redirection: Show how to handle user sign-in and redirection.
- Nested Navigation: Implement nested navigation using
ShellRoute. - Deep Linking Configuration: Configure deep linking for both iOS and Android platforms.
- Using Link Widget: Utilize the
Linkwidget from thepackage:url_launcherwith the Router API.
How to Run
- Clone the Repository:
bash git clone <repository-url> - Navigate to the Project Directory:
bash cd navigation_and_routing - Install Dependencies:
bash flutter pub get - Run the Application:
bash flutter run
For more detailed information, please refer to the go_router documentation.
Source code
Also read:
Best Cross Platform App Development Frameworks
FAQs
How do I get started with this Flutter navigation and routing sample?
To get started, clone the repository, navigate to the project directory, install dependencies using flutter pub get, and then run the application with flutter run.
Join Our Whatsapp Group
Join Telegram group
What is go_router and why is it used in this sample?
go_router is a package that simplifies navigation and routing in Flutter applications. It is used in this sample to demonstrate handling path parameters, sign-in redirection, nested navigation, and deep linking.
How do I configure deep linking for iOS and Android?
Deep linking configuration involves setting up URL schemes and intent filters. This sample provides examples of how to configure these settings in the respective platform directories (android/ and ios/).
What is the Link widget and how is it used?
The Link widget, from the url_launcher package, allows you to create hyperlinks in your Flutter application. In this sample, it is used alongside the Router API to enable navigation via clickable links.
Can I see an example of parsing path parameters?
Yes, this sample includes a demonstration of parsing path parameters, such as extracting the user ID from a URL like /user/:id. Check the implementation in the lib/ directory for details.
How do I handle user sign-in and redirection?
The sample shows how to manage user sign-in and automatically redirect users to the appropriate screen based on their authentication status. This is handled using the go_router configuration.
What are the steps to run this sample on different platforms?
After setting up the project, you can run it on various platforms using flutter run. For platform-specific configurations and dependencies, refer to the android/, ios/, linux/, macos/, web/, and windows/ directories.