Flutter hide title of Silver app bar when expanded

user_8342080 0
Viewed 1689

I have implemented a silver app bar with background image on my flutter app. i want to make title of the silver app bar to hide when silver app bar on expanded mode. i only want to display the title when it is collapsed how can i achieve this behavior?

SliverAppBar(
            expandedHeight: 250.0,
            floating: false,
            pinned: true,
            title: Text("Coporate News"),
            elevation: 8,
            flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text(""),
                background: Stack(
                  children: [
                    Container(
                      height: 400,
                      child: Image.network(
                        news['url'],
                        fit: BoxFit.cover,
                      ),
                    ),        
     .......

I only wants to display it here And I wants to hide it from here

flutter
2 Answers
import 'package:flutter/material.dart';

class InvisibleExpandedHeader extends StatefulWidget {
  final Widget child;
  const InvisibleExpandedHeader({
    Key? key,
    required this.child,
  }) : super(key: key);
  @override
  _InvisibleExpandedHeaderState createState() {
    return _InvisibleExpandedHeaderState();
  }
}
class _InvisibleExpandedHeaderState extends State<InvisibleExpandedHeader> {

  ScrollPosition? _position;
  bool? _visible;
  
  @override
  void dispose() {
    _removeListener();
    super.dispose();
  }
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _removeListener();
    _addListener();
  }
  void _addListener() {
    _position = Scrollable.of(context)?.position;
    _position?.addListener(_positionListener);
    _positionListener();
  }
  void _removeListener() {
    _position?.removeListener(_positionListener);
  }
  void _positionListener() {
    final FlexibleSpaceBarSettings? settings =
      context.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>();
    bool visible = settings == null || settings.currentExtent <= settings.minExtent;
    if (_visible != visible) {
      setState(() {
        _visible = visible;
      });
    }
  }
  @override
  Widget build(BuildContext context) {
    return Visibility(
      visible: _visible?? false,
      child: widget.child,
    );
  }
}

and Use this InvisibleExpanded Widget inside Sliver AppBar

return SliverAppBar(
    
      flexibleSpace: FlexibleSpaceBar(
        titlePadding: const EdgeInsets.all(20),
        background: InteractiveViewer(
            child: Image.network(examImagePlaceHolder,
                fit: BoxFit.cover, width: double.infinity)),
        title: InvisibleExpandedHeader(
          child: Text(
            'Global Iq Test for all students in the world',
            style: primaryTitle,
          ),
        ),
      ),
    );
user_184464930

You have to set the pinned property to false:

SliverAppBar(
            expandedHeight: 250.0,
            floating: false,
            pinned: false,
            title: Text("Coporate News"),
            elevation: 8,
            flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text(""),
                background: Stack(
                  children: [
                    Container(
                      height: 400,
                      child: Image.network(
                        news['url'],
                        fit: BoxFit.cover,
                      ),
                    ),        
     .......
user_137993570
Related