SliverAppBar 'bottom' widget not affixed to bottom when used with flexibleSpace

[ilikerobots]

The bottom widget in SliverAppBar isn't affixed along the bottom when flexibleSpace is included.

Steps to Reproduce

The code:

new SliverAppBar(
    pinned: true,
    expandedHeight: 256.0,
    title: new FlexibleSpaceBar(title: new Text('My Title')),
    flexibleSpace: new FlexibleSpaceBar(
        title: new Text('flexibleSpace'),
    ),
    bottom: new TabBar(
        tabs: ['A','B','C'].map((t) => new Tab(text: 'Tab $t')).toList()
    ),
)

renders as:

Flutter Doctor

[✓] Flutter (on Linux, channel master)
    • Flutter at [...]
    • Framework revision 421258baea (5 hours ago), 2017-02-21 10:18:12
    • Engine revision ab09530927
    • Tools Dart version 1.23.0-dev.0.0

[✓] Android toolchain - develop for Android devices (Android SDK 25.0.0)
    • Android SDK at [...]
    • Platform android-25, build-tools 25.0.0
    • ANDROID_HOME = [...]
    • Java(TM) SE Runtime Environment (build 1.8.0_121-b13)

[✓] Android Studio (version 2.2)
    • Android Studio at [..]
    • Gradle version 2.14.1

[✓] IntelliJ IDEA Community Edition (version 2016.3)
    • Dart plugin version 163.13137
    • Flutter plugin version 0.1.10

[✓] Connected devices
    • Android SDK built for x86 64 • emulator-5554 • android-x64 • Android 6.0 (API 23) (emulator)

[eseidelGoogle]

@HansMuller or @Hixie would know. This may be a regression from the Sliverification of scrolling code.

[HansMuller]

This appears to be a regression and an indication that we lack a test.

[Hixie]

We should fix this as part of our Material work in the coming months, if it's still an issue.

[zoechi]

https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe seems to cover exactly this use case

[zoechi]

With the code from the initial comment it looks now like

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(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 3);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              pinned: true,
              expandedHeight: 256.0,
              title: FlexibleSpaceBar(title: Text('My Title')),
              flexibleSpace: FlexibleSpaceBar(
                title: Text('flexibleSpace'),
              ),
              bottom: TabBar(
                controller: _tabController,
                tabs: ['A', 'B', 'C'].map((t) => Tab(text: 'Tab $t')).toList(),
              ),
            ),
          ];
        },
        body: Center(
          child: Text("Sample Text"),
        ),
      ),
    );
  }
}

[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.1 18B75, locale en-AT)

[clocksmith]

Why do the examples have FlexibleSpaceBar both as the title and the flexibleSpace? What is the desired result?

[HansMuller]

This has been working as intended since the issue was updated in January.

The flexible space widget's title does (now) occupy the same place as the app bar's bottom widget. In an app that includes an app bar bottom widget, there's no need for a flexible space bar title.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.