How do I add my app 3 rounded border buttons? - flutter

Question

I need to add 3 buttons at the bottom, all buttons need in one row top of the body content
I need to add 3 buttons at the bottom of app
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('WinLife'),
elevation: 10,
backgroundColor: const Color(0XFF82B58D),
leading: Container(
padding: EdgeInsets.all(5),
child: Image.asset('assets/images/logo/WinLife.png'),
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.favorite,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: Icon(
Icons.settings,
color: Colors.white,
),
onPressed: () {},
)
],
),
body: ListView.builder(
itemBuilder: (BuildContext ctx, int index) {
return Padding(
padding: EdgeInsets.all(10),
child: Card(
shadowColor: const Color(0XFF82B58D),
shape: Border.all(
color: const Color(0XFF82B58D),
width: 2,
),
elevation: 50,
color: const Color(0XFF82B58D),
child: Column(
children: <Widget>[
Image.asset(imgList[index]),
SizedBox(
height: 200,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: const <Widget>[
Icon(
Icons.favorite,
color: Colors.white,
size: 25,
),
Icon(
Icons.download,
color: Colors.white,
size: 25,
),
Icon(
Icons.share,
color: Colors.white,
size: 25,
),
],
),
],
),
),
);
},
itemCount: imgList.length,
),
);
}

Answer 1

There is a property called persistentFooterButtons in scaffold widget. It is using to show widgets to the screen footer. you can add any type of widgets inside to that. below some example code with output image FYR
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('WinLife'),
elevation: 10,
backgroundColor: const Color(0XFF82B58D),
leading: Container(
padding: const EdgeInsets.all(5),
child: Image.asset('assets/images/logo/WinLife.png'),
),
actions: <Widget>[
IconButton(
icon: const Icon(
Icons.favorite,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.settings,
color: Colors.white,
),
onPressed: () {},
)
],
),
body: Container(),
persistentFooterButtons: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
persistentFooterButtonWidget(),
persistentFooterButtonWidget(),
persistentFooterButtonWidget(),
],
),
],
);
}
persistentFooterButtonWidget() {
return OutlinedButton.icon(
label: const Text("Book now", style: TextStyle(color: Colors.black)),
onPressed: () {},
icon: const Icon(Icons.library_add_check_sharp, color: Colors.black, size: 20.0),
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
const Size(170.0, 40.0),
),
shape: MaterialStateProperty.all(RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
)),
side: MaterialStateProperty.all(
BorderSide(color: Colors.orange.shade200, width: 2)),
overlayColor: MaterialStateProperty.resolveWith<Color?>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.hovered)) {
return Colors.orange.shade200;
}
if (states.contains(MaterialState.pressed)) {
return Colors.orange.shade200;
}
return null; // Defer to the widget's default.
}),
),
);
}