BottomSheet in Flutter

A Bottom Sheet is a UI element that slides up from the bottom of the screen. It’s a versatile way to present supplementary content or actions to the user without completely obscuring the main app content. They are commonly used for things like filters, settings menus, or sharing options.

Types of Bottom Sheets

There are two main types of Bottom Sheets in Flutter:

1. Modal Bottom Sheet: This type of bottom sheet disables interaction with the main content behind it. It requires user interaction (like button clicks) to dismiss it.
2. Persistent Bottom Sheet: This type of bottom sheet allows the user to interact with the content behind it. It can be dragged up or down to dismiss or reveal more content.

Showing a Modal Bottom Sheet with Button Press

Here’s an example of showing a modal bottom sheet with a button press event:

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(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
          child: ElevatedButton(
              child: Text("Show"),
              onPressed: show)
      )

    );
  }

  void show() {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          height: 200, // Set your desired height
          child: Center(
            child: Text('This is a Modal Bottom Sheet'),
          ),
        );
      },
    );
  }
}