Android navigation buttons appears in front of buttons of my app


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:

enter image description here

Hwo can I solve it?

Thanks

Jaime

0
Feb 3 at 12:56 PM
User Avatarjstuardo
#android#flutter

Accepted Answer

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.

User Avatarrusty
Feb 3 at 2:32 PM
0