I am using double FAB. But I don't know how can set fab position to docker.
If I use one FAB, I can do it like that:
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked
but I used two fab so How can I do it that? Thats my FAB codes:
floatingActionButton: Stack(
children: <Widget>[
Padding(padding: EdgeInsets.only(left:31),
child: Align(
alignment: Alignment.bottomLeft,
child: FloatingActionButton(
backgroundColor: Colors.orange,
child: Icon(Icons.import_contacts),),
),),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
backgroundColor: Colors.orange,
child: Icon(Icons.play_arrow),),
),
],
),
ScreenShot
Am new to flutter and I want to make it as simple as possible
For vertical use column and for Horizontal use row, Let me show you how.
For Horizontal:
Row(
children: <Widget>[
Padding(padding :const EdgeInsets.only(right: 90.0, bottom: 5.0)),
FloatingActionButton(
child: Icon(Icons.arrow_forward),
onPressed: () {}
), //FloatingActionButton
Padding(padding :const EdgeInsets.only(right: 90.0, bottom: 5.0)),
FloatingActionButton(
child: Icon(Icons.arrow_forward),
onPressed: () {}
), //FloatingActionButton
Padding(padding :const EdgeInsets.only(right: 90.0, bottom: 5.0)),
FloatingActionButton(
child: Icon(Icons.arrow_forward),
onPressed: () {}
), //FloatingActionButton
], //<Widget>[]
) //Row
For Vertical:
Column(
children: <Widget>[
Padding(padding :const EdgeInsets.only(right: 90.0, bottom: 5.0)),
FloatingActionButton(
child: Icon(Icons.arrow_forward),
onPressed: () {}
), //FloatingActionButton
Padding(padding :const EdgeInsets.only(right: 90.0, bottom: 5.0)),
FloatingActionButton(
child: Icon(Icons.arrow_forward),
onPressed: () {}
), //FloatingActionButton
Padding(padding :const EdgeInsets.only(right: 90.0, bottom: 5.0)),
FloatingActionButton(
child: Icon(Icons.arrow_forward),
onPressed: () {}
), //FloatingActionButton
], //<Widget>[]
) //Column
It's just an idea on how to use multiple FloatingActionButtons, It's your wish how and where you'll use this idea...
Related
so I'm trying to implement a somewhat custom bottom navigation bar. I am trying to center my icons and after further investigation it is indeed working "correctly" in a way but the issue is that the bottom half of the bottom app bar gets completely ignored.
No matter what I do, the bottom half gets ignored. If I increase the size, it only makes it bigger at the top which is not what I want. How can I get the row to respect the entire bottom app bar?
Here's my code:
bottomNavigationBar: Padding(
padding: const EdgeInsets.only(left: 30, bottom: 33.0, right: 30.0),
child: ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(30.0),
),
child: BottomAppBar(
color: Color(0xFF222222),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 60.0,
child: SvgPicture.asset(
'assets/images/home.svg',
),
),
Container(
height: 60.0,
child: SvgPicture.asset(
'assets/images/discover.svg',
),
),
Container(
height: 60.0,
child: SvgPicture.asset(
'assets/images/heart.svg',
),
),
Container(
height: 60.0,
child: SvgPicture.asset(
'assets/images/user.svg',
),
),
],
),
),
),
),
Solution was to wrap BottomAppBar with SafeArea. Shoutout to Flutter discord for help on this :)
bottomNavigationBar: SafeArea(
child: Padding(
padding: const EdgeInsets.only(left: 30.0, right: 30.0),
child: ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(30.0),
),
child: BottomAppBar(
color: Color(0xFF222222),
child: Container(
height: 88.0,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Stack(
children: [
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/images/home.svg',
),
),
Positioned(
left: 23.0,
bottom: 0,
child: Image.asset('assets/images/Ellipse5.png'),
),
],
),
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/images/discover.svg',
),
),
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/images/heart.svg',
),
),
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/images/user.svg',
),
),
],
),
),
),
),
),
),
),
I have a persistentFooterButtons option for my Scaffold.
persistentFooterButtons: [
FloatingActionButton(
heroTag: "editself",
child: Icon(Icons.edit),
onPressed: () {
print(InterfaceViewRoute);
Navigator.pushNamed(context, InterfaceViewRoute, arguments: "-1");
}),
FloatingActionButton(
heroTag: "scanneredit",
child: Icon(Icons.qr_code_scanner_rounded),
onPressed: () => _scan(),
),
],
);
But now the whole background is filled there. See image:
Is there a way to make this background transparent so that you can see the list all the way down
Transparent Footer with Floating Action buttons
This is a Code Snippet.
floatingActionButton: Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.only(
left: 40.0,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
FloatingActionButton(
tooltip: 'Home',
child: Icon(
Icons.home,
color: Colors.black,
),
onPressed: () {},
backgroundColor: Colors.white.withOpacity(.4),
),
Spacer(),
FloatingActionButton(
tooltip: 'Details',
child: Icon(
Icons.details,
color: Colors.black,
),
onPressed: () {},
backgroundColor: Colors.white.withOpacity(.4),
),
Spacer(),
FloatingActionButton(
tooltip: 'Bar Chart',
child: Icon(
Icons.bar_chart_outlined,
color: Colors.black,
),
onPressed: () {},
backgroundColor: Colors.white.withOpacity(.4),
),
Spacer(),
FloatingActionButton(
tooltip: 'Settings',
child: Icon(
Icons.settings,
color: Colors.black,
),
onPressed: () {},
backgroundColor: Colors.white.withOpacity(.4),
),
],
),
),
Have you tried put Row in floatingActionButton?
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
),
SizedBox(width: 10,),
FloatingActionButton(
),
],
)),
Another way is to use bottomNavigationBar of Scaffold
...
extendBody: true, // if you want body to be extended below buttons
bottomNavigationBar: SafeArea(
child: Container(
child: TextButton(child: Text('button'), onPressed: () {}), //or row of buttons
width: MediaQuery.of(context).size.width,
color: Colors.transparent, //background color
padding: EdgeInsets.only(top: 5, bottom: 3),
),
),
...
I have a login page which has three fields and a button at the center of the page. At the Bottom of the same page, I need to display a three buttons in a vertically. How can I do this in Flutter? Any suggestions would be really helpful.Thanks in advance.
Your question is not clear, I think you need to place 3 buttons at the bottom of a column.
return Scaffold(
appBar: AppBar(),
body: Container(
padding:
EdgeInsets.only(left: 20.0, right: 20.0, top: 25.0, bottom: 25.0),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(hintText: 'Text Field 1'),
),
TextField(
decoration: InputDecoration(hintText: 'Text Field 2'),
),
TextField(
decoration: InputDecoration(hintText: 'Text Field 3'),
),
SizedBox(
height: 25.0,
),
MaterialButton(
onPressed: () {},
child: Text('Button'),
color: Colors.blue,
minWidth: double.infinity,
),
Expanded(
child: SizedBox(),
),
MaterialButton(
onPressed: () {},
child: Text('Button 1'),
color: Colors.blue,
minWidth: double.infinity,
),
MaterialButton(
onPressed: () {},
child: Text('Button 2'),
color: Colors.blue,
minWidth: double.infinity,
),
MaterialButton(
onPressed: () {},
child: Text('Button 3'),
color: Colors.blue,
minWidth: double.infinity,
),
],
),
),
);
Expanded will fill the empty space
result will be like,
If your question is different, give me more details
You must use Stack and Positioned to achieve what you want, Check the example below
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
padding:
EdgeInsets.only(left: 20.0, right: 20.0, top: 25.0, bottom: 25.0),
child: Stack(
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
decoration: InputDecoration(hintText: 'Text Field 1'),
),
TextField(
decoration: InputDecoration(hintText: 'Text Field 2'),
),
TextField(
decoration: InputDecoration(hintText: 'Text Field 3'),
),
SizedBox(
height: 25.0,
),
MaterialButton(
onPressed: () {},
child: Text('Button'),
color: Colors.blue,
minWidth: double.infinity,
),
],
),
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: Column(
children: <Widget>[
MaterialButton(
onPressed: () {},
child: Text('Button 1'),
color: Colors.blue,
minWidth: double.infinity,
),
MaterialButton(
onPressed: () {},
child: Text('Button 2'),
color: Colors.blue,
minWidth: double.infinity,
),
MaterialButton(
onPressed: () {},
child: Text('Button 3'),
color: Colors.blue,
minWidth: double.infinity,
),
],
),
),
],
),
),
);
}
I have design like this
I tried adding 2 rows in the column and I got an error. that is, it exceeds the screen or the chart may not be rendered
this is my code
body: RefreshIndicator(
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: GestureDetector(
child: Container(
margin: EdgeInsets.only(bottom: 320),
child: chart,
),
onTap: (){
_showDialog();
},
),
),
Expanded(
child: Column(
children: <Widget>[
RaisedButton(
padding: const EdgeInsets.symmetric(vertical: 50, horizontal: 65),
textColor: Colors.white,
color: Colors.blue,
onPressed: (){},
child: new Text("LAPOR"),
),
RaisedButton(
padding: const EdgeInsets.symmetric(vertical: 50, horizontal: 36),
textColor: Colors.white,
color: Colors.redAccent,
onPressed: (){},
child: new Text("PENGUMPULAN"),
),
],
),
),
],
),
onRefresh: _showDialog
)
Try wrapping your widgets in a SafeArea class
https://api.flutter.dev/flutter/widgets/SafeArea-class.html
https://www.youtube.com/embed/lkF0TQJO0bA
I've been trying to make my button to fill my container.
But as you can see from the picture above, the button (red) on the left clearly did not fill the entire container(green). I can solve this by adding height to MaterialButton, but IMHO this is not the best solution, because device's height might differ. Can you help me to solve this problem? Thanks.
Here is my code:
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: MaterialButton(
color: Colors.red,
child: Text("Button A"),
onPressed: () {},
),
),
),
Expanded(
child: MaterialButton(
color: Colors.blue,
child: Text("Button B"),
onPressed: () {},
),
),
],
),
Simply Add - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, in MaterialButton
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: MaterialButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // Add this
color: Colors.red,
child: Text("Button A"),
onPressed: () {},
),
),
),
Expanded(
child: MaterialButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // Add this
color: Colors.blue,
child: Text("Button B"),
onPressed: () {},
),
),
],
),
You may can try
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: SizedBox(
height: 48,
child: MaterialButton(
height: double.infinity,
color: Colors.red,
child: Text("Button A"),
onPressed: () {},
padding: EdgeInsets.all(0),
),
),
),
),
Expanded(
child: SizedBox(
height: 48,
child: MaterialButton(
height: double.infinity,
color: Colors.blue,
child: Text("Button B"),
onPressed: () {},
),
),
),
],
),