Блог

У меня есть эта страница flutter

Я хочу, чтобы этот фон с изображением цветов отображался по всей панели приложений, а также с текстом MyProfile с другими кнопками панели приложений, такими как выдвижной ящик и кнопка поиска, перекрывающие его.

Вот код на данный момент

 Container(
                child: Stack(
                  alignment: Alignment.bottomCenter,
                  overflow: Overflow.visible,
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Expanded(
                          child: Container(
                            height: 200.0,
                            decoration: BoxDecoration(
                                image: DecorationImage(
                                    fit: BoxFit.cover,
                                    image: NetworkImage(
                                        'https://timelinecovers.pro/facebook-cover/download/stunning-little-flowers-facebook-cover.jpg'))),
                          ),
                        )
                      ],
                    ),
                    Positioned(
                      top: 100.0,
                      child: Container(
                        height: 190.0,
                        width: 190.0,
                        decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              image: NetworkImage(
                                  'https://static.displate.com/280x392/displate/2020-06-20/97526a531e9ff32c26f7752ebc926941_07a032cb55575a397e6ba8c98804ad43.jpgD'),
                            ),
                            border:
                                Border.all(color: Colors.white, width: 6.0)),
                      ),
                    ),
                  ],
                ),
              ),
 

некоторые изменения в вашем коде и результате:

   Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = MediaQuery.of(context).size.height;
    return SafeArea(child: Scaffold(
      body: Container(
        child: Stack(
          alignment: Alignment.bottomCenter,
          overflow: Overflow.visible,
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    height: 240.0,
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(
                                'https://timelinecovers.pro/facebook-cover/download/stunning-little-flowers-facebook-cover.jpg'))),
                  ),
                )
              ],
            ),
            Positioned(
              top: 0.0,
              child: Container(
                width: width,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Row(
                      children: [
                        IconButton(icon: Icon(Icons.menu,color: Colors.white,), onPressed: (){}),
                        Text('My Profile',style: TextStyle(color: Colors.white,fontSize: 22),),
                      ],
                    ),
                    IconButton(icon: Icon(Icons.notifications,color: Colors.white,), onPressed: (){}),
                  ],
                ),
                height: 52,
              ),
            ),
            Positioned(
              top: 120.0,
              child: Container(
                height: 190.0,
                width: 190.0,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(
                          'https://static.displate.com/280x392/displate/2020-06-20/97526a531e9ff32c26f7752ebc926941_07a032cb55575a397e6ba8c98804ad43.jpgD'),
                    ),
                    border:
                    Border.all(color: Colors.white, width: 6.0)),
              ),
            ),
          ],
        ),
      ),
    ));

  }```
 

Вы можете легко добиться этого, установив:

• extendBodyBehindAppBar: true свойство в Scaffold виджете.
• backgroundColor: Colors.transparent и установите elevation: 0.0 в AppBar виджете, чтобы сделать его полностью прозрачным.

Если значение true и указана панель приложений, то высота тела увеличивается, чтобы включить высоту панели приложений, а верхняя часть тела выравнивается с верхней частью панели приложений.

Это полезно, если AppBar.backgroundColor панели приложений не является полностью непрозрачным.

Источник: свойство extendBodyBehindAppBar из документа Flutter

После этого отрегулируйте height для:

• фоновое изображение
• изображение профиля

Я скопировал ваш код и скорректировал его с помощью приведенного выше решения, см. Пример ниже:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        title: Text(widget.title),
        leading: Icon(Icons.list),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      body: Container(
        child: Stack(
          alignment: Alignment.bottomCenter,
          overflow: Overflow.visible,
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    height: 300.0,
                    decoration: BoxDecoration(
                        image: DecorationImage(
                            fit: BoxFit.cover,
                            image: NetworkImage(
                                'https://timelinecovers.pro/facebook-cover/download/stunning-little-flowers-facebook-cover.jpg'))),
                  ),
                )
              ],
            ),
            Positioned(
              top: 180.0,
              child: Container(
                height: 190.0,
                width: 190.0,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(
                          'https://static.displate.com/280x392/displate/2020-06-20/97526a531e9ff32c26f7752ebc926941_07a032cb55575a397e6ba8c98804ad43.jpgD'),
                    ),
                    border: Border.all(color: Colors.white, width: 6.0)),
              ),
            ),
          ],
        ),
      ),
    );
  }
 

Пожалуйста, обратитесь к этому свойству виджета Scaffold в Flutter. Он будет делать то, что вы хотите. Возможно, вам придется немного изменить размер. И, может быть, сделать цвет панели приложений прозрачным.