Вы разработчик Flutter и хотите улучшить визуальную привлекательность нижнего листа вашего приложения? Один из эффективных способов сделать это — добавить круговой радиус вверху виджета showModalBottomSheet. В этой статье мы рассмотрим различные методы достижения этого эффекта, дополненные разговорными объяснениями и примерами кода. Итак, приступим!

Метод 1: Виджет ClipRRect
Первый метод предполагает использование виджета ClipRRect для обрезки верхних углов showModalBottomSheet. Виджет ClipRRect позволяет скруглить углы любого дочернего виджета, придавая ему круглый вид. Вот пример:

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20.0),
        topRight: Radius.circular(20.0),
      ),
      child: Container(
        // Your bottom sheet content goes here
        child: Text('Hello, Flutter!'),
      ),
    );
  },
);

Метод 2: BoxDecoration
Другой подход предполагает использование класса BoxDecoration для добавления кругового радиуса к верхней части showModalBottomSheet. Класс BoxDecoration позволяет вам определять различные визуальные эффекты для ваших виджетов, включая радиусы границ. Вот пример:

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20.0),
          topRight: Radius.circular(20.0),
        ),
      ),
      child: Container(
        // Your bottom sheet content goes here
        child: Text('Hello, Flutter!'),
      ),
    );
  },
);

Метод 3: пользовательский модальный лист
Если вам нужны дополнительные параметры настройки, вы можете создать собственный модальный лист с нуля. Таким образом, вы получаете полный контроль над дизайном и поведением нижнего листа. Вот пример того, как можно добиться круглого верхнего радиуса:

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  builder: (BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.6,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20.0),
          topRight: Radius.circular(20.0),
        ),
      ),
      child: SingleChildScrollView(
        child: Column(
          children: [
            // Your bottom sheet content goes here
            Text('Hello, Flutter!'),
          ],
        ),
      ),
    );
  },
);

В этой статье мы рассмотрели различные методы добавления кругового радиуса в верхнюю часть showModalBottomSheet во Flutter. Используя виджет ClipRRect, класс BoxDecoration или создав собственный модальный лист, вы можете добиться желаемого визуального эффекта. Не стесняйтесь экспериментировать с этими методами и настраивать их в соответствии с дизайном вашего приложения. Приятного кодирования!