blob: 281368337f38fcaf27478efd9240a4723d81b234 [file] [log] [blame]
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Flutter code sample for [CupertinoSliverNavigationBar].
import 'package:flutter/cupertino.dart';
void main() => runApp(const SliverNavBarApp());
class SliverNavBarApp extends StatelessWidget {
const SliverNavBarApp({super.key});
@override
Widget build(BuildContext context) {
return const CupertinoApp(
theme: CupertinoThemeData(brightness: Brightness.light),
home: SliverNavBarExample(),
);
}
}
class SliverNavBarExample extends StatelessWidget {
const SliverNavBarExample({super.key});
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
// A ScrollView that creates custom scroll effects using slivers.
child: CustomScrollView(
// A list of sliver widgets.
slivers: <Widget>[
const CupertinoSliverNavigationBar(
leading: Icon(CupertinoIcons.person_2),
// This title is visible in both collapsed and expanded states.
// When the "middle" parameter is omitted, the widget provided
// in the "largeTitle" parameter is used instead in the collapsed state.
largeTitle: Text('Contacts'),
trailing: Icon(CupertinoIcons.add_circled),
),
// This widget fills the remaining space in the viewport.
// Drag the scrollable area to collapse the CupertinoSliverNavigationBar.
SliverFillRemaining(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
const Text('Drag me up', textAlign: TextAlign.center),
CupertinoButton.filled(
onPressed: () {
Navigator.push(context, CupertinoPageRoute<Widget>(builder: (BuildContext context) {
return const NextPage();
}));
},
child: const Text('Go to Next Page'),
),
],
),
),
],
),
);
}
}
class NextPage extends StatelessWidget {
const NextPage({ super.key });
@override
Widget build(BuildContext context) {
final Brightness brightness = CupertinoTheme.brightnessOf(context);
return CupertinoPageScaffold(
child: CustomScrollView(
slivers: <Widget>[
CupertinoSliverNavigationBar(
backgroundColor: CupertinoColors.systemYellow,
border: Border(
bottom: BorderSide(
color: brightness == Brightness.light
? CupertinoColors.black
: CupertinoColors.white,
),
),
// The middle widget is visible in both collapsed and expanded states.
middle: const Text('Contacts Group'),
// When the "middle" parameter is implemented, the larget title is only visible
// when the CupertinoSliverNavigationBar is fully expanded.
largeTitle: const Text('Family'),
),
const SliverFillRemaining(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Drag me up', textAlign: TextAlign.center),
// When the "leading" parameter is omitted on a route that has a previous page,
// the back button is automatically added to the leading position.
Text('Tap on the leading button to navigate back', textAlign: TextAlign.center),
],
),
),
],
),
);
}
}