I am developing a Flutter application and I want to implement an app bar similar to the one used in the iOS settings (or alarm) app. The main feature I am looking for is that when the page's content is scrolled, the title should be hidden behind the top bar, and a shrunken version of the title should appear at the center of the top bar. How can I achieve this effect in Flutter? Are there any specific widgets or plugins that can help me implement this behavior?
And the code is self explanatory:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(TestApp());
class TestApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
CupertinoSliverNavigationBar(
largeTitle: Text('Settings'),
)
];
},
body: Center(
child: Material(child: Text('Home Page')),
),
),
);
}
}
The code is from a video I came across recently: