Simplify usage of iOS-11-style large titles #149625
Description
The large title styles that were introduced with iOS 11 and are commonly used in iOS apps. Creating this kind of common effect should be easy to achieve within Flutter. However, currently implementing them requires knowledge of slivers, which are a somewhat advanced topic that may seem scary to some developers. We should see if we can provide some kind of a simpler wrapper widget to make this effect more approachable.
This is the code that developers currently have to write to get the desired effect:
class SliverNavBarExample extends StatelessWidget {
const SliverNavBarExample({super.key});
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: CustomScrollView(
slivers: <Widget>[
const CupertinoSliverNavigationBar(
largeTitle: Text('Contacts'),
trailing: Icon(CupertinoIcons.add_circled),
),
SliverList.builder(
itemCount: 5,
itemBuilder: (BuildContext context, int index) {
return CupertinoListSection(
header: Text(['S1', 'S2', 'S3', 'S4', 'S5'][index % 5]),
children: const [
Text('C1'),
Text('C2'),
Text('C3'),
Text('C4'),
Text('C5'),
],
);
},
),
],
),
);
}
}It should also be noted that CupertinoPageScaffold with its CupertinoPageScaffold.navigationBar property sends developers down the wrong path. Setting up the navigation bar that way will not give you the large titles style.
Unrelated-related: The CupertinoListSection could also be more efficient by allowing for lazily built children (see #119558).
Metadata
Metadata
Assignees
Labels
Type
Projects
Status