3

I’m working on the concept that you can see on the screenshot below:

design concept

Note: the arrows are not the part of the UI, but were added to demonstrate the draggable functionality.

The screen has a SliverAppBar that displays location title, Sliver body that contains location description, and has a DraggableScrollableSheet (or a similar alternative). When the location description is scrolled up, the title collapses. When the DraggableScrollableSheet is scrolled up it expands to the full height of the screen.

I tried many times to put it together, but something is always off. My last attempt was to add DraggableScrollableSheet as a ‘bottom sheet:’ in Scaffold. Since I have a BottomAppBar, it breaks the UI, and looks the following way:

current UI behavior

Scaffold

@override
Widget build(BuildContext context) {
 return Scaffold(
     body: body,
     extendBody: true,
     appBar: appBar,
     bottomSheet: hasBottomSheet
         ? DraggableScrollableSheet(
             builder:
                 (BuildContext context, ScrollController scrollController) {
               return Container(
                 color: Colors.blue[100],
                 child: ListView.builder(
                   controller: scrollController,
                   itemCount: 25,
                   itemBuilder: (BuildContext context, int index) {
                     return ListTile(title: Text('Item $index'));
                   },
                 ),
               );
             },
           )
         : null,
     backgroundColor: Colors.white,
     floatingActionButtonLocation: fab_position,
     floatingActionButton: hasActionButton ? ScannerFAB() : null,
     bottomNavigationBar: AppBarsNav(hasNavButtons: hasNavButtons));
}

Scaffold body

class LocationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScaffoldWithNav(
      hasBottomSheet: true,
      body: CustomScrollView(
        slivers: <Widget>[
          SliverBar(
              title: "Location",
              hasBackground: true,
              backgroundImagePath: 'assets/testImage.jpg'),
          SliverToBoxAdapter(
            child: Text("very long text "),
          ),
          SliverPadding(
            padding: EdgeInsets.only(bottom: 70),
          ),
        ],
      ),
    );
  }
}

BottomAppBar FAB

class ScannerFAB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      child: WebsafeSvg.asset('assets/qr-code.svg',
          color: Colors.white, height: 24, width: 24),
    );
  }
}

The FAB jumps, the content is hidden. When I set a fixed-sized container, the content comes back, but the FAB is still living its own life:)

current UI behavior2

If anyone has any idea how to solve this issue/those issues please share, I’ll be very grateful!

dev-aentgs
  • 1,218
  • 2
  • 9
  • 17
Daria Kalashnikova
  • 41
  • 5

2 Answers2

0

You can try to add another Scaffold on current body and put the DraggableScrollableSheet inside it. Then the DraggableScrollableSheet won't affect the FAB outside.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Scaffold(
      body: body,
      bottomSheet: ... // move DraggableScrollableSheet to here
    ),

    ...        
    floatingActionButton: ... // keep FAB here
    ...

  )
yellowgray
  • 4,006
  • 6
  • 28
0

You can use Stack into Body, for example:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
     children. [
      SingleChildScrollView(),
      DraggableScrollableSheet(),
     ]
    ),
    ...        
    floatingActionButton: ... // keep FAB here
    ...

  )
roger calla
  • 1