I have developed a flutter app for Android that shows a button in the bottom of the screen.
This is how I placed the widgets.
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: FutureBuilder<void>(
future: _initializeControllerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Column(
children: [
Expanded(child: CameraPreview(_controller)),
Padding(
padding: const EdgeInsets.only(
bottom: 0,
left: 5.0,
right: 5.0,
),
child: SizedBox(
width: double.infinity, // Occupies full available width
child: ElevatedButton(
onPressed: _isButtonEnabled
? () async {
// Mark the anonymous function as async
await _generateAttendance(context);
}
: null,
style: ElevatedButton.styleFrom(
elevation: 20.0,
shadowColor: Colors.black,
backgroundColor: btnColor, // Set the background color
foregroundColor: Colors.white, // Set the text color
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
8.0,
), // Set the border radius/ Rectangular border
),
),
child: Text('Registrar $tipo'),
),
),
),
],
);
} else {
return Center(child: CircularProgressIndicator());
}
},
),
floatingActionButton: Padding(
padding: const EdgeInsets.only(bottom: 50.0),
child: FloatingActionButton(
onPressed: () async {
await _takePicture(context);
},
child: Icon(Icons.camera_alt),
),
),
);
When I test it in a real phone, the ´ElevatedButton´ appears underneath the Android navigation buttons, this way:

Hwo can I solve it?
Thanks
Jaime
The solution is to wrap the Scaffold within a SafeArea widget.
> SafeArea: A widget that insets its child with sufficient padding to avoid intrusions by the operating system.
As the documentation says, SafeArea will apply sufficient padding to avoid anything as cameras, or even system bottom navigation bars.