I am trying to implement the below design
When I add the expandable floating button to the notch in bottom navigation bar it break the design of bottom navigation bar.
I tried AnchorOverlay but didn't help. Below is the code of my main screen where the expandable widget is notched in the bottom app bar
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kPrimaryColor,
floatingActionButton: ExpandableFab(
distance: 112.0,
children: [
ActionButton(
onPressed: () {},
icon: const Icon(Icons.format_size),
),
ActionButton(
onPressed: () {},
icon: const Icon(Icons.insert_photo),
),
ActionButton(
onPressed: () {},
icon: const Icon(Icons.videocam),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
//bottom navigation bar on scaffold
color: Colors.redAccent,
shape: const CircularNotchedRectangle(), //shape of notch
notchMargin:
5, //notche margin between floating button and bottom appbar
child: Row(
//children inside bottom appbar
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: const Icon(
Icons.menu,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.print,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.people,
color: Colors.white,
),
onPressed: () {},
),
],
),
),
);
}
Please refer this https://codewithandrea.com/articles/adding-animated-overlays-to-your-app/ maybe your issue will fixed.
Related
I was able to add rounded corners but could not figure out how to reduce the default padding and make it a round button.
SlidableAction(
onPressed: (context) {
// do something
},
autoClose: true, // I need this functionality
icon: FeatherIcons.copy,
),
Current Output (SlidableAction)
Required Output(Container in Slidable children)
There's multiple ways to achieve that
You can use the shape: CircleBorder()
MaterialButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
child: Icon(
Icons.camera_alt,
size: 24,
),
padding: EdgeInsets.all(16),
shape: CircleBorder(),
)
OR
You can use circle avatar
CircleAvatar(
backgroundColor: Colors.blue,
radius: 20,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.add),
color: Colors.white,
onPressed: () {},
),
),
You could try and use ElevatedButton instead of Slidable Action , I will share example code
ActionPane(
motion: ScrollMotion(),
children: [
Builder(
builder: (cont) {
return ElevatedButton(
onPressed: () {
Slidable.of(cont)!.close();
},
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
backgroundColor: Colors.red,
padding: EdgeInsets.all(10),
),
child: const Icon(
Icons.delete,
color: Colors.white,
size: 25,
),
);
},
),
],
),
I created my own bottom app bar following a tutorial. However, there is a white space between the bottom nav bar and the bottom of the screen. I colored this space in white to show it. How can I make my container the actual nav bar and hide that space?
This is happening on all of my screens in the app regardless if they begin with a scaffold, column, container etc.
import 'package:flutter/material.dart';
class bottomAppBar extends StatelessWidget {
const bottomAppBar({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return BottomAppBar(
color: Colors.white,
child: Container(
color: Color(0xFF313131).withOpacity(0.7),
height: 50,
width: double.maxFinite,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
onPressed: () {
Navigator.pushNamed(context, '/');
},
icon: Icon(
Icons.home,
color: Colors.white,
),
),
IconButton(
onPressed: () {
Navigator.pushNamed(context, '/discover');
},
icon: Icon(
Icons.search,
color: Colors.white,
),
),
IconButton(
onPressed: () {
Navigator.pushNamed(context, '/mybookings');
},
icon: Icon(
Icons.hello,
color: Colors.white,
),
),
IconButton(
onPressed: () {
Navigator.pushNamed(context, '/user');
},
icon: Icon(
Icons.person,
color: Colors.white,
),
),
],
),
),
);
}
}
This happens because you use the scaffold propery from the materail app. But, never wrap the widget with the scaffold widget.
After wraping the widget in scaffold use the bottomNavigationBar property to put your BottomAppBar. Then every thing will work perfect.
Thank you.
Code (Your updated code)
import 'package:flutter/material.dart';
class bottomAppBar extends StatelessWidget {
const bottomAppBar({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomAppBar(
color: Colors.white,
child: Container(
color: Color(0xFF313131).withOpacity(0.7),
height: 50,
width: double.maxFinite,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
onPressed: () {
// Navigator.pushNamed(context, '/');
},
icon: Icon(
Icons.home,
color: Colors.white,
),
),
IconButton(
onPressed: () {
// Navigator.pushNamed(context, '/discover');
},
icon: Icon(
Icons.search,
color: Colors.white,
),
),
IconButton(
onPressed: () {
// Navigator.pushNamed(context, '/mybookings');
},
icon: Icon(
Icons.ac_unit,
color: Colors.white,
),
),
IconButton(
onPressed: () {
// Navigator.pushNamed(context, '/user');
},
icon: Icon(
Icons.person,
color: Colors.white,
),
),
],
),
),
),
);
}
}
Output Screen
In Flutter I want to create an app bar that looks as follows:
I've easily managed to add the 2 icons on the left and right, but I am struggling to create a rectangle in the middle.
I've tried the following code:
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: IconButton(
icon: Image.asset('assets/images/maps.png'),
onPressed: () => {},
),
title: Expanded( // The bit that's not working. A rectangle that fills the middle area.
child: Container(
color: Colors.blue,
),
),
actions: <Widget>[
IconButton(
icon: Image.asset('assets/images/search.png'),
onPressed: () => {},
),
],
),
);
but I get the following exception:
Expanded widgets must be placed inside Flex widgets.
Expanded(no depth, flex: 1, dirty) has no Flex ancestor at all.
Thanks for the help.
You can achieve this by setting the centerTile attribute of the AppBar to true
Like this
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
centerTitle: true,
leading: IconButton(
icon: Icon(
Icons.location_on,
color: Colors.grey,
),
onPressed: () => {},
),
title: Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Icon(Icons.refresh),
Expanded(
child: Center(
child: Text("London"),
),
),
Opacity(child: Icon(Icons.refresh), opacity: 0,),
],
),
decoration: BoxDecoration(
color: Colors.grey, borderRadius: BorderRadius.circular(10)),
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.search,
color: Colors.grey,
),
onPressed: () => {},
),
],
),
);
}
}
The output:
An alternative solution (inspired by #Josteve Adekanbi answer), to create a rectangle that fills the title area is:
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
leading: ...
title: Container(
width: double.infinity,
height: 40,
child: Container(
color: Colors.blue,
),
),
actions: ...
),
);
How can I reduce spacing between button ?
You can see four buttons on app bar takes so much space, I have tried Rows. but not worked
Below is my code --
AppBar(
backgroundColor: Colors.deepOrange,
iconTheme: new IconThemeData(color: Colors.white),
title: Text(
titleString,
style: TextStyle(color: Colors.white),
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
//iconSize: 20,
onPressed: null,
),
IconButton(
icon: Icon(
Icons.notifications_none,
color: Colors.white,
),
// iconSize: 20,
onPressed: null,
),
//Add more icon here
],
);
You can use VisualDensity and padding arguments together to reduce things:
actions: <Widget>[
IconButton(
visualDensity: VisualDensity(horizontal: -4.0, vertical: -4.0),
padding: EdgeInsets.zero,
icon: Icon(
Icons.search,
color: Colors.white,
),
//iconSize: 20,
onPressed: null,
),
//Add more icon here
],
This worked in my app at least. Hope it's helpful!
The problem is with the IconButton Widget. by default IconButton has a size of 48x48 pixels size and you can read about it in the top answer of this question.
A workaround would be to use the GestureDetector widget to handle your onPressed() method. Below is an example.
actions: <Widget>[
GestureDetector(
onTap: (){
//your code
},
child: Icon(Icons.search)
),
GestureDetector(
onTap: (){},
child: Icon(Icons.notifications)
)
//Add more icon here
],
Try using sizedbox
Example
Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox.fromSize(
size: Size(25, 20), // button width and height
child: InkWell(
splashColor: Colors.white, // splash color
onTap: () {}, // button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.search), // icon
],
),
),
),
),
I am trying to create a chip where the close button (deleteIcon) is on the left side of the chip label (label).
how can i do that.
here is the unwantted result:
and i want to move the X to the left side of "Hagai"
like this:
Chip(
deleteIcon: Icon( Icons.close, ),
onDeleted: () {setState(() {print("bla");}); }
label: Text("bla",),
),
An update:
after the suggestions answers here is my new code (still dosent work):
Widget build(BuildContext context) {
return Container(
child:
Chip(
label: Text(
"bla",
),
avatar: InkWell(
onTap: () {
print("bla");
},
child: Icon(
Icons.close,
),
),
),
);
}
There is no way to change the direction of Chip Widget. But we can customize the Chip
Chip(
label: Text(
"bla",
),
avatar: InkWell(
onTap: () {},
child: Icon(
Icons.close,
),
),
),
another solution is given by ibhavikmakwana
Additions
as in the above view are visible the same as per requirement but onTap is not working I am working on finding the reason why it's not working.
I have created the custom chip View, for mean while you can use it its working fine
Wrap(
children: <Widget>[
Container(
padding: const EdgeInsets.fromLTRB(5.0, 5.0, 5.0, 5.0),
decoration: BoxDecoration(
color: Color(0xffDBDBDB),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(20.0),
),
child: Wrap(
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
runSpacing: 10,
children: <Widget>[
InkWell(
onTap: () {
print("bla");
},
child: Icon(
Icons.close,
),
),
Padding(padding: const EdgeInsets.all(5.0)),
Text(
"bla",
),
],
),
)
],
),
You can either use a RawChip, Chip,
and in avatar field pass your delete icon.
You can wrap your delete icon with InkeWell or GestureDetector to get the onTap event.
RawChip(
label: Text(
"bla",
),
avatar: InkWell(
onTap: () {},
child: Icon(
Icons.close,
),
),
)
Using delete in Avatar doesn't allow tap events, even with Inkwell or GestureDetector.
Use the Directionality widget instead
Directionality(
textDirection: TextDirection.rtl,
child: Chip(
deleteIcon: Icon( Icons.close, ),
onDeleted: () {setState(() {print("bla");}); }
label: Text("bla",),
),
);