Search code examples
flutterdartflutter-sliver

Flutter - check if SliverAppBar


I want to change the padding of my title in the FlexibleSpace when the SliverAppBar is collapsed. Is there a way to achieve this?

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 150.0,
        flexibleSpace: const FlexibleSpaceBar(
          //I want to change the padding to 40 when the SliverAppBar collapsed
          titlePadding: EdgeInsets.only(left: 10),
          title: Text('Available seats'),
        ),
      ),
    ],
  ),
);

Solution

  • You can create own SliverPersistentHeaderDelegate with FlexibleSpaceBar inside.

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatelessWidget {
      const MyHomePage({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: CustomScrollView(
            slivers: <Widget>[
              SliverPersistentHeader(delegate: CustomSliverAppBar()),
              SliverToBoxAdapter(
                child: Container(
                  height: 1300,
                  color: Colors.amber,
                ),
              )
            ],
          ),
        );
      }
    }
    
    class CustomSliverAppBar extends SliverPersistentHeaderDelegate {
      @override
      Widget build(context, shrinkOffset, overlapsContent) {
        return AppBar(
          flexibleSpace: FlexibleSpaceBar.createSettings(
            maxExtent: maxExtent,
            minExtent: minExtent,
            child: FlexibleSpaceBar(
              titlePadding: EdgeInsets.only(
                left: srinkRate(shrinkOffset) == 1 ? 40 : 10,
              ),
              title: Text(
                  srinkRate(shrinkOffset) == 1 ? 'shrinked' : 'Available seats'),
            ),
            currentExtent: (maxExtent - shrinkOffset).clamp(minExtent, maxExtent),
          ),
        );
      }
    
      @override
      double get maxExtent => 150.0;
    
      @override
      double get minExtent => 50;
    
      double get delta => maxExtent - minExtent;
    
      double srinkRate(double shrinkOffset) =>
          (shrinkOffset / delta).clamp(0.0, 1.0);
    
      @override
      bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
          true;
    }