Сжать SliverAppBar Анимация изображения Как текст заголовка во Flutter

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

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

Ниже представлен виджет AnimatedPosition:

AnimatedPositioned(
  width: isShrink ? 10.0 : 200.0,
  height: isShrink ? 10.0 : 200.0,
  duration: Duration(seconds: 2),
  curve: Curves.linear,
  child: Stack(
    children: [
      Container(
        child: Image.asset(
            'assets/images/user-avatar.png'),
      ),
    ],
  ),
),

Ниже представлен SliverAppBar с AnimatedPosition, размещенным в стеке, и значок пользователя в ведущем параметре SliverAppBar.

SliverAppBar(
  leading: isShrink
      ? Padding(
          padding: EdgeInsets.all(10),
          child: CircleAvatar(
            backgroundImage:
                AssetImage('assets/images/user-avatar.png'),
            backgroundColor: Colors.white,
            radius: 3,
          ),
        )
      : Container(),
  floating: true,
  pinned: true,
  flexibleSpace: FlexibleSpaceBar(
    title: Row(
      children: <Widget>[
        Text(
          "Username",
          style: bodyText1Style(
            context,
            color: isShrink ? Colors.black : Colors.white,
            fontSize: isShrink ? 18 : 15,
            fontWeight: FontWeight.w600,
          ),
        ),
      ],
    ),
    background: Stack(
      children: <Widget>[
        AnimatedPositioned(
          width: isShrink ? 10.0 : 200.0,
          height: isShrink ? 10.0 : 200.0,
          duration: Duration(seconds: 2),
          curve: Curves.linear,
          child: Stack(
            children: [
              Container(
                child: Image.asset(
                    'assets/images/user-avatar.png'),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
  expandedHeight: size.height * 0.35,
);

Это результат приведенного выше кода:

введите описание изображения здесь


flutter dart animation flutter-sliver sliverappbar
person Flourish    schedule 03.12.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

После долгого исследования я смог прийти с этим, используя https://stackoverflow.com/a/59323713/3636615 как ссылка:

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      TransitionAppBar(
        // extent: 250,
        extent: 300,
        avatar: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage(
                      'assets/images/user-avatar.png'), // NetworkImage(user.imageUrl),
                  fit: BoxFit.cover)),
        ),
        title: "Emmanuel Olu-Flourish",
      ),
      SliverList(
          delegate: SliverChildBuilderDelegate((context, index) {
        return Container(
            child: ListTile(
              title: Text("${index}a"),
            ));
      }, childCount: 25))

    ],
  ),
);

Ниже представлена ​​демонстрация результата:

введите описание изображения здесь

person Flourish    schedule 04.12.2020
comment
было бы приятно увидеть вашу принятую реализацию TransitionAppBar - person Stuck; 16.06.2021