DraggableScrollableSheet

It is declared like this:

DraggableScrollableSheet(
//...
)

WARNING:

It is recommended to put the widget inside a stack so that it is on top of the other widgets.

It would look like this:

Stack(children: <Widget>[
   //DraggableScrollableSheet(...
 ]
)

A DraggableScrollableSheet needs a builder

DraggableScrollableSheet(

builder: (context, scrollController){
return // Widgets example Container()
}

)

Inside the builder it is necessary to have a scroll type widget such as a SingleChildScrollView. And to make it move, it is necessary to connect it with the scrollController with: controller: scrollController

DraggableScrollableSheet(
//  initialChildSize: 0.1,
//  minChildSize: 0.1,
//  maxChildSize: 1,
                
  builder: (context, scrollController) {
    return Container(
       
         child: SingleChildScrollView(
         controller: scrollController,
        // other widgets          
      )
    );
  }
)

Options

The DraggableScrollableSheet have different options:

DraggableScrollableSheet(

// Initial size
initialChildSize: 0.1, // from 0.0 to 1.0

// Min size
minChildSize: 0.1, // from 0.0 to 1.0

// Max size
maxChildSize: 1, // from 0.0 to 1.0

  builder: (context, scrollController) {
    return Container(
       
         child: SingleChildScrollView(
         controller: scrollController,
        // other widgets          
      )
    );
  }
)

And finally, you can add decoration to the container to enhance the visual appearance.

DraggableScrollableSheet(

// Initial size
initialChildSize: 0.1, // from 0.0 to 1.0

// Min size
minChildSize: 0.1, // from 0.0 to 1.0

// Max size
maxChildSize: 1, // from 0.0 to 1.0

  builder: (context, scrollController) {
    return Container(
       
         child: SingleChildScrollView(
         controller: scrollController,
        // other widgets          
      ),
      
      // decoration here
  decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.only(
        topLeft: Radius.circular(50),
        topRight: Radius.circular(50),
      )
    ),
      
    );
  }
)

If you are running this on the web, it would not work, to get this to work you need to put the following code:

// This in 👇
//class MyApp extends StatelessWidget {
//  @override
//  Widget build(BuildContext context) {
//    return MaterialApp(


        scrollBehavior: MaterialScrollBehavior().copyWith(
          dragDevices: {
            PointerDeviceKind.mouse,
            PointerDeviceKind.touch,
            PointerDeviceKind.stylus,
            PointerDeviceKind.unknown
          },
        ),

Also, you will need to import import 'package:flutter/gestures.dart';

Widget example:

class ImageRoundedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(30),
        image: const DecorationImage(
            image: NetworkImage(
              "https://www.onadesants.cat/wp-content/uploads/2021/05/radio-targeta.jpg",
            ),
            fit: BoxFit.cover),
        boxShadow: const [
          BoxShadow(
            color: Colors.black,
            blurRadius: 50.0, // soften the shadow
            spreadRadius: 2.0, //extend the shadow
            offset: Offset(
              15.0, // Move to right 10  horizontally
              8.0, // Move to bottom 10 Vertically
            ),
          )
        ],
      ),
    );
  }
}