Is there a way to see the content when SliverAppBar is minimized in Flutter?

Question

Is there a way I can see 'Text' part when SliverAppBar is minimized like the following picture?

When scrolling using the following code, the 'Text' part seems to disappear.

Is there a different Widget type I should be using instead?

import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Page1(),
    );
  }
}

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: 180.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('test'),
              background: Image.asset(
                'assets/images/background.png',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverFillRemaining(
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
              ),
              child: Text('TEST'),
            ),
          )
        ],
      ),
    );
  }
}

score 1 · Answer 1 · answered Jun 21 '20 at 14:48

Using customScrollView or another type of scroll view used when you have lots of items that don't fit in the screen. In your case, there is no need for a collapsing sliver app bar so instead of SliverFillRemaining use SliverToBoxAdapter.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Page1(),
    );
  }
}

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: false,
      body: Container(
        color: Colors.white,
        child: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              floating: false,
              pinned: true,
              expandedHeight: 180.0,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('test'),
                background: Image.asset(
                  'assets/images/background.png',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                ),
                child: Text('TEST'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Is there a way to see the content when SliverAppBar is minimized in Flutter?

1 Answers1