Flutter Question posted in
The official Flutter documentation can be found here.

How to make sure that stuff in the SafeArea is above all other widgets in flutter

I am building a webapp that needs to be able to view 360 degree images, but when i load one to cover the whole screen it ends up over the safe area.

360 image covering some of the safe area

Portrait mode, easier to see problem

I essentially want the navigation bar to "cover" the jagged corners of the image instead of them being above. Something like being able to change the Z-index of both the safe area and the page independently would be great.

Below is some code

code for safearea

page containing the 360 image

Have tried to find several libraries with Z-index.
One i’ve tried is stack, but stack requires both of them to exist in the stack, could this work, and if so how?

Tags:

2

Answers


  1. 0 
    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SafeArea Demo'),
        ),
        body: SafeArea(
          // This will ensure that SafeArea is above all other widgets
          child: Column(
            children: [
              // Your content widgets here
            ],
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    bro need to put SafeArea after using Scafford, try it

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search