How can I replace appBar with SliverAppBar in my code?

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(),
    );
  }
}