I am using the BackdropAppBar package and would like to open the drawer programmatically from the leading icon using something like that : _scaffoldKey.currentState!.openDrawer();
But it doesn't work
The drawer is visible when swiping but i want a menu icon to activate it
Also tried this : Backdrop.of(context).scaffoldKey!.currentState!.openDrawer();
Heres's my code :
BackdropScaffold(
key: _scaffoldKey,
appBar: BackdropAppBar(
title: Text('PRODUCTS'),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.person),
onPressed: () {
print('open drawer');//text is printed
//none of the following work
_scaffoldKey.currentState!.openDrawer();
Scaffold.of(context).openDrawer();
Backdrop.of(context).scaffoldKey!.currentState!.openDrawer();
} ,
),
BackdropToggleButton(
icon: AnimatedIcons.close_menu,
),
],
drawer: MyDrawer(),
frontLayer: pageBuilder(),
backLayer: Center(
child: Text("Back Layer"),
),
));
}
_scaffoldKey is defined like this :
final GlobalKey<BackdropScaffoldState> _scaffoldKey = GlobalKey<BackdropScaffoldState>();
Here's the error :
Exception caught by gesture
The following _CastError was thrown while handling a gesture:
Null check operator used on a null value
When the exception was thrown, this was the stack:
#0 Backdrop.of (package:backdrop/src/scaffold.dart:29:61)
I actually found a solution :
replace key: _scaffoldKey with scaffoldKey: _scaffoldKey
Hopefully this will save somebody some time
Related
How can I open SpeedDial in a horizontal way in my project like this?
If there are other libraries, that is fine.
You can also create your own custom floating action button. But since you are open to packages too writing an answer in which you can achieve it using a package
Try https://pub.dev/packages/custom_floating_action_button
Add this to pubspec.yaml
custom_floating_action_button: ^0.0.3
You can wrap the scaffold with CustomFloatingActionButton
//add custom floating action button on top of your scaffold
//minimum 2 and maximum 5 items allowed
#override
Widget build(BuildContext context) {
return CustomFloatingActionButton(
body: Scaffold(
appBar: AppBar(
title: const Text('appbar title'),
),
body: Container(),
),
options: const [
CircleAvatar(
child: Icon(Icons.height),
),
CircleAvatar(
child: Icon(Icons.title),
),
//All widgets that should appear ontap of FAB.
],
type: CustomFloatingActionButtonType.horizontal,
openFloatingActionButton: const Icon(Icons.add),
closeFloatingActionButton: const Icon(Icons.close),
);
}
I'm working on Flutter project and I'm trying to change the PDF view background color to white but some reason the color is not apply even when I wrap with other widget so I would be really appreciated If I can get any help or suggestion.
Basically I want this to be white too. I'm not sure it's possible but it would be awesome if I can get any suggestion.
body: SfPdfViewer.asset(
'assets/data/songs.pdf',
initialZoomLevel: 3.0,
enableDoubleTapZooming: true,
initialScrollOffset: Offset.fromDirection(10),
controller: _pdfViewerController,
pageLayoutMode: PdfPageLayoutMode.single,
pageSpacing: 4,
canShowScrollHead: false,
onDocumentLoaded: (details) {
_pdfViewerController.jumpToPage(widget.pageNumber);
},
),
final GlobalKey<SfPdfViewerState> _pdfViewerKey = GlobalKey();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Syncfusion Flutter PdfViewer'),
actions: <Widget>[
IconButton(
icon: Icon(
Icons. bookmark,
color: Colors.white,
),
onPressed: () {
_pdfViewerKey.currentState?.openBookmarkView();
},
),
],
),
body: SfPdfViewer.network(
'https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf',
key: _pdfViewerKey,
),
);
}
you can use scaffold widget and give background color
more information
I'm doing a web application with Flutter using the google_maps_flutter package. I added a GoogleMap to my web app with onTap event which adds marker on the map. I also want to add a floating action button on top of the map but the problem is that whenever the button is clicked (left click using a mouse on a computer), a new marker is added because onTap is triggered. I don't want that. How can I fix it? The only thing I can think of is onLongPress (right click on a computer) but I'd prefer to avoid it if there is another way by keeping onTap.
void _addLocation(LatLng latLng){
setState(() {
_locationsCount++;
_locations.add(Marker(
markerId: MarkerId(_locationsCount.toString()),
position: latLng,
));
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
children: <Widget>[
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 8.0,
),
onTap: _addLocation,
markers: Set<Marker>.of(_locations),
),
Text(
'Number of locations: $_locationsCount',
),
],
),
floatingActionButton: FloatingActionButton.extended(
onPressed: _calculate,
backgroundColor: Colors.green,
label: const Text('Calculate'),
icon: const Icon(Icons.calculate),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
This is a common problem in Flutter web described in details in this issue :
https://github.com/flutter/flutter/issues/72273
In a nutshell to solve your problem you should add this package to your project :
https://pub.dev/packages/pointer_interceptor
Then wrap FloatingActionButton with the PointerInterceptor widget.
The finale code should look like this :
floatingActionButton: PointerInterceptor(
child: FloatingActionButton.extended(
onPressed: _calculate,
backgroundColor: Colors.green,
label: const Text('Calculate'),
icon: const Icon(Icons.calculate),
),
),
I am trying to use the same Appbar for all my screens, but I don't want to add the same code many times, so I thought about creating the class MyAppbar that would have my default Appbar, so that I could use it in my screens without repeating the same code, but I don't know what I am missing, because it is giving me the following error:
The method 'Appbar' isn't defined for the class 'MyAppbar'. Try
correcting the name to the name of an existing method, or defining a
method named 'Appbar'.
This is my code:
class MyAppbar extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Appbar(
centerTitle: true,
title: Center(
child: Text("Title", style: TextStyle(fontFamily: 'theboldfont'))),
actions: <Widget>[
IconButton(
icon: Icon(FontAwesomeIcons.bell),
onPressed: () {
}),
IconButton(
icon: CircleAvatar(
radius: 15,
backgroundImage: AssetImage("images/example.png")),
onPressed: () {}),
]);
}
}
Can anyone help me with this error?
Thanks!
you have a syntax error I believe. It's AppBar, not Appbar.
When I try to localize a string in a TabBarView I get this error:
NoSuchMethodError: The method 'translate' was called on null. Receiver: null. Tried calling: translate("username).
I use this line of code to translate a key to a localized string:
AppLocalizations.of(context).translate('username')
This works great in all the other screens of my app except this one. Does anyone know why it's not working and how to solve it?
Some things I already tried:
pass the context of the main screen (the screen that holds all the TabBarViews)
wrap every ListTile in a Builder
wrap the ListView in a Builder
Code:
class AccountScreen extends StatelessWidget {
final String username;
final String email;
final int points;
AccountScreen(this.username, this.email, this.points);
#override
Widget build(BuildContext context) {
return Container(
child: Padding(
padding: EdgeInsets.all(10),
child: ListView(
children: <Widget>[
ListTile(
title: Text(AppLocalizations.of(context).translate('username')),
subtitle: Text(username),
),
ListTile(
title:
Text(AppLocalizations.of(context).translate('email_address')),
subtitle: Text(email),
),
ListTile(
title: Text(AppLocalizations.of(context).translate('points')),
subtitle: Text('$points'),
),
],
),
),
);
}
}
I found same problem. But in my case is using MaterialApp without localizationsDelegates. (I mean all file not only main.dart).
So i add localizationsDelegates on every MaterialApp in all widget.
e.g.
MaterialApp(
localizationsDelegates: [
MainLocalizationsDelegate.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
brightness: Brightness.light,
bottom: TabBar(
tabs: [
Tab(text: MainLocalizations.of(context).food),
Tab(text: MainLocalizations.of(context).car),
],
),
),
body: TabBarView(
children: [
TabA(),
TabB(),
],
),
),
),
);
The problem was that there were multiple MaterialApp widgets inside the app that were causing some conflicts regarding the localisation process. Removing the Redundant MaterialApp widgets fixed the issue.