Flutter application design without AppBar

问题:

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.

回答1:

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'));

回答2:

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();
      }),
    ],
  );
}