I am working on the camera part in the Flutter application. On the bottom, there are two icons. One for the flash and one for the camera button. I would like for them to be centered on the screen. I was trying to make the red camera button appear in the center and the yellow flash icon would appear close to the camera button on the left side.
Widget controlRow() {
return Ink(
color: Colors.black,
child: Row(
//mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
const IconButton(
onPressed: null,
icon: Icon(
//Icons.margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
Icons.flash_auto,
color: Colors.yellow,
),
iconSize: 50,
),
IconButton( // circle button
// padding: new EdgeInsets.all(0.0),
onPressed: takePicPressed,
icon: const Icon( // icon: const Icon(
Icons.lens_outlined,
color: Colors.red,
),
iconSize: 90),
const SizedBox(width: 50, height: 25) // 50 and 25
],
));
}
I tried with the padding and Edge Insets but I do not understand what exactly Edge Insets do. Below I have listed some pieces of code that I have tried down below.
/Icons.margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
// padding: new EdgeInsets.all(0.0),
Changed your code and attached a screenshot of what it looks like:
Widget controlRow() {
return Ink(
color: Colors.black,
child: Center(
heightFactor: 1,
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: <Widget>[
const IconButton(
padding: EdgeInsets.only(top: 30),
onPressed: null,
icon: Icon(
Icons.flash_auto,
color: Colors.yellow,
),
iconSize: 50,
),
IconButton(
onPressed: () {},
icon: const Icon(
Icons.lens_outlined,
color: Colors.red,
),
iconSize: 90),
const SizedBox(width: 50, height: 25)
],
),
));
}
The main idea was to just center these buttons, and I did this with the Wrap and Center widgets.
If my answer helped, then don't forget to mark it as correct (tick).