Flutter | SliverAppBar + flexibleSpace с кнопкой на краю

Question

как сделать вот подобную кнопку в правом нижнем углу на краю SliverAppBar чтобы они двигалась вместе в зумом:

Я пытался сделать через SliverPersistentHeaderDelegate, но там у меня не получилось сделать Zoom изображения на фоне, поэтому вернул SliverAppBar

SliverAppBar(
automaticallyImplyLeading: false,                   
floating: true,
pinned: true,
snap: true,                       
stretch: true,
backgroundColor: Color(0xFFF8F9FD),
expandedHeight: getHeight(450),                     
flexibleSpace: FlexibleSpaceBar(   

  titlePadding: EdgeInsets.only(left: 20),
    
    collapseMode: CollapseMode.pin,
    stretchModes: [
      StretchMode.zoomBackground,
      
    ],
    background: Hero(
      tag: widget.card.id.toString(),
      child: Stack(
        children: [
          appBar(size),
          Positioned.fill(
            child: Align(
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: const EdgeInsets.only(right: 20, top: 20),
                child: backButton(),
              ),
            ),
          )
        ],
      )
    ),
  ),

),

Answer 1

Решил сам, мало ли кому-то пригодиться. Да, действительно надо было идти через SliverPersistentHeaderDelegate

SliverPersistentHeader(
  delegate: LargeCustomHeader(
      child: appBar(size), //Картинка 
      btn: backButton(), //Кнопка
  )
),

И далее создал кастомный SliverPersistentHeader

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class LargeCustomHeader extends SliverPersistentHeaderDelegate {
  LargeCustomHeader({
    this.child,
    this.btn
  });
  final Widget child,btn;
  final double _navBarHeight = 56;
  final double titleHeight = 10; 
  final double childrenHeight = 400;
  @override
  double get maxExtent => 400;

  @override
  double get minExtent => _navBarHeight;

  // @override
  // FloatingHeaderSnapConfiguration get snapConfiguration => FloatingHeaderSnapConfiguration() ;

  @override
  OverScrollHeaderStretchConfiguration get stretchConfiguration =>
      OverScrollHeaderStretchConfiguration(
        stretchTriggerOffset: maxExtent,
        onStretchTrigger: () {
          
        },
      );

  double get maxShrinkOffset => maxExtent - minExtent;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    //TODO: implement specific rebuild checks
    return true;
  }

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    print(shrinkOffset);
    return Container(
        constraints: BoxConstraints.expand(),
        child: Stack(
          clipBehavior: Clip.none, fit: StackFit.loose,
          children: [
            child,
            Positioned(
              right: 20,
              bottom: -25,
                child: btn
              )
          ],
        ),
    );
  }
}

Самое главное это добавить OverScrollHeaderStretchConfiguration он как раз отвечает за зум изображения и в Stack указать clipBehavior: Clip.none, так как параметр overflow был убран

БЛОГ НА HUSL

Flutter | SliverAppBar + flexibleSpace с кнопкой на краю

Ответы (1 шт):