Is there a way to recreate Formulia app's collapsible app bar in flutter (similar to `SliverAppBar`)?

Question

So I have an app on my mobile phone called 'Formulia' and I thought the design of their main page expandable app bar looks awesome. Formulia app collapsible app bar

Do you have any idea how I could achieve anything similar to this in this video?

I tried to recreate this in flutter, but I do not think it is possible to create it just using SliverAppBar. I looked through the web but didn't find anything at all.

Answer 1

You can try using medium or large by providing constructor

Example:

SliverAppBar.large(
            title: Text("Formula"),
           )

or

If you want to change the widget during expanded or without expanded u can use another call cupertinosliver navigation bar:

CupertinoSliverNavigationBar(
            alwaysShowMiddle: false,
            largeTitle: Text("Formula", style: TextStyle(fontWeight: FontWeight.bold),),
            middle: Text("Hide formula", style: TextStyle(fontWeight: FontWeight.bold),),
          )

Refer this documentation

1. https://api.flutter.dev/flutter/material/SliverAppBar/SliverAppBar.large.html
2. https://api.flutter.dev/flutter/cupertino/CupertinoSliverNavigationBar-class.html

Answer 2

I have have used this in my application, but in that it has some a little bit different on scrolling the text kind of teleport from the big below text to the appbar. Below i'm puting it's code you can try if you want:

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  late ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController()
      ..addListener(() {
        setState(() {});
      });
  }

  bool get _isSliverAppBarExpanded {
    return _scrollController.hasClients &&
        _scrollController.offset > (100 - kToolbarHeight);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.indigoAccent,
      body: NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              backgroundColor: Colors.indigoAccent,
              expandedHeight: 120.0,
              floating: false,
              pinned: true,
              stretch: false,
              leading: IconButton(
                onPressed: () {},
                icon: const Icon(Icons.dehaze),
              ),
              actions: [
                IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.star),
                )
              ],
              title: _isSliverAppBarExpanded
                  ? const Text(
                      'Home Screen',
                      style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 20),
                    )
                  : null,
              flexibleSpace: FlexibleSpaceBar(
                titlePadding:
                    const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
                title: _isSliverAppBarExpanded
                    ? null
                    : const Text(
                        'Home Screen',
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 20),
                      ),
              ),
            ),
          ];
        },
        body: Container(
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: SizeConstant.borderRadius24),
        ),
      ),
    );
  }
}