Как отобразить тело под виджетами AppBar виджета, а не ниже?

Ответ 1

Чтобы разместить тело под панелью приложений и сделать его прозрачным, в качестве тела требуется стек. Стек должен содержать AppBar, а не эшафот.

body: Stack(
        children: <Widget>[...]
),

Первый элемент в стопке находится внизу, а последующие элементы находятся над ним. Если панель приложений прозрачна, она будет работать, но это не так. Сделав зеленый AppBar покажет вам, почему.

return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            color: Colors.blue,
          ),
          AppBar(title: Text('Hello world'),
            backgroundColor: Colors.green,
          )
        ],);

Как вы видите, панель приложений занимает весь экран и использует любые сенсорные события.

Чтобы исправить это, используйте виджет позиции,

body: Stack(
        children: <Widget>[
          Container(
            color: Colors.blue,
          ),
          new Positioned(
          top: 0.0,
          left: 0.0,
          right: 0.0,
          child: AppBar(title: Text('Hello world'),
            backgroundColor: Colors.green,
          ),),
        ], )

И вы получите это:

Хорошо, теперь сделайте AppBar прозрачным и удалите тень:

body: Stack(
        children: <Widget>[
          Container( //My container or any other widget
            color: Colors.blue,
          ),
          new Positioned( //Place it at the top, and not use the entire screen
          top: 0.0,
          left: 0.0,
          right: 0.0,
          child: AppBar(title: Text('Hello world'),
            backgroundColor: Colors.transparent, //No more green
            elevation: 0.0, //Shadow gone
          ),),
        ], )

Надеюсь это поможет...

Ответ 2

Вы можете сделать это, используя этот код

return new Scaffold(
  body: new Stack(
    children: <Widget>[
      new Container(
        color: Colors.blue.shade200,
      ),
      new AppBar(
        title: new Text("App bar"),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      new Positioned(
        top: 80.0,
        left: 0.0,
        bottom: 0.0,
        right: 0.0,
        //here the body
        child: new Column(
          children: <Widget>[
            new Expanded(
              child: Container(
                color: Colors.grey,
              ),
            )
          ],
        ),
      ),
    ],
  ),
);

Ответ 3

Удалить appBar из скаффолда и просто установите виджет стека в теле, а затем оберните AppBar в качестве последнего виджета в позиционированном виджете.

Примечание: другие ответы верны. Но это опубликовано, потому что если кто-то хочет градиентный фон AppBar и плавающую карту над ним. :)

 @override
 Widget build(BuildContext context) {
    return Scaffold(
   body: setUserForm()
    );
  }

  Widget setUserForm() {
    return Stack(children: <Widget>[
    // Background with gradient
      Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.bottomCenter,
                  colors: [Colors.red[900], Colors.blue[700]])),
          height: MediaQuery.of(context).size.height * 0.3
        ),
    //Above card
      Card(
          elevation: 20.0,
          margin: EdgeInsets.only(left: 15.0, right: 15.0, top: 100.0),
          child: ListView(
              padding:
              EdgeInsets.only(top: 20.0, left: 20.0, right: 18.0, bottom: 5.0),
              children: <Widget>[
                TextField(),
                TextField()
              ]

        )),
      // Positioned to take only AppBar size 
      Positioned( 
        top: 0.0,
        left: 0.0,
        right: 0.0,
        child: AppBar(        // Add AppBar here only
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          title: Text("Doctor Form"),
        ),
      ),

    ]);
  }

Ответ 4

Вы можете использовать

Scafold(
extendBodyBehindAppBar: true,
)

(в данный момент доступно на канале разработчиков)

https://github.com/flutter/flutter/pull/39156