How can I replace appBar with SliverAppBar in my code? - flutter

Question

class _HomepageState extends State<Homepage> {
int pageNum = 0;
final pages = [
TodayPage(), /*HistoryPage()*/
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Today Medicine List'),
titleTextStyle: TextStyle(
fontSize: 30.0, fontWeight: FontWeight.w400, color: Colors.white),
elevation: 5.0,
),
body: pages[pageNum],
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blueAccent,
onPressed: () {
Addingpage();
},
child: const Icon(CupertinoIcons.add)),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
bottomNavigationBar: ButtonBottomAppBar(),
);
}
This is code what I have. I want to replace appBar with SliverAppBar.
#override
Widget build(BuildContext context) {
return Scaffold(
// appBar: AppBar(
// title: Text('Today Medicine List'),
// titleTextStyle: TextStyle(
// fontSize: 30.0, fontWeight: FontWeight.w400, color: Colors.white),
// elevation: 5.0,
// ),
body: CustomScrollView(
slivers: [
SliverAppBar(
title: Text('Today Medicine List'),
floating: true,
flexibleSpace: Placeholder(),
expandedHeight: 200,
),
],
),
pages[pageNum],
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blueAccent,
onPressed: () {
Addingpage();
},
child: const Icon(CupertinoIcons.add)),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
bottomNavigationBar: ButtonBottomAppBar(),
);
}
So I put CustomScrollView slivers code at body part, and page[pageNum] doesn't work properly.
How can I make it work both CustomScrollView() and page[pageNum] at one body:

Answer 1

The floatingActionButton is used with the Scaffold.
new Scaffold(
body: new CustomScrollView(
slivers: <Widget>[
new SliverAppBar(...),
...
],
),
floatingActionButton: new FloatingActionButton(...),
);
You can also use a Stack above the CustomScrollView and the FloatingActionButton (in a Positioned widget) as well.
Try replacing the SliverAppBar this way
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 MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
pinned: true,
floating: true,
flexibleSpace: FlexibleSpaceBar(
title: Text('Today Medicine List'),
background: FlutterLogo(),
),
expandedHeight: 200,
),
SliverToBoxAdapter(
child: Container(
height: 500,
color: Colors.red,
child: pages[pageNum],
),
),
],
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blueAccent,
onPressed: () {
Addingpage();
},
child: const Icon(CupertinoIcons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
bottomNavigationBar: ButtonBottomAppBar(),
);
}
}