Flutter: 2 differents appbars in same page

user_18714029 0
Viewed 87

Is it possible to have two different appbars in the same page in flutter? I need one for the header, but after some scroll, another comes with the rest of the body and takes the place of the initial one.

flutter-web flutter
2 Answers

You might want to try the package flutter_sticky_header.

Code Sample

import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';

class StickyHeaderListWidget extends StatelessWidget {
  final String header;
  final int length;

  const StickyHeaderListWidget({
    Key? key,
    required this.header,
    this.length = 10,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverStickyHeader(
      header: AppBar(title: Text(header)),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
          (_, i) => ListTile(title: Text('List tile $i')),
          childCount: length,
        ),
      ),
    );
  }
}

class StickyHeadersPage extends StatelessWidget {
  const StickyHeadersPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: CustomScrollView(
        slivers: [
          StickyHeaderListWidget(header: 'Header 1'),
          StickyHeaderListWidget(header: 'Header 2'),
          StickyHeaderListWidget(header: 'Header 3', length: 20),
        ],
      ),
    );
  }
}

Result

enter image description here

user_99423460

Yes, when you create a child you can create new scaffold which can add a new AppBar

ex..

Return Scaffold(
appBar: AppBar(),
body: Center(
child: Scaffold(
appBar: AppBar()
)
)
)

then if you want anything else built you can add it to the body ofthe second scaffold.

user_157634940
Related