beamer
beamer copied to clipboard
Published
20 hours ago •
slovnicki
slovnicki
Beamer inside LayoutBuilder
Describe the bug When Beamer widget exists inside LayoutBuilder and change browser width, bad state No element error happens.
**Beamer version: 1.5.0
To Reproduce Steps to reproduce the behavior:
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: LayoutBuilder(
builder: (context, constraints) {
return Row(
children: [
Container(
color: Colors.blue[300],
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
MenuButton(
beamer: _beamerKey,
uri: '/books',
child: Text('Books'),
),
SizedBox(height: 16.0),
MenuButton(
beamer: _beamerKey,
uri: '/articles',
child: Text('Articles'),
),
],
),
),
Container(width: 1, color: Colors.blue),
if ((context.currentBeamLocation.state as BeamState).uri.path.isEmpty)
Expanded(
child: Container(
child: Center(
child: Text('Home'),
),
),
)
else
Expanded(
child: ClipRRect(
child: Beamer(
key: _beamerKey,
routerDelegate: BeamerDelegate(
transitionDelegate: const NoAnimationTransitionDelegate(),
locationBuilder: (routeInformation, _) =>
routeInformation.location!.contains('articles')
? ArticlesLocation(routeInformation)
: BooksLocation(routeInformation),
),
),
),
),
],
);
},
)
);
Screenshots If applicable, add screenshots to help explain your problem.
Desktop:
- Browser [e.g. chrome, safari]
Hey @nodahikaru :wave: Sorry for a late response :disappointed:
I think it should work if you put BeamerDelegate into a final variable outside of build.
Let me know did it help.
@slovnicki
I also faced the same issue I'll share my code :
class NavHolderPage extends StatefulWidget {
const NavHolderPage({Key? key}) : super(key: key);
@override
State<NavHolderPage> createState() => _NavHolderPageState();
}
class _NavHolderPageState extends State<NavHolderPage> {
// 0 - home , 1- approval , 2 - services
int selectedIndex = 0;
String appbarTitle = "Home";
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
final _routeKey = GlobalKey<BeamerState>();
// final loginDelegate = BeamerDelegate(
// locationBuilder: (routeInfo,_){
// return NavBarLocations();
// } );
@override
Widget build(BuildContext context) {
final deviceType = CustomResponsiveBuilder(Get.width).screenType;
return Scaffold(
key: _scaffoldKey,
backgroundColor: Colors.white,
drawer: SideNav(menuItems: [
SideNavElement(icon: kHome, text: "Home", onTap: (){
setState(() {
selectedIndex = 0;
appbarTitle = "Home";
});
},),
SideNavElement(icon: kApprovalUnselected, text: "Approval", onTap: (){
print("Approval");
setState(() {
selectedIndex = 1;
appbarTitle = "Approval";
});
},),
SideNavElement(icon: kServiceSelected, text: "Services", onTap: (){
print("Services");
setState(() {
selectedIndex = 2;
appbarTitle = "Services";
});
// getSelectedItem(selectedIndex).update(rebuild: false);
},),
SideNavElement(icon: kDeposit, text: "Deposit", onTap: (){
print("Deposit");
setState(() {
selectedIndex = 3;
appbarTitle = "Deposit";
});
// getSelectedItem(selectedIndex).update(rebuild: false);
},),
SideNavElement(icon: kFundTransfer, text: "Fund transfer", onTap: (){ print("Fund transfer"); },
submenu: [
SideNavElement(icon: kHome, text: "Bank Transfer", onTap: (){
print("Bank Transfer");
setState(() {
selectedIndex = 4;
appbarTitle = "Fund transfer";
});
},),
SideNavElement(icon: kHome, text: "Manage Beneficiaries", onTap: (){
print("Manage Beneficiaries ");
setState(() {
selectedIndex = 5;
appbarTitle = "Manage Beneficiaries";
});
context.router.pushAndPopUntil(const ManageBeneRoute(), predicate: (route)=>false);
},),
]
),
SideNavElement(icon: kBillPaymentUnselected, text: "Bill Payment", onTap: (){
print("Bill Payment index 6");
},),
SideNavElement(icon: kSalaryUploadUnselected, text: "Salary Upload", onTap: (){
print("Salary Upload");
},),
SideNavElement(icon: kFundedFacilityUnselected, text: "Funded Facility", onTap: (){
},),
SideNavElement(icon: kInvoiceUnselected, text: "FTA Invoice inquiry & Payment", onTap: (){
},),
SideNavElement(icon: kSettingsUnselected, text: "Settings", onTap: (){
},),
], selectedIndex: selectedIndex,),
// appBar: AppBar(),
body: Stack(
children: [
Row(
children: [
// This sized box remains behind the side nav so that it can have an elevated feel
Visibility(
visible: deviceType == AppDeviceType.WEB,
child: const SizedBox(width: 300,)),
Expanded(child: Stack(
children: [
Column(
children: [
// This sized box remains behind the appbar so that it can have an elevated feel
const SizedBox( height: 72,),
Expanded(
child:
Beamer(routerDelegate: data[selectedIndex],key: _routeKey,)
// getSelectedItem(selectedIndex,constrains),
)
],
),
CustomAppbar(
deviceType: deviceType,
title: appbarTitle,
onMenuTap: ()=>_scaffoldKey.currentState?.openDrawer(), onProfileTap: ()=>_scaffoldKey.currentState?.openEndDrawer(),
),
],
))
],
),
// Side nav bar , hidden when not in web mode
Visibility(
visible: deviceType == AppDeviceType.WEB,
child: SideNav(menuItems: [
SideNavElement(icon: kHome, text: "Home", onTap: (){
setState(() {
selectedIndex = 0;
appbarTitle = "Home";
});
},),
SideNavElement(icon: kApprovalUnselected, text: "Approval", onTap: (){
setState(() {
selectedIndex = 1;
appbarTitle = "Approval";
});
},),
SideNavElement(icon: kServiceSelected, text: "Services", onTap: (){
setState(() {
selectedIndex = 2;
appbarTitle = "Services";
});
// getSelectedItem(selectedIndex).update(rebuild: false);
// context.router.pushAndPopUntil(ServicesMainRoute(), predicate: (route)=>false);
},),
SideNavElement(icon: kDeposit, text: "Deposit", onTap: (){
setState(() {
selectedIndex = 3;
appbarTitle = "Deposit";
});
},),
SideNavElement(icon: kFundTransfer, text: "Fund transfer", onTap: (){ print("Fund transfer"); },
submenu: [
SideNavElement(icon: kHome, text: "Bank Transfer", onTap: (){
setState(() {
selectedIndex = 4;
appbarTitle = "Fund transfer";
});
},),
SideNavElement(icon: kHome, text: "Manage Beneficiaries", onTap: (){
setState(() {
selectedIndex = 5;
appbarTitle = "Manage Beneficiaries";
});
context.router.pushAndPopUntil(const ManageBeneRoute(), predicate: (route)=>false);
},),
]
),
SideNavElement(icon: kBillPaymentUnselected, text: "Bill Payment", onTap: (){
print("Bill Payment");
},),
SideNavElement(icon: kSalaryUploadUnselected, text: "Salary Upload", onTap: (){
print("Salary Upload");
},),
SideNavElement(icon: kFundedFacilityUnselected, text: "Funded Facility", onTap: (){
print("Funded Facility");
},),
SideNavElement(icon: kInvoiceUnselected, text: "FTA Invoice inquiry & Payment", onTap: (){
print("FTA Invoice inquiry & Payment");
},),
SideNavElement(icon: kSettingsUnselected, text: "Settings", onTap: (){
print("Settings");
},),
], selectedIndex: selectedIndex,)
),
],
),
);
// return LayoutBuilder(builder: (ctx,constrains){
// final deviceType = CustomResponsiveBuilder(constrains.maxWidth).screenType;
//
//
//
// });
}
final data = [
BeamerDelegate(
// initialPath: Routes.home.path,
locationBuilder: (routeInformation, _) {
return HomeLocations();
},
),
BeamerDelegate(
// initialPath: Routes.services.path,
locationBuilder: (routeInformation, _) {
return ServicesLocations();
},
),
BeamerDelegate(
// initialPath: Routes.services.path,
locationBuilder: (routeInformation, _) {
return ServicesLocations();
},
),
BeamerDelegate(
// initialPath: Routes.services.path,
locationBuilder: (routeInformation, _) {
return ServicesLocations();
},
)
];
}
