Example of CupertinoSliverNavigationBar in Flutter

An example of implementing CupertinoSliverNavigationBar in Flutter.

Note: CupertinoSliverNavigationBar must be placed in a sliver group like this:

CustomScrollView(
      slivers: [
        CupertinoSliverNavigationBar(
         /** */
        ),

        ///////////////// Other silver items
        SliverGrid(
         /** */
        )
      ],
)

The Complete Example

The code:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        child: CustomScrollView(
      slivers: [
        CupertinoSliverNavigationBar(
          leading: Material(
              child: IconButton(
            icon: Icon(Icons.home),
            onPressed: () {},
          )),
          middle: Text('Kindacode.com'),
          trailing: Material(
              child: IconButton(
            icon: Icon(Icons.add),
            onPressed: () {},
          )),
          largeTitle: Text('Large Title'),
        ),

        /////////////////
        SliverGrid(
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 200.0,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
            childAspectRatio: 3 / 2,
          ),
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.blue[100 * (index % 9)],
                child: Text('Grid Item $index'),
              );
            },
            childCount: 20,
          ),
        )
      ],
    ));
  }
}

Output:

Hope this helps. Happy coding with Flutter 🙂