简体   繁体   中英

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

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;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM