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:

CodePudding user response：

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

CodePudding user response：

create a CustomScrollView that contains a SliverAppBar and a SliverList. In addition, remove any app bars that you provide to the Scaffold widget.

Scaffold(
  // No appBar property provided, only the body.
  body: CustomScrollView(
      // Add the app bar and list of items as slivers in the next steps.
      slivers: <Widget>[]),
);

Add an app bar to the CustomScrollView. Flutter provides the SliverAppBar widget which, much like the normal AppBar widget, uses the SliverAppBar to display a title, tabs, images and more.

CustomScrollView(
  slivers: [
    // Add the app bar to the CustomScrollView.
    const SliverAppBar(
      // Provide a standard title.
      title: Text(title),
      // Allows the user to reveal the app bar if they begin scrolling
      // back up the list of items.
      floating: true,
      // Display a placeholder widget to visualize the shrinking size.
      flexibleSpace: Placeholder(),
      // Make the initial height of the SliverAppBar larger than normal.
      expandedHeight: 200,
    ),
  ],
)

Here is a full example

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) {
    const title = 'Floating App Bar';

    return MaterialApp(
      title: title,
      home: Scaffold(
        // No appbar provided to the Scaffold, only a body with a
        // CustomScrollView.
        body: CustomScrollView(
          slivers: [
            // Add the app bar to the CustomScrollView.
            const SliverAppBar(
              // Provide a standard title.
              title: Text(title),
              // Allows the user to reveal the app bar if they begin scrolling
              // back up the list of items.
              floating: true,
              // Display a placeholder widget to visualize the shrinking size.
              flexibleSpace: Placeholder(),
              // Make the initial height of the SliverAppBar larger than normal.
              expandedHeight: 200,
            ),
            // Next, create a SliverList
            SliverList(
              // Use a delegate to build items as they're scrolled on screen.
              delegate: SliverChildBuilderDelegate(
                // The builder function returns a ListTile with a title that
                // displays the index of the current item.
                (context, index) => ListTile(title: Text('Item #$index')),
                // Builds 1000 ListTiles
                childCount: 1000,
              ),
            ),
          ],
        ),
      ),
    );
  }
}