I am new to Flutter and I am trying to create a navigation bar with two icons on the two sides of the bar. I am using Windows Android Studio and the android emulator there.
However, currently, only the trailing icon is displaying but not the leading icon. I am not sure why is this happening (is it because I am using an android emulator?). Would appreciate some help here. Thanks!
Edited: When the bar is collapsed, the leading icon does not show as well, even though it shares the same code as the trailing icon. I have tried googling around but it seems like it is not a common problem?
This is my code snippet:
home.dart
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
Heading(
headingTitle: 'Ambisense',
leadingIcon: Icon(CupertinoIcons.bars),
trailingIcon: Icon(CupertinoIcons.gear_alt_fill),
)
];
},
body: Center(
child: Text('Home Page'),
)
),
);
}
heading.dart
class Heading extends StatelessWidget with ObstructingPreferredSizeWidget {
final String headingTitle;
final Icon leadingIcon;
final Icon trailingIcon;
Heading({
@required this.headingTitle,
@required this.leadingIcon,
@required this.trailingIcon
});
@override
Widget build(BuildContext context) {
return CupertinoSliverNavigationBar(
largeTitle: Text(headingTitle),
leading: this.leadingIcon,
trailing: this.trailingIcon,
);
}
@override
// TODO: implement preferredSize
Size get preferredSize => throw UnimplementedError();
@override
bool shouldFullyObstruct(BuildContext context) {
// TODO: implement shouldFullyObstruct
throw UnimplementedError();
}
}
I suspect the problem is with using the android emulator since Cupertino is designed to work on ioS. I have tried using some other CupertinoIcons, some appear and some do not. However, a workaround to the problem is to use the Icon collection from the Material class instead of CupertinoIcons.
I was looking for a Menu Icon so IconData(0xf2fb, fontFamily: 'MaterialIcons')
was used instead.