Cannot properly hide the appbar title on scroll in flutter
Seems that this effect does not work when you set a custom style. Remove the fixed style setting from here:
Text(
  'PawCare',
  // remove this
  /*style: TextStyle(
    color: Theme.of(context).textTheme.bodyLarge!.color,
  ),*/
),

To set the style of the title text, use the titleTextStyle configuration of SliverAppBar:
SliverAppBar(
  titleTextStyle: TextStyle(
   color: Theme.of(context).textTheme.bodyLarge!.color),
...


I want to hide the AppBar on scroll. The search icon is hidden properly and also the opacity decreases on scroll. But for the title, it is not working.
import 'package:flutter/material.dart';
import 'package:vet_mobile/screens/chat.dart';
import 'package:vet_mobile/screens/logot.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                title: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      'WhatsApp',
                      style: TextStyle(
                        color: Theme.of(context).textTheme.bodyLarge!.color,
                      ),
                    ),
                    IconButton(
                      onPressed: () {},
                      icon: Icon(
                        Icons.search,
                        color: Theme.of(context).textTheme.bodyLarge!.color,
                      ),
                    ),
                  ],
                ),
                pinned: true,
                floating: true,
                elevation: 5,
                bottom: TabBar(
                  indicatorSize: TabBarIndicatorSize.tab,
                  indicatorWeight: 4,
                  indicatorColor: Theme.of(context).textTheme.bodyLarge!.color,
                  labelStyle:
                      TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
                  labelColor: Theme.of(context).textTheme.bodyLarge!.color,
                  unselectedLabelColor:
                      Theme.of(context).textTheme.bodySmall!.color,
                  dividerColor: Colors.transparent,
                  tabs: const [
                    Tab(text: 'CHATS'),
                    Tab(text: 'STATUS'),
                    Tab(text: 'CALLS'),
                  ],
                ),
              ),
            ];
          },
          body: const TabBarView(
            children: [
              Center(child: LogoutScreen()),
              Center(child: ChatScreen()),
              Center(child: Text('Patient')),
            ],
          ),
        ),
      ),
    );
  }
}



As we can see the opacity of the search button decreases slowly as I scroll down but not for the title.
I tried using the preferred height, animation controller, but it messed up more.
