I have added a floating action button in the bottomNavigationBar. The default location should be on the bottom right, but mine stays at the center.
I have tried using this floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
but the FAB still resides at the center screen.
Here is my full code of the screen:
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(55.0),
child: CustomAppBar(title: 'Customers (2)',),
),
drawer: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.white
),
child: MyDrawer(),
),
body: Container(
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(color: Colors.white),
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
FaIcon(FontAwesomeIcons.search, color: Colors.greenAccent,),
SizedBox(width: 15.0,),
Text("Search Customers"),
],
),
],
),
),
),
bottomNavigationBar: FloatingActionButton(
child: FaIcon(FontAwesomeIcons.plus),
backgroundColor: Colors.greenAccent,
foregroundColor: Colors.white,
splashColor: Colors.black,
onPressed: () {
},
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
);
}
Any idea how to solve this?
Replace:
bottomNavigationBar: FloatingActionButton(...)
with:
floatingActionButton: FloatingActionButton(...)
Related
There is an application page that is responsible for displaying devices. There is a code that returns AppBar, Body, Drawer.
Question: how do I put the description "List of devices" between AppBar and Body (as in the photo)
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Colors.black,
title: const Text('IT', style: TextStyle(fontSize: 45,
fontWeight: FontWeight.w800,
color: Colors.white)),
centerTitle: true,
actions: [
IconButton(
icon: const Icon(Icons.filter_alt,
size: 30.0,),
color: Colors.white,
onPressed: () {
showDialog<Filter>(context: context, builder: (_) {
return FilterDialog(onApplyFilters: _filter,);
});
},
),
],
),
body: PhonesList(phones: filteredPhones),
drawer: Drawer(.....),
);
you use appbar bottom ... and customization
bottom: PreferredSize(
child: Container(
color: Colors.white,
child: row(
),
),
preferredSize: Size.fromHeight(kToolbarHeight)
),
Use bottom property of AppBar and add text inside it
Text will be shown at the bottom of AppBar
use a column widget below appbar or introduce a column widget on Body.
Column(
children:<Widget>[
Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(10),
color:Colors.green
),
child: Column(
children:<Widget>[
Text("iphone 11 ",style: TextStyle(color:Colors.white,fontSize:25),),
Text("ios 15")
])
),
Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(10),
color:Colors.green
),
child: Column(
children:<Widget>[
Text("iphone 13 ",style: TextStyle(color:Colors.white,fontSize:25),),
Text("ios 13")
])
),
]
),
i make appBar and add a drawer to it and also search icon the problem there is padding between the icon for the Drawer and the search icon And I can't get rid of it
this the code:
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
titleSpacing: 0,
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
],
),
backgroundColor: Color(0xffffffff),
elevation: 1,
toolbarHeight: 40.0,
iconTheme: IconThemeData(color: Colors.grey),
),
drawer: Drawer(
child: ListView(
children: <Widget>[],
),
),
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Color(0xfffafafa),
child: Text("hello"),
),
);
}
}
Add this lines to remove default padding of IconButton:
IconButton(
constraints: BoxConstraints(),
padding: const EdgeInsets.all(0),),
Wrapping your search button with this will reduce the padding.
Not sure how much of the padding you wanted to remove.
SizedBox(
width: 10.0,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.search),
onPressed: () {},
),
),
Try like this
appBar: AppBar(
title: Text(title),
backgroundColor: kPrimaryLightColor,
actions: <Widget>[
Padding(
padding: EdgeInsets.only(right: 20.0),
child: GestureDetector(
onTap: () {},
child: Icon(
Icons.message_rounded,
size: 30.0,
),
)),
Solution 1
Just add a property called "titleSpacing" in your AppBar Tag,
Sample
appBar: AppBar(
titleSpacing: 0, //Add this line to your code
title: Text(widget.title),
leading: Icon(Icons.android),
),
Solution 2
Or wrap your title with "Transform.translate" and Add property "offset".
sample
title: Transform.translate(
offset: Offset(-30.0, 0.0),
child: Text('your app title')
),
I am developing an app with Flutter, and I want to have 2 FABs on the main screen. One in the BottomAppBar which I have done.
Scaffold(
appBard: AppBar(title: Text("My App")),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: ()=>{}
),
bottomNavigationBar: BottomAppBar(
color: Style.darkPrimaryColor,
shape: CircularNotchedRectangle(),
child: Container(
height: 50,
child: Row(
children: <Widget>[]
),
),
),
)
I want to have a second FAB positioned and fixed in the right bottom side of the screen in plus of the centered FAB like the following maquette:
Is there any way to achieve that?
I don't think there is any built in way of doing this with the scaffold, but it should be easy enough to just use a stack as your scaffold body, since you can add a floating action button anywhere. However, if you have two, you will need to change the hero tag on one of them to avoid errors when moving to/from that page.
Scaffold(
appBar: AppBar(title: Text("My App")),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: ()=>{}
),
bottomNavigationBar: BottomAppBar(
color: Style.darkPrimaryColor,
shape: CircularNotchedRectangle(),
child: Container(
height: 50,
child: Row(
children: <Widget>[]
),
),
),
body: Stack(
alignment: Alignment.bottomRight,
children: [
Container(
child: //Use this as if it were the body
),
//Setup the position however you like
Padding(
padding: const EdgeInsets.all(16.0),
child: FloatingActionButton(
heroTag: null, //Must be null to avoid hero animation errors
child: Icon(Icons.add),
onPressed: () => {},
),
),
],
),
)
Try this:
Scaffold(
appBar: AppBar(title: Text("My App")),
body: Stack(
children: [
Positioned(
bottom: 16,
right: 16,
child: FloatingActionButton(
heroTag: null,
child: Icon(Icons.add),
onPressed: ()=>{}
),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: ()=>{}
),
bottomNavigationBar: BottomAppBar(
color: Colors.black54,
shape: CircularNotchedRectangle(),
child: Container(
height: 50,
child: Row(
children: <Widget>[
]
),
),
),
)
I want to remove white(blank) space in my application. Below Is my code .
Scaffold(
backgroundColor: Theme.of(context).primaryColor,
extendBodyBehindAppBar: true,
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.amber),
actionsIconTheme: IconThemeData(color: Colors.amber),
centerTitle: true,
title: Text(
'News App',
style: TextStyle(
fontSize: 23,
fontWeight: FontWeight.bold,
),
),
backgroundColor: Colors.transparent,
elevation: 0,
actions: <Widget>[
IconButton(
icon: Icon(Icons.notifications),
onPressed: () {
_showNotification();
}),
],
),
drawer: Menu(),
body: Container(
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
Container(
child: swiperImage(),
),
Expanded(
child: Padding(
padding: EdgeInsets.all(0.0),
child: newsList(),
))
],
)
],
),
),
)
Here I display Image of my output, in this image top of the display I set swiper image and in remaining portion I set List view. So, I want to remove blank space in between this two widget. So, how can I do this?
The space is inside the ListView. Add this code and it disappears in Listview.
in ListView:
MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.builder()
)
I've added a BottomAppBar to scaffold in a materialApp, and to that I've added a fab with a inset at the center. The code looks somewhat like this
Scaffold(
bottomNavigationBar: BottomAppBar(
color: Theme.of(context).accentColor,
shape: CircularNotchedRectangle(),
child: _buildBottomBar(context),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: Theme.of(context).primaryColor,
child: Center(
child: Icon(
Icons.add,
size: 32.0,
),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CreateEvent()),
);
},
),
)
And this is what I'm getting after rendering:
The notch is not transparent, and the content behind it is getting hidden.
Is there a way to fix this? Something I might have missed?
You just need to be on the flutter channel: master and then add to Scaffold:
Scaffold(
extendBody: true
);
and it should be transparent :)
Greets
Rebar
UPDATE:
You don't need to be on master channel. It's included everywhere :)
The problem is if you put your content in the body of Scaffold it won't overlap the size of your AppBar, BottomAppBar.
You can try using Stack, put your body as a first child, then put the Scaffold, change the backgroundColor as Transparent.
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomCenter,
child: Image.network(
"https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&h=350"),
),
Scaffold(
backgroundColor: Colors.transparent,
bottomNavigationBar: BottomAppBar(
color: Theme.of(context).accentColor,
shape: CircularNotchedRectangle(),
child: Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.access_alarm),
onPressed: () => null,
),
IconButton(
icon: Icon(Icons.sms_failed),
onPressed: () => null,
),
],
),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: Theme.of(context).primaryColor,
child: Center(
child: Icon(
Icons.add,
size: 32.0,
),
),
onPressed: () {
/*
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CreateEvent()),
);*/
},
),
),
],
);
I was able to achieve the desired behavior by also setting the resizeToAvoidBottomInset flag to false.
#override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
resizeToAvoidBottomInset: false,
body: IndexedStack(
children: <Widget>[],
index: _selectedTab,
),
bottomNavigationBar: ClipRRect(
clipBehavior: Clip.antiAlias,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16.0),
topRight: Radius.circular(16.0)
),
child: BottomNavigationBar(
backgroundColor: Colors.white,
elevation: 10,
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[],
currentIndex: _selectedTab,
),
),
);
}
Edit: keep in mind that you may have to manually set the bottom insets by using MediaQuery.of(context)
Adding to the accepted solution, if you are using SafeArea as an immediate child to Scaffold then make sure you set the bottom property to false.
Scaffold(
extendBody: true,
...
child: SafeArea(
bottom: false, /* important */
child: Container(
child: // your app content
),
),
);
This enables the content to flow behind the BottomNavigationBar