Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fix textSize of title in FlexibleSpaceBar (SliverAppBar)?

Tags:

flutter

How can I fix de textSize of title in FlexibleSpaceBar?

...
child: CustomScrollView(
                slivers: <Widget>[
                  new SliverAppBar(
                    backgroundColor:
                        Colors.white,
                    automaticallyImplyLeading: false,
                    actions: <Widget>[new Container()],
                    expandedHeight: 230.0,
                    floating: false,
                    pinned: true,
                    primary: true,
                    snap: false,

                    flexibleSpace: new FlexibleSpaceBar(
                    collapseMode: CollapseMode.pin,
                    titlePadding: EdgeInsetsDirectional.only(start: 10, bottom: 0),
                    title: new Text('Some Text Here', style: TextStyle(color: Colors.black, fontSize: 14)),
])

When I collapse the SliverAppBar making scroll up, the title of FlexibleSpaceBar automatically resize. I need to fix the textSize of tittle.

like image 586
Madson Silva Avatar asked Oct 19 '25 14:10

Madson Silva


2 Answers

The FlexibleSpaceBar has a paramter called expandedTitleScale. If this is set to 1 the titel and containing text does't change it's size when scrolling.

FlexibleSpaceBar(
   expandedTitleScale: 1,
   ...
)
like image 120
Franz Avatar answered Oct 21 '25 04:10

Franz


You can wrap your FlexibleSpaceBar widget inside FlexibleSpaceBar.createSettings and set the values you want, like this:

  ScrollController _controller = ScrollController();
  final maxExtent = 230.0;
  double currentExtent = 0.0;

  @override
  void initState() {
    _controller.addListener(() {
      setState(() {
        currentExtent = maxExtent - _controller.offset;
        if (currentExtent < 0) currentExtent = 0.0;
        if (currentExtent > maxExtent) currentExtent = maxExtent;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(controller: _controller, slivers: <Widget>[
        new SliverAppBar(
          backgroundColor: Colors.red,
          automaticallyImplyLeading: false,
          actions: <Widget>[new Container()],
          expandedHeight: maxExtent,
          floating: false,
          pinned: true,
          primary: true,
          snap: false,
          flexibleSpace: FlexibleSpaceBar.createSettings(
            currentExtent: currentExtent,
            minExtent: 0,
            maxExtent: maxExtent,
            child: FlexibleSpaceBar(
              background: Placeholder(),
              collapseMode: CollapseMode.pin,
              titlePadding: EdgeInsetsDirectional.only(start: 10, bottom: 0),
              title: new Text(
                'Some Text Here',
                style: TextStyle(color: Colors.black, fontSize: 20),
              ),
            ),
          ),
        ),
like image 43
diegoveloper Avatar answered Oct 21 '25 05:10

diegoveloper



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!