Flutter Bottom Sheet with Transparent Background and Close Button

How to Create a Flutter Bottom Sheet with Transparent Background and Close Button (with Example)

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RoundedBottomSheet(),
    );
  }
}
class RoundedBottomSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomSheet ResearchThinker'),
      ),
      body: Column(
        children: [

          Center(
            child: ElevatedButton(
              onPressed: () {
                showModalBottomSheet(
                  backgroundColor: Colors.transparent,
                  context: context,
                  builder: (BuildContext context) {
                    return Wrap(
                      children: [
                        Container(
                          color:Colors.transparent,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              InkWell(
                                onTap:(){
                                  Navigator.pop(context);
                                },
                                child: Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Icon(Icons.close,size:30,color:Colors.red),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          width:MediaQuery.of(context).size.width,
                          height: MediaQuery.of(context).size.height/1.8,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20.0),
                              topRight: Radius.circular(20.0),
                            ),
                          
                          ),
                          child: Padding(
                            padding: EdgeInsets.all(20.0),
                            child: Center(child: Text('Bottom Sheet with Transparent close button')),
                          ),
                        ),
                      ],
                    );
                  },
                );
              },
              child: Text('Open Bottom Sheet with Rounded Corner and transparent background for close button'),
            ),
          ),
          Text("ResearchThinker"),

        ],
      ),
    );
  }
}

In this way, you can create a transparent background for the close button, and you can even add any icon or text. Additionally, we use rounded corners, which you can change accordingly.
If you have any queries, you can message us or leave a comment related to Flutter bottom sheets, and we will reply as soon as possible.