Cupertino Sliver Navigation Bar In Flutter
Have you ever thought of implementing ios styled large tiles in your flutter application? Flutter provides a widget to help you in the same-named CupertinoSilver NavigationBar. It is widely used by developers across the community.
CupertinoSilver NavigationBar widgets were designed to aid the developers to implement ios themed features in the flutter apps that are built for the ios platform. Since its introduction, it has gained a lot of appreciation across the community.
In this blog, I’ll be taking you through the overview, usage, and implementation of the class Cupertino Sliver Navigation Bar.
Table Of Contents:
What is CupertinoSilver NavigationBar?
What is CupertinoSliverNavigationBar?
The CupertinoSliverNavigationBar is placed in a sliver group such as the CustomScrollView.Cupertino sliver navigation bar has two sections where one section is fixed at the top. The second one is a sliding section with a large title. The second section will appear below the first.
It will slide down to show the large title when the sliver expands. It will hide under the first section if the sliver collapses. Like CupertinoNavigationBar, it also supports a leading and trailing widget on the static section on top that remains while scrolling.
Constructor:
We need to use the below constructor to use the CupertinoNavigationBar widget in our code.
CupertinoSliverNavigationBar(
{Key? key,
Widget? largeTitle,
Widget? leading,
bool automaticallyImplyLeading,
bool automaticallyImplyTitle,
String? previousPageTitle,
Widget? middle,
Widget? trailing,
Border? border,
Color? backgroundColor,
Brightness? brightness,
EdgeInsetsDirectional? padding,
bool transitionBetweenRoutes,
Object heroTag,
bool stretch}
)Properties:
> largeTitle: This text will appear in the top static navigation bar when collapsed and below the navigation bar, in a larger font, when expanded.
> automaticallyImplyLeading: Controls whether we should try to imply the leading widget if null.
> leading: Widget to place at the start of the navigation bar. It takes a widget as value.
> heroTag: Defaults to a common tag between all CupertinoNavigationBar and CupertinoSliverNavigationBar instances of the same Navigator. With the default tag, all navigation bars of the same navigator can transition between each other as long as there’s only one navigation bar per route.
> automaticallyImplyLeading: Setting this property to true will automatically display a leading widget according to the scenario. It takes boolean as value.
> previousPageTitle: It is used to specify the previous page route’s title. When the leading is null and automaticallyImplyLeading is true the sliver navigation bar will use this title as leading. It takes a string as a value.
Code Implementation:
Create a new dart file called main.dart inside the lib folder.
After this, we will create a Stateless Widget that will return Material App. Inside of this, we will pass out class MyHomePage.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.pink,
),
home: const MyHomePage(),
);
}
}Now before using Cupertino properties we will import the Cupertino package in our main.dart file.
After this, we will return CupertinoPageScaffold under our MyHomePage class.
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool state = false;
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold()Inside CupertinoPageScaffold we will pass CustomScrollView as a child. After this, we will pass CupertinoSliverNavigationBar.
CustomScrollView(
slivers: [
CupertinoSliverNavigationBar(
backgroundColor: Colors.black,
leading: CupertinoNavigationBarBackButton(
onPressed: () {},
color: CupertinoColors.activeBlue,
),
middle: Text(
"Cupertino Sliver Navigation Bar",
style: TextStyle(color: Colors.white),
),
trailing: CupertinoButton(
padding: EdgeInsets.zero,
child: Text(
"Done",
style: TextStyle(
color: CupertinoColors.activeBlue,
),
),
onPressed: () {},
),
largeTitle: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text("Large Tile", style: TextStyle(
color: CupertinoColors.white,
),),
),
previousPageTitle: "Back",
),
)
],
),In the above code, we have used the CupertinoSilverNavigationBar properties such as leading, middle, trailing, largeTitle.
After this, we will pass SilverGrid in the main body of the page.
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) => Padding(
padding: const EdgeInsets.only(left: 10,right: 10),
child: Container(
color: CupertinoColors.systemGrey3,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network("https://media.wired.com/photos/593261cab8eb31692072f129/master/pass/85120553.jpg",fit: BoxFit.fill,),
)
),
),
childCount: 10
)
)I have passed the image inside the container which is up to you what you want to choose.
When we run the application, we ought to get the screen’s output like the underneath screen video.
Code Files:
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);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.pink,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool state = false;
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
backgroundColor: Colors.white,
child: CustomScrollView(
slivers: [
CupertinoSliverNavigationBar(
backgroundColor: Colors.black,
leading: CupertinoNavigationBarBackButton(
onPressed: () {},
color: CupertinoColors.activeBlue,
),
middle: Text(
"Cupertino Sliver Navigation Bar",
style: TextStyle(color: Colors.white),
),
trailing: CupertinoButton(
padding: EdgeInsets.zero,
child: Text(
"Done",
style: TextStyle(
color: CupertinoColors.activeBlue,
),
),
onPressed: () {},
),
largeTitle: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text("Large Tile", style: TextStyle(
color: CupertinoColors.white,
),),
),
previousPageTitle: "Back",
),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) => Padding(
padding: const EdgeInsets.only(left: 10,right: 10),
child: Container(
color: CupertinoColors.systemGrey3,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network("https://media.wired.com/photos/593261cab8eb31692072f129/master/pass/85120553.jpg",fit: BoxFit.fill,),
)
),
),
childCount: 10
)
)
],
),
);
}
}Conclusion:
In the end, CupertinoSilverNavigationBar is a very useful tool in enhancing the user experience. It aids the user to understand and keep their expectations fulfilled. It is widely used to give application ios styled themes and user interface.
It is very easy to use it and we can do numerous things using it. We can make it adapt to our code as per our requirements. It was just a small overview of the CupertinoSilverNavigationBar class its functionality and implementation. I hope the time you spent reading this article turns out to be productive. You can try implementing and modifying this code as per your needs.
Feel free to reach out to me for any suggestions or corrections where I can improve.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
