Как растянуть изображение, когда пользователь прокручивает в flutter

#flutter #flutter-animation

#flutter #flutter-анимация

Вопрос:

Я хочу растянуть изображение при прокрутке пользователем.

 Container(
 child: Image.asset(
  'assets/appHeader.png',
   fit: BoxFit.cover,
   width: size.width,
   height: 170,
 ),
)

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

Ответ №1:

Попробуйте это, я создаю это с помощью FlexibleSpaceBar.

   @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              //pinned: true, if you need to show appBar.
              pinned: false,

              flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text("Image Text(optional)",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      )),
                  background: Image.network(
                    "https://miro.medium.com/max/700/1*_nCC_uFDVYas8uYa9m6fQQ.jpeg",
                    fit: BoxFit.cover,
                  )
                  /*-------Your Image here--------*/
                  /* Image.asset(
          'assets/appHeader.png',
          fit: BoxFit.cover,
          width: size.width,
          height: 170,
          ),*/
                  ),
            ),
          ];
        },
        body: Center(
          child: Text("Your screen data"),
        ),
      ),
    );
  }

1. Я не хочу, чтобы заголовок отображался при прокрутке вниз.

2. хорошо, я обновлю ответ в соответствии с вашим требованием.

3. еще один вопрос. Как я могу поместить на него другой контейнер?? как будто мы делаем это в стеке

4. означает.. вам нужно добавить контейнер в тело. или в любое другое место. я не понимаю: «Как я могу поместить на него другой контейнер?? как будто мы делаем это в стеке»‘

5. Я хочу добавить контейнер поверх SliverAppBar

Ответ №2:

это обновление ответа относительно (которое вы задаете в комментарии) (это применимо только для этой ситуации, о которой мы говорим).

   @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          Scaffold(
              //same code that above write
              )
        ],
      ),
    );
  }