[BUG] showFlexibleBottomSheet How to add header

[zhaoxiuyu]

showFlexibleBottomSheet How to add header

[internetova]

@zhaoxiuyu
Hi! show Flexible Bottom Sheet does not have a separate header creation. If you need a header, make it yourself when creating the bottom sheet content. For example, you can use Scaffold and App Bar.

class _BottomSheet extends StatelessWidget {
  final ScrollController scrollController;
  final double bottomSheetOffset;

  const _BottomSheet({
    required this.scrollController,
    required this.bottomSheetOffset,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Header'),
        automaticallyImplyLeading: false,
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        controller: scrollController,
        children: [
          Text(
            'position $bottomSheetOffset',
            style: Theme.of(context).textTheme.titleLarge,
          ),
          Column(
            children: _children,
          ),
        ],
      ),
    );
  }
}

2024-03-25.13.33.50.mov

You can create a separate header from the showStickyFlexibleBottomSheet:

void _showWithHeader() {
    showStickyFlexibleBottomSheet<void>(
      minHeight: 0,
      initHeight: 0.5,
      maxHeight: 0.8,
      headerHeight: 100,
      context: context,
      bottomSheetColor: Colors.teal,
      bottomSheetBorderRadius: const BorderRadius.only(
        topLeft: Radius.circular(40),
        topRight: Radius.circular(40),
      ),
      headerBuilder: (context, offset) {
        return DecoratedBox(
          decoration: const BoxDecoration(color: Colors.yellow),
          child: Center(
            child: Text(
              'Header',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ),
        );
      },
      bodyBuilder: (context, offset) {
        return SliverChildListDelegate(List.generate(
          40,
          (index) => Text('Item $index'),
        ));
      },
    );
  }

2024-03-25.13.27.48.mov