Flutter application design without AppBar

Question

I tried using this kind of approach to have all of my UI (here only a Text) in the application below the status bar, but without AppBar:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: "example",
      home: Scaffold(
        body: Text("text widget"),
      ),
    ));

This question was already asked once similar to my text, but the answer to it (which is also accepted) only takes margin into account. This, to me, does not seem like a satisfying solution, especially because you need to access MediaQuery.of(context).padding, where I could not even figure out how to use context in my simple example.

My code gives me the following result:

But I want to see this:

Now to make the differenciation between my question and the other question clear: I am not searching for a margin, I am searching for a legitimate idiomatic way of doing this. What I mean with this might look like this:

ScaffoldWithoutAppBar(body: ...

Obviously this does not exist, but I do not want a margin fix.

What do you mean by don't wan't a margin fix ? This clearly looks like a margin fix to me — Rémi Rousselet
– Rémi Rousselet, Commented Apr 29, 2018 at 23:26
@RémiRousselet I mean that I want the normal application behavior that I would get in native Android or iOS layout design, which can be achieved with SafeArea. — creativecreatorormaybenot
– creativecreatorormaybenot, Commented Apr 30, 2018 at 8:37
Well yeah. But in the end it's strictly the same thing. SafeArea do the MediaQuery.of(context).padding you didn't want to. — Rémi Rousselet
– Rémi Rousselet, Commented Apr 30, 2018 at 8:39
@RémiRousselet Yes, of course. But I was searching for an idiomatic way. If you look closely at the end of my question you can see that I wrote ScaffoldWithoutAppBar(body: ... and SafeArea(child: ... is what I meant with this. Obviously it is not a Scaffold, but I just used the word to deliver my point. I think that it is very unidiomatic to handle tasks like this in your own code. — creativecreatorormaybenot
– creativecreatorormaybenot, Commented Apr 30, 2018 at 8:43

aqwert · Accepted Answer · 2018-04-30 03:29:04Z

36

Wrap your page content (Text or Scaffold) inside a SafeArea widget

A widget that insets its child by sufficient padding to avoid intrusions by the operating system.

return new SafeArea(child: new Text('text widget'));

edited Apr 30, 2018 at 3:29

answered Apr 29, 2018 at 23:30

aqwert

10.8k2 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

creativecreatorormaybenot Over a year ago

Obviously I cannot wrap a Text widget inside in the SafeArea on its own. I need to wrap that into a Material.

Alexander Pravdin Over a year ago

Using this answer I'm getting the screen with black background and without any styles applied to the text element.

aqwert Over a year ago

It is implied that you have a parent Scaffold and above that ideally a MaterialApp

Mahmoud Salah Eldin · Accepted Answer · 2021-09-20 08:50:38Z

4

first solution: My favorite solution

 appBar: PreferredSize(
    preferredSize: Size.fromHeight(MediaQuery.of(context).padding.top),
    child: SizedBox(
      height: MediaQuery.of(context).padding.top,
    ),
  ),

solution (2):

body: SafeArea(
        top: true,
        left: false,
        right: false,
        bottom: false,
        child:Container(),
)

solution (3):

body: ListView(
children:[],
)

answered Sep 20, 2021 at 8:50

Mahmoud Salah Eldin

2,17820 silver badges26 bronze badges

Comments

Hasan A Yousef · Accepted Answer · 2018-06-22 14:28:03Z

You can wrap the Scaffold into SafeArea, as below:

import 'package:flutter/material.dart';

void main() => runApp(MyApp(
  textInput: Text("Text Widget"),
));

class MyApp extends StatefulWidget {
  final Widget textInput;
  MyApp({this.textInput});

  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  bool checkBoxValue = false;
  @override
  Widget build(BuildContext ctxt) {
    return new MaterialApp(
      home: SafeArea(
           child: Scaffold(
              body: new Center(
              child: new Column(
              children: <Widget>[
                widget.textInput,
                Checkbox(
                    value: checkBoxValue,
                    onChanged: (bool newValue){
                      setState(() {
                        checkBoxValue = newValue;
                      });
                    }
                )
              ],
            ))),
          ),
      );
  }
}

About the opposite, in case you do not need to keep repeating the AppBar in your multiple screens, you can create separate widget:

import 'package:flutter/material.dart';
import 'state.dart';

AppBar commonAppBar(String title, void action()) {
  return new AppBar(
    title: new Text(title),
    actions: [
      new IconButton(icon: new Icon(Icons.flip), onPressed: action),
      new IconButton(icon: new Icon(Icons.exit_to_app), onPressed: () {
        new StateSubject().switchToLogin();
      }),
    ],
  );
}

Column needs a top-level to be wrapped to, so can not b wrapped directly to the SafeArea.

Collectives™ on Stack Overflow

Flutter application design without AppBar

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related