Creating a Rounded Bottom Sheet in Flutter

How to Create a Rounded Top Side Bottom Sheet in Flutter ?

In Flutter, bottom sheets play a major role in many pages, reducing clutter or facilitating less frequent operations. We can use a bottom sheet through showModalBottomSheet to create and implement it according to our needs. However, in this tutorial, we will be crafting a bottom sheet with rounded corners at the top.

import 'package:flutter/material.dart';
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('Bottom Sheet by ResearchThinker'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return Container(
                  width:MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height/2.5,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20.0),
                      topRight: Radius.circular(20.0),
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 5,
                        blurRadius: 7,
                        offset: Offset(0, 3), // changes position of shadow
                      ),
                    ],
                  ),
                  child: Padding(
                    padding: EdgeInsets.all(20.0),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Text('Bottom Sheet Content'),
                        SizedBox(height: 20),
                        ElevatedButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          child: Text('Close'),
                        ),
                      ],
                    ),
                  ),
                );
              },
            );
          },
          child: Text('Open Bottom Sheet with Rounded Corner'),
        ),
      ),
    );
  }
}

By following these steps, we can create a rounded bottom sheet in Flutter, which can be utilized wherever necessary by simply employing RoundedBottomSheet()