CODEWITHSUNDEEP
flutterdart
Mojtaba Michael
Mojtaba Michael

Reputation: 23

How to hide status bar and navigation bar in flutter when user clicks on screen or open keyboard?

I have a flutter app that is fullscreen . but the problem is when user touches screen the Top Status Bar appears , or When user touches a textfield , the Bottom Status Bar and Top Status Bar appears .

How can i prevent this problem .

Here is My Code For Make Flutter App fullscreen : 

await SystemChrome.setPreferredOrientations(
      [DeviceOrientation.landscapeRight]);
await SystemChrome.setEnabledSystemUIOverlays([]);

Upvotes: 2

Views: 8977

Answers (2)

RumbleFish
RumbleFish

Reputation: 2506

For Textfield the solution I settled with is to return the user to Full Screen mode (i.e. hide status & navigation) when the Textfield losses focus...

class _SomeWidget extends State<SomeWidget> {

    FocusNode _focus = new FocusNode();

    void _onFocusChange(){
        SystemChrome.setEnabledSystemUIOverlays([]); // hide status + action buttons
    }

    @override
    void initState() {
        super.initState();
        _focus.addListener(_onFocusChange);
    }

   @override
   Widget build(BuildContext context) {
       
       return TextField(
           focusNode: _focus,
           ...
           );
    }
}

Upvotes: 3

CopsOnRoad
CopsOnRoad

Reputation: 268214

Output:

enter image description here

I'm not sure where are you using that call. Here is minimum code reproduction. 

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    SystemChrome.setEnabledSystemUIOverlays([]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Full screen")),
      body: SizedBox.expand(child: FlutterLogo()),
    );
  }
}

Upvotes: 8

Related Questions