I want make a button with text and icon inside it, with custom background color and custom width. with fix position (not scrollable). would you like to help me please ?
here are the code:
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.shifting,
currentIndex: 0, // this will be set when a new tab is tapped
items: [
BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle), title: Text('Players'),backgroundColor: Colors.red),
BottomNavigationBarItem(icon: Icon(Icons.whatshot), title: Text('Trending'),backgroundColor: Colors.blueAccent),
BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('Highlights'),backgroundColor: Colors.yellow)
]
its only give a color for the icon.
this is what I want:
Here you go
Widget build(context) {
return Scaffold(
bottomNavigationBar: Container(
height: 56,
margin: EdgeInsets.symmetric(vertical: 24, horizontal: 12),
child: Row(
children: <Widget>[
Container(
width: 66,
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Icon(Icons.chat, color: Colors.white), Text("CHAT", style: TextStyle(color: Colors.white))],
),
),
Container(
width: 66,
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Icon(Icons.notifications_active, color: Colors.white), Text("NOTIF", style: TextStyle(color: Colors.white))],
),
),
Expanded(
child: Container(
alignment: Alignment.center,
color: Colors.red,
child: Text("BUY NOW", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
),
),
],
),
),
);
}
You may want to look at the concept of a BottomAppBar instead.
This bar accepts any widget as children not just BottomNavigationBarItems.
You could try this:
BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: SizedBox(
height: 44,
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.add, color: Colors.blue, size: 24),
Text("Add")
],
),
),
),
),
),
]
),
)
Related
I'm trying to implement a DropDownButton where the list of items will be displayed from its start.
Meaning, I want the items list to be opened and displayed as if the items list "completes" the DropDownButton - right after the green underline and regardless to the current value (see current behavior below).
I tried looking up online some information of how to achieve it but it yielded nothing. Also, I tried wrapping the DropDownButton with widgets to set the alignment of the drop of items and unfortunately I managed nothing.
What am I missing?
How can I set The DropDownButton's list to be opened so that the items will be aligned from its start?
here is my code:
final List<String> categories = ['', 'Cakes', 'Chocolate', 'Balloons', 'Flowers', 'Greeting Cards','Gift Cards', 'Other'];
String _currCategory = categories[0];
#override
Widget build(BuildContext context){
return Material(
child: Scaffold(
resizeToAvoidBottomInset: true,
resizeToAvoidBottomPadding: false,
backgroundColor: Colors.transparent,
key: _scaffoldKeyMainScreen,
appBar: AppBar(
centerTitle: true,
elevation: 0.0,
backgroundColor: Colors.lightGreen[800],
actions: <Widget>[
///Checkout - cart
IconButton(
icon: Icon(Icons.shopping_cart_outlined),
onPressed: () {}
),
/// WishList
IconButton(
icon: Icon(Icons.favorite),
onPressed: () => {}
],
leading: Icon(Icons.logout),
title: Text('My app'),
),
body: Stack(
alignment: Alignment.center,
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width * 0.35,
color: Colors.lightGreen[800],
),
),
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
child: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Align(
alignment: Alignment.center,
child: Container(
color: Colors.transparent,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(11.0),
child: Center(
child: Text(' Sort by: ',
style: TextStyle(
color: Colors.black,
),
),
),
),
Container(
color: Colors.transparent,
child: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.transparent,
buttonTheme: ButtonTheme.of(context).copyWith(
alignedDropdown: true,
)
),
child: DropdownButton<String>(
dropdownColor: Colors.white,
underline: Container(
height: 2,
color: Colors.lightGreen[300],
),
icon: Icon(Icons.keyboard_arrow_down_outlined,
color: Colors.lightGreen[200],
),
elevation: 8,
value: _currCategory,
items: categories
.map<DropdownMenuItem<String>>((e) => DropdownMenuItem(
child: Text(e, style: TextStyle(color: Colors.lightGreen[300]),),
value: e,
)
).toList(),
onChanged: (String value) {
setState(() {
_currCategory = value;
});
},
)
),
),
///in my app I have a GridView that is built from items loaded from Firebase
///but I think it has nothing to do with the current problem so I placed a symbolic text
Center(child: Text(_currCategory)),
],
),
),
),
),
],
),
),
),
]
),
)
);
}
current behavior: App Demo of Current Behavior
I was finally able to solve this and found exactly what I was looking for here:
https://stackoverflow.com/a/59859741/13727011
Also, there is an excellent YouTube tutorial on how to implement such Dropdown here:
https://youtu.be/j5DkShqvIAU
I use row widget with two widgets inside, a text widget and iconbutton but iconbutton is not aligned with text and I don't know how to do it. This is a screenshot to show you
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 10),
child: widgets[index],
),
IconButton(
icon: Icon(
Icons.close,
size: 25,
color: Colors.grey,
),
onPressed: () => {
setState(() {
widgets.remove(widgets[index]);
}),
})
],
),
Use mainAxisSize: MainAxisSize.min,
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 1),
borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
'Theo',
style:
TextStyle(color: Colors.deepOrangeAccent, fontSize: 20),
),
),
IconButton(
icon: Icon(
Icons.close,
size: 25,
color: Colors.grey,
),
onPressed: () => {})
],
),
),
Output:
replace CrossAxisAlignment.start with CrossAxisAlignment.baseline and add textBaseline: TextBaseline.alphabetic like this:
Row(
mainAxisSize: MainAxisSize.min,
textBaseline: TextBaseline.alphabetic,
crossAxisAlignment: CrossAxisAlignment.baseline,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 10),
child: widgets[index],
),
IconButton(
icon: Icon(
Icons.close,
size: 25,
color: Colors.grey,
),
onPressed: () => {
setState(() {
widgets.remove(widgets[index]);
}),
})
],
),
You may need this to confirm:
I used InkWell instead of iconbutton and it works
I'm looking to create a custom bar app like the image below
Image - custom bar app I want
However I am not able to leave the bottom of the menu drawer white, nor align my text to the left, and it is getting like this
Image - my custom app bar
My code
return Scaffold(
appBar: AppBar(
actions: <Widget>[
Stack(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Hi'),
Text('#Name'),
],
),
SizedBox(
width: 10,
),
CircleAvatar(backgroundColor: Colors.white),
SizedBox(
width: 8,
),
CircleAvatar(
backgroundColor: Colors.white,
),
SizedBox(
width: 16,
),
],
),
],
),
],
),
body: Container(),
drawer: Drawer(
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('Name'),
accountEmail: Text('Email'),
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.black,
child: Text('N'),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text("Home"),
)
],
),
),
);
This is a working example. You just have to customize it
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
//centerTitle: true,
title: Column(
children: <Widget>[
Text("Hola "),
Text("Senior"),
],
),
leading: Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Material(
elevation: 0,
borderRadius: BorderRadius.only(
topRight: Radius.circular(16),
bottomRight: Radius.circular(16),
),
color: Colors.yellow,
child: Icon(Icons.menu)),
),
actions: [
CircleAvatar(
backgroundColor: Colors.white,)
]
),
body: Center(
child : Text('Content')
)
);
}
}
I want to remove the gap between these two columns.
How can I achieve this?
This is the code which I tried. The Expanded() here is inside the Row() widget.
I would like to decrease the gap between the two Columns(). I tried wrapping both Columns inside a Container and implementing Padding on it, but it doesn't work. I tried mainAxisAlignment also.
Expanded(
child: Column(
children: <Widget>[
Container(
width: 98.0,
child: Card(
child: ListTile(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Room 1',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
subtitle: Padding(
padding: const EdgeInsets.only(top:8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
Icons.check_box_outline_blank
),
Icon(
Icons.check_box,
)
],
),
),
),
),
),
],
),
),
Expanded(
child: Column(
children: <Widget>[
Container(
width: 98.0,
child: Card(
child: ListTile(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Room 1',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
subtitle: Padding(
padding: const EdgeInsets.only(top:8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
Icons.check_box_outline_blank
),
Icon(
Icons.check_box,
)
],
),
),
),
),
),
],
),
)
The issue was solved by using Flexible() instead of Expanded().
Thanks to: Jay Patel
I'm making custom toolbar with background shape but my back button is getting correct the alignment to the text
Widget _toolBar(String headerText){
return Container(
decoration: BoxDecoration(
color: MyColors.greenHeader,
borderRadius: new BorderRadius.only(
bottomLeft: const Radius.circular(15.0),
bottomRight: const Radius.circular(15.0))
),
child:Center(child: Stack(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 1,
child:Text(headerText,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
)
),),
],),
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
flex: 1,
child:IconButton(
icon: new Icon(Icons.arrow_back_ios),
color: Colors.white,
onPressed: (){},
)
),
],),
],
),)
);
}
The above code also tried without stack by Using Row with expanded but the text alignment going wrong the text getting center to its expanded widget n
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: _buildBackground(),
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 13,
child:_toolBar('VENUE LOGIN')
),
Expanded(
flex: 87,
child: Container(
child: LoginBody(),
),
)
],
)
],
),
);
You can try center your Text and IconButton widgets.
Stack(
children: <Widget>[
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 1,
child: Text(headerText,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
)),
),
],
),
),
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
flex: 1,
child: IconButton(
icon: new Icon(Icons.arrow_back_ios),
color: Colors.white,
onPressed: () {},
)),
],
),
),
],
),
You can Try like this
appBar: PreferredSize(
preferredSize: Size(null, 100),
child: Container(
width: MediaQuery.of(context).size.width,
height: 100,
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15)
),
child: Container(
color: Colors.green,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.navigate_before,size: 40,),
Text("Center",style: TextStyle(fontSize: 30),),
Icon(Icons.navigate_before,color: Colors.transparent,),
],
),
),
),
),
),