1

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'),
        ),
      ),
    ],
  ),
);

1 Answer 1

1

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;
}
2
  • It works great, but is there a way to still get the effect that the app bar stays at the topwhen scrolling down
    – Kinnay
    Nov 13, 2020 at 16:58
  • 1
    you can add pinned: true. SliverPersistentHeader( delegate: CustomSliverAppBar(), pinned: true, ),
    – Kherel
    Nov 13, 2020 at 17:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.