How to handle navigation in the flutter package? - flutter

Question

I have created a flutter package (say weight_calculator) and using it from the parent flutter app.
Now I want to navigate from screen A to screen B in weight_calculator package, but I am not able to use the Named routes as this package doesn't have a Material App.
What will be the correct approach to do that?
Currently, I am creating a new MaterialApp inside the package.

Answer 1

This actually works if you use go_route.
Here is an example where u have a app showing a screen from a package, and that package screen is navigating to a screen from the main app.
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:home_page/home_page.dart';
void main() => runApp(const MyApp());
/// The route configuration.
final GoRouter _router = GoRouter(
routes: <RouteBase>[
GoRoute(
path: '/',
builder: (BuildContext context, GoRouterState state) {
return const HomeScreen();
},
routes: <RouteBase>[
GoRoute(
path: 'details',
builder: (BuildContext context, GoRouterState state) {
return const DetailsScreen();
},
),
],
),
],
);
/// The main app.
class MyApp extends StatelessWidget {
/// Constructs a [MyApp]
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: _router,
);
}
}
/// The details screen
class DetailsScreen extends StatelessWidget {
/// Constructs a [DetailsScreen]
const DetailsScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Details Screen')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <ElevatedButton>[
ElevatedButton(
onPressed: () => context.go('/'),
child: const Text('Go back to the Home screen'),
),
],
),
),
);
}
}
and you also just need to make a local package with the HomeScreen widget.
library home_page;
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
/// The home screen
class HomeScreen extends StatelessWidget {
/// Constructs a [HomeScreen]
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Home Screen')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () => context.go('/details'),
child: const Text('Go to the Details screen'),
),
const Text("hello"),
],
),
),
);
}
}
Worked out of the box for me.
Also this can be improved by abstraction the routes, and injecting them in to the package from the main app.