Someone asked this question before with no straight answer:
Is there a way to shape the appbar to look like this photo ?
i dont think you can do it with the AppBar widget, but you can build your own like this:
not my best code but i think this can help you have an idea on how to do it
Widget build(BuildContext context)
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
onPressed: () {}, icon: const Icon(Icons.arrow_back)),
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
IconButton(
onPressed: () {}, icon: const Icon(Icons.search)),
IconButton(
onPressed: () {},
icon: const Icon(Icons.notifications),
),
],
)
],
),
SizedBox(
height: 40,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30), color: Colors.green),
height: MediaQuery.of(context).size.height,
)
],
),
)),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}`
Related
I'm a beginner in flutter, I want to display a text on the far left and a button on the far right in a container, here is my code:
Container(
width: double.infinity,
margin: const EdgeInsets.all(10),
padding: const EdgeInsets.all(8.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('TEXT'),
IconButton(
onPressed: () {},
icon: Icon(
Icons.price_change_outlined,
color: Colors.blue,
))
],
),
),
Use mainAxisAlignment: MainAxisAlignment.spaceBetween,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('TEXT'),
IconButton(
onPressed: () {},
icon: Icon(
Icons.price_change_outlined,
color: Colors.blue,
))
],
),
You can find more about Row and layout
An alternative to the above solutions is to use a Spacer widget.
An advantage to this approach is that you can easily add more widgets to whatever side you want and keep the spacing in between.
Row(
children: [
Text('TEXT'),
const Spacer(),
IconButton(
onPressed: () {},
icon: Icon(
Icons.price_change_outlined,
color: Colors.blue,
),
)
]
)
I'm making a bottom navigation bar using Inkwell, but as much as I tried solutions, I couldn't separate each icon in its respective space, I don't know what is failing me.
I tried with materialbuttom but the result was almost the same, although if there is any other alternative or suggestion I would like to know! Thankyou
I added the code
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
notchMargin: 10,
child: SizedBox(
height: 60,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Material(
child: Center(
child: InkWell(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
setState(() {
currentTab = 0;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.home),
Text("Home"),
//const Padding(padding: EdgeInsets.all(10))
],
),
),
),
),
Material(
child: Center(
child: InkWell(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
setState(() {
currentTab = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.group),
Text("Grupos"),
//const Padding(padding: EdgeInsets.only(left: 10))
],
),
),
),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Material(
child: Center(
child: InkWell(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
setState(() {
currentTab = 2;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.checklist_outlined),
Text("Completadas"),
//const Padding(padding: EdgeInsets.only(right: 10))
],
)),
),
),
Material(
child: Center(
child: InkWell(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
setState(() {
currentTab = 3;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.person),
Text("Perfil")
//const Padding(padding: EdgeInsets.only(left: 10))
],
),
),
),
),
],
),
],
),
),
),
We can think bottomNavigationBar contains 5 widgets, one of the widget is FloatingActionButton. Therefor, we will include another widget as middle item of row's children that will cover FloatingActionButton space.
While items may have different sizes, we also need to align properly. We can wrap every widget with Expanded. ALso you can test with crossAxisAlignment: CrossAxisAlignment.stretch, or using LayoutBuilders constraints width on each item. If you find text overflow, you can wrap Flexible(child: Text(). More about text on overflow
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(child: Material(...)),
Expanded(child: Material(...)),
Expanded(child: const SizedBox()), // this will handle the fab spacing
Expanded(child: Material(...)),
Expanded(child: Material(...)),
]
try this
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
notchMargin: 10,
child: SizedBox(
height: 60,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Material(
child: Center(
child: InkWell(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
setState(() {
currentTab = 0;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.home),
Text("Home"),
//const Padding(padding: EdgeInsets.all(10))
],
),
),
),
),
Material(
child: Center(
child: InkWell(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
setState(() {
currentTab = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.group),
Text("Grupos"),
//const Padding(padding: EdgeInsets.only(left: 10))
],
),
),
),
),
SizedBox(),//to make space for the floating button
Material(
child: Center(
child: InkWell(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
setState(() {
currentTab = 2;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.checklist_outlined),
Text("Completadas"),
//const Padding(padding: EdgeInsets.only(right: 10))
],
)),
),
),
Material(
child: Center(
child: InkWell(
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
setState(() {
currentTab = 3;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.person),
Text("Perfil")
//const Padding(padding: EdgeInsets.only(left: 10))
],
),
),
),
),
],
),
),
),
Result looks like this
Try below code hope its help to you, I have try another way.
You can refer here some packages for
return Scaffold(
body: Center(
child: Text(
'Hello, World!',
style: Theme.of(context).textTheme.headline4,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 5,
child: Row(
//children inside bottom appbar
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(
Icons.home,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.group,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.checklist,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.person,
),
onPressed: () {},
),
],
),
),
);
Your Result Screen->
I would like to use flutter's ButtonBar due to the nice feature of automatically having a column when the device's width isn't enough. However, I'd also like to use the MainAxisSize.min, but I can't get it to use MainAxisSize.min in horizontal mode (wrt width). See example below.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(border: Border.all()),
child: ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FlatButton(
child: Text('short'),
color: Colors.blueAccent,
onPressed: () => {},
),
FlatButton(
child: Text('short'),
color: Colors.blueAccent,
onPressed: () => {},
),
],
),
),
Container(
decoration: BoxDecoration(border: Border.all()),
child: ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FlatButton(
child: Text('loooooooooooooooooong'),
color: Colors.blueAccent,
onPressed: () => {},
),
FlatButton(
child: Text('loooooooooooooooooong'),
color: Colors.blueAccent,
onPressed: () => {},
),
],
),
),
],
),
What I get
What I want
A possible solution can be to use the Wrap class instead of the ButtonBar. You have to
wrap the Container with a Center widget add some padding for the layout and your're god to go:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(border: Border.all()),
child: ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FlatButton(
child: Text('short'),
color: Colors.blueAccent,
onPressed: () => {},
),
FlatButton(
child: Text('short'),
color: Colors.blueAccent,
onPressed: () => {},
),
],
),
),
Center(
child: Container(
decoration: BoxDecoration(border: Border.all()),
padding: EdgeInsets.all(10),
child: Wrap(
//alignment: MainAxisAlignment.center,
//mainAxisSize: MainAxisSize.max,
children: <Widget>[
FlatButton(
child: Text('looooooooooooooooooooooooong'),
color: Colors.blueAccent,
onPressed: () => {},
),
FlatButton(
child: Text('looooooooooooooooooooooooong'),
color: Colors.blueAccent,
onPressed: () => {},
),
],
),
),
),
],
),
I have a Container widget and an IconButton. When I press on the IconButton, ripple effect shows behind the Container. Is there a way to fix this?
Here is the full class as Github Gist.
Container(
height: height,
decoration: _cardBoxDecoration(Colors.white),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(
FontAwesomeIcons.checkCircle,
color: _checkGrey,
size: 20,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.more_horiz,
color: _grey,
size: 20,
),
onPressed: () {},
)
],
),
]
)
);
You can use the Material widget to get the output you want. Replace the Container Widget with Material Widget.
class _AppointmentsCart extends StatelessWidget {
final double height;
_AppointmentsCart({this.height});
#override
Widget build(BuildContext context) {
return Material( // replace container widget
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(
FontAwesomeIcons.checkCircle,
color: _grey,
size: 20,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.more_horiz,
color: Colors.grey,
size: 20,
),
onPressed: () {},
)
],
),
Padding(
padding: EdgeInsets.only(left: 15),
child: Text(
'Today',
style: TextStyle(fontSize: 18),
),
),
Padding(
padding: const EdgeInsets.all(15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'5',
style: TextStyle(fontSize: 24, color: _titleGrey),
),
Text(
'Appoinemts',
style: TextStyle(fontSize: 12, color: _subtitleGrey),
)
],
),
)
],
),
);
}
}
I use BottomNavigationBar in my flutter app. This is exist view:
but I need to add separators between items. like this:
Is it possible? is there a simple way to implement this?
It's possible using BottomAppBar by having Container as a child to specify custom height of the appbar and then it can have Row to add children. The Row can have 3 FlatButtons, each having an Icon and Text inside a Column. Between each FlatButton, you can add Container to add divider. Below is code snippet:
bottomNavigationBar: BottomAppBar(
child: Container(
height: 60,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
padding: EdgeInsets.all(10.0),
onPressed: () {},
child: Column(
children: <Widget>[
Icon(Icons.home),
Text('Home')
],
),
),
Container(color: Colors.black, width: 2,),
FlatButton(
padding: EdgeInsets.all(10.0),
onPressed: () {},
child: Column(
children: <Widget>[
Icon(Icons.business),
Text('Business')
],
),
),
Container(color: Colors.black, width: 2,),
FlatButton(
padding: EdgeInsets.all(10.0),
onPressed: () {},
child: Column(
children: <Widget>[
Icon(Icons.school),
Text('School')
],
),
)
]
),
)
),
And the output :