Example of CupertinoSliverNavigationBar in Flutter
( 375 Articles)
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 Example
The complete code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const CupertinoApp(
// Remove the debug banner
debugShowCheckedModeBanner: false,
title: 'Kindacode.com',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: CustomScrollView(
slivers: [
// The CupertinoSliverNavigationBar
CupertinoSliverNavigationBar(
leading: Material(
child: IconButton(
icon: const Icon(Icons.home),
onPressed: () {},
)),
middle: const Text('Kindacode.com'),
trailing: Material(
child: IconButton(
icon: const Icon(Icons.add),
onPressed: () {},
)),
largeTitle: const Text('Large Title'),
),
// Other sliver elements
SliverGrid(
gridDelegate: const 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 and have a nice day. If you’d like to explore more about sliver stuff and other exciting things in Flutter, take a look at the following articles:
- Flutter SliverList – Tutorial and Example
- Flutter SliverAppBar Example (with Explanations)
- Flutter: Add a Search Field to an App Bar (2 Approaches)
- Flutter form validation example
- Flutter & Hive Database: CRUD Example
You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.
Subscribe
0 Comments