scrollable_panel

pub package

drag to expand and then can scroll contents. similar "Nearby spots" panel on google map app.

https://pub.dev/packages/scrollable_panel

Panel Properties

PropertiesData TypeDescription
builderScrollableWidgetBuilderbuilder for inner panel view. ScrollableWidgetBuilder type define in draggable_scrollable_sheet.dart. provide PanelScrollController that extends ScrollController.
controllerPanelControllercontrol panel from some interaction like button.
defaultPanelStatePanelStateset default panel state. (default value PanelState.open)
defaultPanelSizedoubleset default panel height factor (default value 0.25)
minPanelSizedoubleset minimum panel height factor. (default value 0)
maxPanelSizedoubleset maximum panel height factor. (default value 1.0)
onOpenVoidCallbackif non-null, this callback is called when panel state become open
onCloseVoidCallbackif non-null, this callback is called when panel state become close
onExpandVoidCallbackif non-null, this callback is called when panel state become expand

PanelController actions

ActionData TypeDescription
openvoidopen panel. panel animate to defaultPanelSize.
expandvoidexpand panel. panel animate to maxPanelSize.
closevoidclose panel. panel animate to minPanelSize.
animateTodoubleanimate panel to value height.

Usage

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PanelController _panelController = PanelController();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('scrollable panel'),
      ),
      body: Stack(
        children: <Widget>[
          InkWell(
            onTap: () {
              _panelController.toDefault();
            },
            child: _FirstView(),
          ),
          ScrollablePanel(
            controller: _panelController,
            builder: (context, controller) {
              return SingleChildScrollView(
                controller: controller,
                child: _SecondView(),
              );
            },
          ),
        ],
      ),
    );
  }
}

TODO

  • write README.md and dartdoc
  • null-safety support
  • write test code
  • add List<double> anchor property to use multi snapping point.

Libraries

scrollable_panel