bottom_sheet_plus #

Demonstrating the three segment BottomSheet with drag and drop support and damping effects.

Getting Started #

Before do anything, Provide AnimationController #

  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      value: 1.0,
      duration: const Duration(milliseconds: 500),
      reverseDuration: const Duration(milliseconds: 500),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

Scaffold bottomSheet #

 Scaffold(
    appBar: AppBar(
      elevation: 0.5,
      backgroundColor: Colors.white,
      title: const Text(
        'BottomSheetBehavior',
        style: TextStyle(fontSize: 17, color: Colors.black),
      ),
    ),
    bottomSheet: BottomSheetViewPlus(
      animationController: controller,
      elevation: 1.0,
      backgroundColor: Colors.deepOrange[200],
      isDragMode: true,
      enableHalf: true,
      isPersistent: true,
      constraints: BoxConstraints(
        maxHeight: MediaQuery.of(context).size.height * 0.75,
        minHeight: 150,
      ),
      onBehaviorChanged: _onBehaviorChanged,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(16),
          topRight: Radius.circular(16),
        ),
      ),
      builder: (context) => Container(),
     ),
   )

Just Widget #

   Align(
      alignment: Alignment.bottomCenter,
      child: BottomSheetViewPlus(
        animationController: controller,
        elevation: 1.0,
        backgroundColor: Colors.deepOrange[200],
        isDragMode: true,
        enableHalf: true,
        isPersistent: true,
        constraints: BoxConstraints(
          maxHeight: MediaQuery.of(context).size.height * 0.75,
          minHeight: 150,
        ),
        onBehaviorChanged: _onBehaviorChanged,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16),
            topRight: Radius.circular(16),
          ),
        ),
        builder: (context) => Container(),
      ),
    )