[bottomBar] Buttons wrapped by BottomBarVisibility cannot be clicked

[l-7-l]

version: 0.4.1

SheetScaffold(
          appBar: appBar,
          bottomBar: StickyBottomBarVisibility(
            child: ElevatedButton(
              onPressed: () {  
                print("111");
                // context.push("/submit-orders");
              },
              child: Text("222"),
            ),
          ),
          body: Padding(padding: Insets.lg, child: child),
        ),

[fujidaiti]

Can you post the minimal executable code to reproduce this issue?

[l-7-l]

looks a bit strange
ModalSheetContainer should not use StickyBottomBarVisibility inside Padding.
However, when using the package api directly, it is possible to use StickyBottomBarVisibility within Padding.

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // TRY THIS: Try running your application with "flutter run". You'll see
        // the application has a purple toolbar. Then, without quitting the app,
        // try changing the seedColor in the colorScheme below to Colors.green
        // and then invoke "hot reload" (save your changes or press the "hot
        // reload" button in a Flutter-supported IDE, or press "r" if you used
        // the command line to start the app).
        //
        // Notice that the counter didn't reset back to zero; the application
        // state is not lost during the reload. To reset the state, use hot
        // restart instead.
        //
        // This works for code too, not just values: Most code changes can be
        // tested with just a hot reload.
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return CupertinoStackedTransition(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: Center(
            child: ElevatedButton(
          onPressed: () {
            showSheetWidget(context);
          },
          child: Text("showModalShert"),
        )),
      ),
    );
  }
}

showSheetWidget(BuildContext context) {
  // Navigator.push(
  //   context,
  //   CupertinoModalSheetRoute(
  //     builder: (context) => SheetDismissible(
  //       child: ScrollableSheet(
  //         child: SafeArea(
  //           child: SheetContentScaffold(
  //             bottomBar: Padding(
  //               padding: EdgeInsets.all(16),
  //               child: StickyBottomBarVisibility(
  //                 child: ElevatedButton(
  //                   onPressed: () {
  //                     print(111);
  //                   },
  //                   child: Text("button"),
  //                 ),
  //               ),
  //             ),
  //             body: const SheetWidget(),
  //           ),
  //         ),
  //       ),
  //     ),
  //   ),
  // );
  Navigator.push(
    context,
    CupertinoModalSheetRoute(
      builder: (context) => SheetDismissible(
        child: ModalSheetContainer(
          bottomBar: StickyBottomBarVisibility(
            child: ElevatedButton(
              onPressed: () {
                print(111);
              },
              child: Text("button"),
            ),
          ),
          child: const SheetWidget(),
        ),
      ),
    ),
  );
}

class SheetWidget extends StatelessWidget {
  const SheetWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: SingleChildScrollView(
        child: Column(),
      ),
    );
  }
}

class SheetScaffold extends StatelessWidget {
  const SheetScaffold({
    super.key,
    required this.body,
    this.bottomBar,
    this.color,
    this.appBar,
  });

  final Widget body;
  final Widget? bottomBar;
  final Color? color;
  final Widget? appBar;

  @override
  Widget build(BuildContext context) {
    final titleMediumSize =
        Theme.of(context).textTheme.titleMedium?.fontSize ?? 16;

    return ClipRRect(
      borderRadius: BorderRadius.circular(8),
      child: SheetContentScaffold(
        appBar: appBar == null
            ? null
            : PreferredSize(
                preferredSize: Size.fromHeight(titleMediumSize + 8 * 4),
                child: appBar!,
              ),
        backgroundColor: color ?? Theme.of(context).cardColor,
        bottomBar: bottomBar == null
            ? null
            : Padding(
                padding: EdgeInsets.all(16),
                child: bottomBar!,
              ),
        body: body,
      ),
    );
  }
}

const _physics = StretchingSheetPhysics(parent: SnappingSheetPhysics());

class ModalSheetContainer extends StatelessWidget {
  const ModalSheetContainer({
    super.key,
    required this.child,
    this.title,
    this.appBar,
    this.initHeightFactor = 0.5,
    this.minHeightFactor = 0.5,
    this.maxHeightFactor = 1,
    this.bottomBar,
    this.physics,
  });

  final Widget? title;
  final Widget? appBar;
  final Widget child;
  final double initHeightFactor;
  final double minHeightFactor;
  final double maxHeightFactor;
  final Widget? bottomBar;
  final SheetPhysics? physics;

  @override
  Widget build(BuildContext context) {
    return ScrollableSheet(
      initialExtent: Extent.proportional(initHeightFactor),
      maxExtent: Extent.proportional(maxHeightFactor),
      minExtent: Extent.proportional(minHeightFactor),
      physics: physics ?? _physics,
      child: SafeArea(
        child: SheetScaffold(
          appBar: appBar,
          bottomBar: bottomBar,
          body: Padding(padding: EdgeInsets.all(16), child: child),
        ),
      ),
    );
  }
}

[fujidaiti]

Adding extra space around a BottomBarVisibility widget is a source of problems and should be avoided whenever possible.

Prefer this:

StickyBottomBarVisibility(
  child: Padding(child: ElevatedButton(...)),
);

to this:

Padding(
  child: StickyBottomBarVisibility(child: ElevatedButton(...)),
);

For the same reason, avoid adding extra space between a sheet widget and the SheetContentScaffold. So it is better to wrap the ScrollableSheet with the SafeArea than to wrap the SheetScaffold with the SafeArea.

SafeArea(
  child: ScrollableSheet(
    child: SheetContentScaffold(...),
  ),
);

One more thing. Since the SheetContentScaffold is a thin wrapper around the Scaffold, you don't need to use the Scaffold inside the SheetContentScaffold.

class SheetWidget extends StatelessWidget {
  const SheetWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold( // You can remove this.
      resizeToAvoidBottomInset: true,
      body: SingleChildScrollView(
        child: Column(),
      ),
    );
  }
}

[l-7-l]

thank you for your answer and have a nice time

[fujidaiti]

Closing this as the BottomBarVisibility has been removed in v0.11.0.