I've searched around for similar problems like this but couldn't find any.
I made a custom bottom navigation bar with a docked FAB. As far as i understand, to make the notch for the FAB transparent I need to add extendBody = true; to the Scaffold, which i did. The result is that out of the four navbar icons, only one of them are showing the transparent notch.
Code and images below. Images are showing second and third navbar icon.
Scaffold(
drawerEnableOpenDragGesture: true,
extendBody: true,
appBar: AppBar(
title: Text('Some text'),
drawer: AppDrawer(),
bottomNavigationBar: BottomAppBar(
color: Colors.blue,
shape: CircularNotchedRectangle(),
notchMargin: 2.0,
child: Container(
height: MediaQuery.of(context).size.width * 0.15,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 4,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(icon: Icon(Icons.account_box), // extendBody not working!
onPressed: () {
setState(() {
_selectedPageIndex = 0;
});
},
),
IconButton(icon: Icon(Icons.account_box), // extendBody working!
onPressed: () {
setState(() {
_selectedPageIndex = 1;
});
},
),
],
),
),
Expanded(flex: 2, child: SizedBox()),
Expanded(
flex: 4,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(icon: Icon(Icons.email), // extendBody not working!
onPressed: () {
setState(() {
_selectedPageIndex = 2;
});
},
),
IconButton(
icon: Icon(Icons.email), // extendBody not working!
onPressed: () {
setState(() {
_selectedPageIndex = 3;
});
},
),
],
),
),
],
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
body: _pages[_selectedPageIndex]['page'],
floatingActionButton: FloatingActionButton(
mini: true,
onPressed: () {
if (_selectedPageIndex == 0)
Navigator.of(context).pushReplacementNamed(
Screen1.routeName);
if (_selectedPageIndex == 1)
Navigator.of(context).pushReplacementNamed(
Screen2.routeName);
if (_selectedPageIndex == 2)
Navigator.of(context).pushReplacementNamed(
Screen3.routeName);
if (_selectedPageIndex == 3)
Navigator.of(context).pushReplacementNamed(
Screen4.routeName);
},
child: _pages[_selectedPageIndex]['icon'],
backgroundColor: Theme.of(context).accentColor,
),
)
What am I missing? Thank you!
I solved it. extendBody: true, is correct, however the child cannot be wrapped in SafeArea.
Related
I have this bottomAppBar problem in Flutter on an Iphone. I don't know why but there is this white area on the bottom and when I change the theme of the app, it didn't change with it (only when I put this bottomAppBar) Does someone know how to fix that ? Thanks
bottomNavigationBar: BottomAppBar(
child:
Container(
color: Color.fromRGBO(10, 10, 10, 1),
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
onPressed: () {
setState(() {
currentScreen = Fy();
currentTab = 0;
});
},
iconSize: 40,
icon: const Icon(Icons.home),
color: currentTab == 0 ? Colors.blue : Colors.grey,
),
MaterialButton(
onPressed: () {
setState(() {
currentScreen = const Search();
currentTab = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.search,
size: 40,
color: currentTab == 1 ? Colors.blue : Colors.grey,
),
],
),
),
]
),
],
),
)
));
}
}
Do you have a SafeArea widget somewhere up the tree from your bottom navigation bar? If so, set the bottom property of it to false. This will make you UI build right to the bottom of the screen.
I have a strange issue with my BottomAppBar and an overlapping ElevatedButton.
If I click on the upper half of the + Button the onTap event is fired for the widget behind the + Button. I tried different things but non are working, help is very appreciated, thanks :)
HomePage
return Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: _pages,
),
bottomNavigationBar: const _BottomAppBar(),
);
_BottomAppBar
#override
Widget build(BuildContext context) {
return BottomAppBar(
child: IconTheme(
data: IconThemeData(color: Theme.of(context).colorScheme.onPrimary),
child: Stack(
alignment: AlignmentDirectional.bottomCenter,
clipBehavior: Clip.none,
children: [
Positioned(
top: -30,
child: ElevatedButton(
clipBehavior: Clip.hardEdge,
onPressed: () {
...
},
style: ElevatedButton.styleFrom(
shape: const CircleBorder(),
padding: const EdgeInsets.all(20),
primary: lightGreen),
child: const Icon(
Icons.add,
size: 30,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
tooltip: 'Home',
iconSize: 28,
icon: SvgPicture.asset(
'assets/svg/home-aktiv.svg'
),
onPressed: () {
...
}),
IconButton(
tooltip: 'Profile',
iconSize: 32,
icon: SvgPicture.asset(
'assets/svg/profil-aktiv.svg'
),
onPressed: () {
...
}),
],
),
],
),
),
);
}
Did you try with a FloatingActionButton?
return Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: _pages,
),
bottomNavigationBar: _BottomAppBar(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
I am trying to dynamically add photos to carousel_slider plugin, but I cannot simply add items to the list. Does anyone know how to add it?
My example below, shows that I am using a FloatActionButton to add an image into the imgList variable. But the carousel does not get this new added value.
I already tried to call setState() on the imgList variable. But no success.
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children:
[ FloatingActionButton(
onPressed: () {
print('save');
imgList.add( 'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80');
},
child: Icon(Icons.photo_camera),
heroTag: null,
),
SizedBox(
height: 10,
),
FloatingActionButton(
onPressed: () => print('save'),
child: Icon(Icons.check_circle),
heroTag: null,
),
],
),
appBar: AppBar(
title: Text('Test carousel'),
centerTitle: true,
elevation: 0.0,
toolbarOpacity: 0.5,
),
body: Container(
child: CarouselSlider(
options: CarouselOptions(
disableCenter: true,
),
items: imgList.map((item) => Container(
child: Image.network(item, fit: BoxFit.cover, width: 1000),
color: Colors.green,
)).toList(),
))
);
I already try setState add image. It success.
You can try again.
My code:
List<String> _image = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png",
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRnltfxyRHuEEUE4gIZp9fr77Q8goigP7mQ6Q&usqp=CAU",
"https://imageproxy.themaven.net//https%3A%2F%2Fwww.history.com%2F.image%2FMTY1MTc3MjE0MzExMDgxNTQ1%2Ftopic-golden-gate-bridge-gettyimages-177770941.jpg",
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ-fff2lftqIE077pFAKU1Mhbcj8YFvBbMvpA&usqp=CAU",
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRU2U6QAHfoDaofFbNo4OLtaqYWzihF5d4fhw&usqp=CAU"];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Modular"),
),
body: Center(
child: Column(
children: [
CarouselSlider(
options: CarouselOptions(
disableCenter: true
),
items: _image.map((e) => Container(
child: Image.network(e),
)).toList(),
),
FlatButton(
child: Text('abc'),
onPressed: (){
setState(() {
_image.add("https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg");
});
},
)
],
),
),
);
}
In my application I have defined a FAB with the property floatingActionButtonLocation set to FloatingActionButtonLocation.centerDocked. I have defined a bottom app bar that holds the centerDocked FAB. I also want to use a Stack widget to position two additional FABs on the top right of the screen. It should look something similar to this - expected result
But when I tried to use a Stack, the FAB which is present in the bottom app bar is displayed but the two FABs under the stack widget are invisible.
docked FAB
FABs under stack widget
code where I have defined the Stack
return new Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Stack(
children: <Widget>[
Positioned(
// the below values for stack are experimental at the moment
left: MediaQuery.of(context).copyWith().size.width * 0.60,
right: MediaQuery.of(context).copyWith().size.width * 0.01,
// top: MediaQuery.of(context).copyWith().size.height * 0.20,
// bottom: MediaQuery.of(context).copyWith().size.height * 0.7,
child: Row(
children: <Widget>[
// invisible FABs
FloatingActionButton(
onPressed: (){
_animate2Pagenegative();
// print(widget.date);
},
child: Icon(Icons.fast_rewind),
heroTag: UniqueKey(),
),
FloatingActionButton(
onPressed: (){
_animate2Pageforward();
// print(widget.date);
},
heroTag: UniqueKey(),
child: Icon(Icons.fast_forward),
),
],
),
),
// FAB which is displayed correctly
FloatingActionButton(
backgroundColor: Colors.red,
onPressed: () async{
String result1 = await Navigator.push( // string which stores the user entered value
context,
MaterialPageRoute(
builder: (context) => InputScreen(), //screen which has TextField
));
setState(() {
addItem(result1, false, "");
});
},
tooltip: 'Add a task',
child: Icon(Icons.add),
elevation: 0.0,
),
],
),
)
body of Scaffold:
body: new Column(
children: <Widget>[
new Expanded(
child: new DaysPageView(
// onDaysChanged: getDatestring,
physics: new NeverScrollableScrollPhysics(),
dayoverride: getDate(widget.date),
scrollDirection: _scrollDirection,
pageSnapping: _pageSnapping,
reverse: _reverse,
controller: _daysPageController,
pageBuilder: _daysPageBuilder,
),
),
],
),
You don't need other FloatingActionsButtons to do that design. What I understand is that you need the upper part not to scroll with the content hence you thought of FABs. There are multiple ways to achieve that. Here is an example, I'm using colors to show you the different parts of your screen. And of course these are random sizes to show the case.
return new Scaffold(
body: Column(
children: <Widget>[
Container(
height: 150,
color: Colors.red,
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 20, left: 20),
child: Text(
"- 2 TASKS MORE",
style: TextStyle(
fontSize: 35
),
),
),
GestureDetector(
onTap: () {
print('left arrow pressed');
},
child: Container(
margin: EdgeInsets.only(top: 20, left: 20),
child: Icon(Icons.arrow_left)
),
),
GestureDetector(
onTap: () {
print('right arrow pressed');
},
child: Container(
margin: EdgeInsets.only(top: 20, left: 20),
child: Icon(Icons.arrow_right)
),
)
],
),
SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
child: Column(
children: <Widget>[
Container(
height: 600,
color: Colors.deepPurpleAccent,
),
],
),
)
],
),
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
],
),
shape: CircularNotchedRectangle(),
color: Colors.red,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red,
onPressed: ()
async {
print('FAB pressed');
},
tooltip: 'Add a task',
child: Icon(Icons.add),
elevation: 0.0,
),
);
And here is the result
I faced some problem. I want make an image, a text and two icons in AppBar but I can't make it work as I want.
I tried to make some fonts in a row after the images and text. The images and the text successful show in my AppBar, but the rest of 2 fonts (Trolley and notifications) show some error.
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.amber,
appBar: new AppBar
(
title: new Row
(
mainAxisAlignment: MainAxisAlignment.start,
children:
[
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,),
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop'))
],
)
),
....
Use leading to set a widget before appBar title & use actions to specify list of widgets in appBar which appears on right side of appBar title.
AppBar(
leading: Image.asset('yourImage'), // you can put Icon as well, it accepts any widget.
title: Text ("Your Title"),
actions: [
Icon(Icons.add),
Icon(Icons.add),
],
);
Read more about it here
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Solid Shop"),
leading: Image.asset("your_image_asset"),
actions: <Widget>[
IconButton(icon: Icon(Icons.shopping_cart), onPressed: () {}),
IconButton(icon: Icon(Icons.message), onPressed: () {}),
],
),
);
}
You need to use actions instead of title
actions: <Widget>[
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,),
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')),
Image.asset('images/logoapp.png',fit: BoxFit.contain,height: 32,), // here add notification icon
Container(padding: const EdgeInsets.all(8.0), child: Text('Solid Shop')) // here add other icon
],
You can add icon and also a picture on app bar, this code works for me:-
appBar: AppBar(
centerTitle: true,
elevation: 2,
title: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/images/bell.png",
fit: BoxFit.contain,
height: 28,
),
Container(
child: Text(" APP BAR"),
)
],
),
),
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return Settings();
},
),
);
},
color: Colors.white,
)
],
),
Hope this was helpful.
You can combine it with Spacers :
actions: const [
Spacer(flex: 3),
Icon(Icons.fit_screen),
Spacer(flex: 10),
Icon(Icons.width_normal),
Spacer(flex: 1),
Icon(Icons.aspect_ratio),
Spacer(flex: 1),
Icon(Icons.ad_units),
Spacer(flex: 5),
],