How do you adjust the height and borderRadius of a BottomSheet in Flutter?

Adjusting the height and border radius of BottomSheet in Flutter typically involves several key points, including the use of layout constraints and adding decoration properties. Below are the specific implementation methods:

1. Adjusting Height

The height of BottomSheet is by default determined by the height of its internal content. To set a specific height, wrap it with a container of specific height (e.g., Container). For example:

dart
void _showBottomSheet(BuildContext context) {
  showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 200, // Set the height of BottomSheet
        color: Colors.white,
        child: Center(
          child: Text('This is a custom-height BottomSheet'),
        ),
      );
    },
  );
}

2. Adjusting Border Radius

To add border radius to BottomSheet, use the decoration property of Container and set borderRadius via BoxDecoration. For example:

dart
void _showBottomSheet(BuildContext context) {
  showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 200,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20.0),
            topRight: Radius.circular(20.0),
          ), // Set the top corner radius
        ),
        child: Center(
          child: Text('This is a BottomSheet with border radius'),
        ),
      );
    },
  );
}

Practical Application

Consider a scenario where you develop an application that displays a BottomSheet with a custom height and rounded top corners upon button click. Achieve this by wrapping the Container and configuring the height and decoration as shown in the code snippets above.

This approach not only makes the BottomSheet appear more suitable for specific design requirements but also enhances the user experience. Through the provided example code, it is evident how Flutter's flexibility enables developers to implement various custom UI components.