Good day, So the main issue with my flutter code is that the initial screen using GoRoute it does not display the scaffolding of the screen but the custom widget (Card). The problem does not persist when you try to press the button to display the sub route on the stack.
Ill show the code snippet I have at the moment and the results when i try to compile them.
#main.dart
import 'package:flutter/material.dart';
import 'package:fridge_meal_planner_app/screen/user_screen.dart';
import 'config/app_router.dart';
//Initial Git Commit
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fridge Meal Planner',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Fridge Planner'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return MaterialApp.router(
theme: ThemeData(
primarySwatch: Colors.blue,
),
routerConfig: router,
);
// return const UserScreen();
}
}
#router widget
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import '../screen/ReceiptGen.dart';
import '../screen/purchaseHistoryChklst.dart';
import '../screen/ref_inventory_list.dart';
import '../screen/user_screen.dart';
final GoRouter router = GoRouter(
debugLogDiagnostics: true,
routes: <GoRoute>[
GoRoute(
path: '/',
name: 'home',
builder: (BuildContext context, GoRouterState state) {
return const UserScreen();
},
routes: [
GoRoute(
path: 'ref_inventory',
name: 'ref_inventory',
builder: (BuildContext context, GoRouterState state) {
return const ref_inventory_list();
},
),
GoRoute(
path: 'recipe_gen_func',
name: 'recipe_gen_func',
builder: (BuildContext context, GoRouterState state) {
return const receiptGen();
},
),
GoRoute(
path: 'purchase_history',
name: 'purchase_history',
builder: (BuildContext context, GoRouterState state) {
return const purchaseHistoryChklst();
},
),
],
),
],
);
// user screen (first screen to be displayed)
import 'package:flutter/material.dart';
import '../class/NewCardValue.dart';
class UserScreen extends StatefulWidget {
const UserScreen({super.key});
@override
State<UserScreen> createState() => _UserScreenState();
}
class _UserScreenState extends State<UserScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('FridgeApp'),
),
body: Column(
children: <Widget>[
const Card(
elevation: 20,
color: Color.fromRGBO(53, 111, 227, 0.4),
child: Padding(
padding: EdgeInsets.all(15.0),
child: NewCardValue(),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
onPressed: () {},
icon: const Icon(
Icons.history,
size: 20,
),
tooltip: 'View Search and activity history',
),
IconButton(
onPressed: () {},
icon: const Icon(
Icons.save,
size: 20,
),
tooltip: 'View List of Save activities',
),
IconButton(
onPressed: () {},
icon: const Icon(
Icons.delete,
size: 20,
),
tooltip: 'Delete an activity/activities',
),
],
),
],
),
);
}
}
#new card widget that is called by UserScreen.dart
// ignore: file_names
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:fridge_meal_planner_app/config/app_router.dart';
import 'package:go_router/go_router.dart';
class NewCardValue extends StatelessWidget {
const NewCardValue({
super.key,
});
// ignore: non_constant_identifier_names
void CheckRefInventory() {
if (kDebugMode) {
print('Checking ref => New Screen for Interaction');
}
}
// ignore: non_constant_identifier_names
void IngredientGenerator() {
if (kDebugMode) {
print('Call API ==> New Screen Food recipe by ingredient');
}
}
// ignore: non_constant_identifier_names
void GroceryHistoryChecklist() {
if (kDebugMode) {
print(
'Grocery history/checklist ==> New Screen to check history and generate grocery list');
}
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 100,
width: 400,
child: Stack(
children: <Widget>[
const Positioned(
top: 10,
left: 10,
child: CircleAvatar(
backgroundColor: Colors.black,
radius: 30,
child: CircleAvatar(
radius: 20,
backgroundImage:
AssetImage('assets/images/default_image.jpeg'),
),
),
),
Positioned(
top: 0,
left: 80,
child: TextButton.icon(
icon: const Icon(
Icons.subscript,
size: 20,
color: Colors.black,
),
//onPressed: () => CheckRefInventory(),
onPressed: () {
return context.go('/ref_inventory');
},
label: const Text(
'Refrigerator Content',
style: TextStyle(color: Colors.black),
),
),
),
Positioned(
top: 30,
left: 80,
child: TextButton.icon(
icon: const Icon(
Icons.subscript,
size: 20,
color: Colors.black,
),
//onPressed: () => IngredientGenerator(),
onPressed: () {
return context.go('/recipe_gen_func');
},
label: const Text(
'Recipe Generator',
style: TextStyle(color: Colors.black),
),
),
),
Positioned(
top: 60,
left: 80,
child: TextButton.icon(
// onPressed: () => GroceryHistoryChecklist(),
onPressed: () {
return router.go('/purchase_history');
},
icon: const Icon(
Icons.subscript,
size: 20,
color: Colors.black,
),
label: const Text(
'Purchase History',
style: TextStyle(color: Colors.black),
),
),
),
],
),
),
],
);
}
}
#ref_inventory screen for testing
import 'package:flutter/material.dart';
class ref_inventory_list extends StatefulWidget {
const ref_inventory_list({super.key});
@override
State<ref_inventory_list> createState() => _ref_inventory_listState();
}
class _ref_inventory_listState extends State<ref_inventory_list> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Ref Inventory'),
),
body: const Center(
child: Text('Ref Inventory Placeholder'),
),
);
}
}
Once compiled here are the result #Main calls the UserScreen.dart Directly
Here is when I try to comment out the return UserScreen() in the main app and use MaterialApp.router() instead
if you click the icon button Refrigerator content when using MaterialApp.router() here is the result
as you can see sub route screen display the scaffold but not the main route.
Am I missing a code here or did I mess up somewhere when calling the GoRoute widget. Any hint or suggestion I need to fix this would be greatly appreciated
You should use MaterialApp.router. If you call context.go, it replaces the existing route with the route you selected. Here you should use context.push. '/' for path is usually used for onboardscreen. I wouldn't recommend using this for your homepage because you have to type the whole path for push. First, set the path for UserScreen to '/userScreen'. Add initialLocation: '/userScreen' to GoRouter if you want it to boot up first. Afterwards;
context.push('/userScreen/ref_inventory');