SliverAppBar and title

Question

I have a SliverAppBar, but I want to make it so that when the user starts scrolling, the title becomes like a regular AppBar (centered on top) + before scrolling, it was on the left, not in the center. I don't quite understand how to do this + I want the text style to be different for the two text states, but now it turns out to increase the current through expandedTitleScale, which is not quite the same

SliverAppBar(
   pinned: true,
   snap: false,
   floating: false,
   surfaceTintColor: Colors.transparent,
   backgroundColor: Colors.transparent,
   collapsedHeight: 50,
   expandedHeight: 150.0,
   automaticallyImplyLeading: false,
   flexibleSpace: FlexibleSpaceBar(
     centerTitle: true,
     title: Text(
        title,
        style: context.appStyles.paragraphP1Medium,
     ),
     expandedTitleScale: 2,
     titlePadding: EdgeInsets.zero,
   ),
),

Answer 1

I did this

SliverAppBar(
              expandedHeight: _expandedHeight,
              surfaceTintColor: Colors.white,
              backgroundColor: Colors.white,
              centerTitle: true,
              pinned: true,
              floating: false,
              snap: false,
              elevation: 0,
              title: AnimatedOpacity(
                duration: const Duration(milliseconds: 300),
                opacity: isScrolled ? 1 : 0,
                child: RichText(
                  text: TextSpan(
                    children: [
                      TextSpan(
                        text: widget.title.toLowerCase(),
                        style: context.appStyles.paragraphP1Medium.copyWith(color: context.appColors.base),
                      ),
                      if (widget.subTitle.isNotEmpty)
                        TextSpan(
                          text: ' / ',
                          style: context.appStyles.paragraphP1Medium.copyWith(color: context.appColors.base),
                        ),
                      if (widget.subTitle.isNotEmpty)
                        TextSpan(
                          text: widget.subTitle.toLowerCase(),
                          style: context.appStyles.paragraphP1Medium.copyWith(color: context.appColors.base),
                        ),
                    ],
                  ),
                ),
              ),
              flexibleSpace: FlexibleSpaceBar(
                background: Stack(
                  children: [
                    Align(
                      alignment: Alignment.bottomLeft,
                      child: Opacity(
                        opacity: 1 - _opacityTitle,
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 20),
                          child: RichText(
                            text: TextSpan(
                              children: [
                                TextSpan(
                                  text: widget.title.toLowerCase(),
                                  style: context.appStyles.headingH6.copyWith(color: context.appColors.base),
                                ),
                                if (widget.subTitle.isNotEmpty)
                                  TextSpan(
                                    text: ' / ',
                                    style: context.appStyles.paragraphP1Medium.copyWith(color: context.appColors.base),
                                  ),
                                if (widget.subTitle.isNotEmpty)
                                  TextSpan(
                                    text: widget.subTitle.toLowerCase(),
                                    style: context.appStyles.paragraphP1Medium.copyWith(color: context.appColors.base),
                                  ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                    Align(
                      alignment: Alignment.topCenter,
                      child: Container(
                        height: 56,
                        color: context.appColors.inverse,
                      ),
                    )
                  ],
                ),
              ),
            ),

void _listenToScrollChange() {
    if (controller.offset >= 44.0) {
      _expandedHeight = 44;
      _opacityTitle = 1;
      setState(() {
        isScrolled = true;
      });
    } else {
      _expandedHeight = 44 + (49 - controller.offset);
      if (_expandedHeight >= 93) _expandedHeight = 93;
      _opacityTitle = 1 - ((_expandedHeight - 49) / 40);
      if (_opacityTitle <= 0 ) _opacityTitle = 0;
      if (_opacityTitle > 1) _opacityTitle = 1;
      setState(() {
        isScrolled = false;
      });
    }
  }