Modify bottom Navigation with improved drag behavior

[maheshj01]

Screen.Recording.2025-01-03.at.22.03.50.mov

code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: DraggableScrollableDemo(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Draggable Scrollable Sheet"),
      ),
      body: Stack(
        children: [
          // Background content
          const Center(child: Text("Main Content Here")),

          // DraggableScrollableSheet
          DraggableScrollableSheet(
            initialChildSize: 0.3, // Initial size of the sheet
            minChildSize: 0.2, // Minimum size of the sheet
            maxChildSize: 0.8, // Maximum size of the sheet
            builder: (context, scrollController) {
              return Column(
                children: [
                  SingleChildScrollView(
                    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()}'),
                          );
                        },
                      ),
                    ),
                  ),
                ],
              );
            },
          ),
        ],
      ),
    );
  }
}