CODEWITHSUNDEEP
dartflutter
creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126694

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:

get

But I want to see this:

want

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.

Upvotes: 16

Views: 17255

Answers (3)

Mahmoud Salah Eldin
Mahmoud Salah Eldin

Reputation: 2098

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:[],
)

Upvotes: 3

Hasan A Yousef
Hasan A Yousef

Reputation: 24948

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

Upvotes: 0

aqwert
aqwert

Reputation: 10789

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

Upvotes: 36

Related Questions