Modify bottom Navigation with improved drag behavior

[maheshj01]

https://github.com/user-attachments/assets/70d2adab-154c-4bd9-b6fd-f14be5854114

code sample

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DraggableScrollableDemo(),
    );
  }
}

class DraggableScrollableDemo extends StatefulWidget {
  @override
  State<DraggableScrollableDemo> createState() =>
      _DraggableScrollableDemoState();
}

class _DraggableScrollableDemoState extends State<DraggableScrollableDemo> {
  DraggableScrollableController controller = DraggableScrollableController();
  final double maxScrollHeight = 0.8;
  final double minScrollHeight = 0.25;

  void showSheet(context) {
    showModalBottomSheet<void>(
      context: context,
      isScrollControlled: true,
      builder: (context) => DraggableScrollableSheet(
        expand: false,
        initialChildSize: 0.65,
        minChildSize: 0.2,
        maxChildSize: 0.65,
        builder: (BuildContext context, ScrollController scrollController) {
          return Column(
            children: [
              SingleChildScrollView(
                physics: const ClampingScrollPhysics(),
                controller: scrollController,
                child: Container(
                  height: 50,
                  color: Colors.red,
                  child: const Center(
                    child: Text("Draggable area"),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.grey.shade100,
                  child: ListView.builder(
                    shrinkWrap: true,
                    controller: scrollController,
                    itemCount: 100,
                    itemBuilder: (context, position) {
                      return ListTile(
                        title: Text('Item ${position.toString()}'),
                      );
                    },
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showSheet(context);
        },
        child: const Icon(Icons.add),
      ),
      appBar: AppBar(
        title: const Text("Draggable Scrollable Sheet"),
      ),
      body: const Stack(
        children: [
          Center(child: Text("Main Content Here")),
          // DraggableScrollableSheet
        ],
      ),
    );
  }
}