Как разместить запретную полосу в стиле iOS на модальном листе Flutter

Question

Я новичок в трепетании и пытаюсь добиться недопустимой панели для моего modalSheet. Что-то вроде этого изображения:

Я могу думать только о стеке. Но это сделало бы код сложным. Пожалуйста, дайте мне знать, если есть лучший способ.

Answer 1

Для отображенияshowModalBottomSheetкак модальный стиль IOS :

1- Создать новый класс дартсIOSModalStyleс этим полным кодом:

      import 'package:flutter/material.dart';

class IOSModalStyle extends StatelessWidget {
  final Widget childBody;

  const IOSModalStyle({
    Key? key,
    required this.childBody,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(16.0),
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        color: Colors.transparent,
        borderRadius: const BorderRadius.all(Radius.circular(16.0)),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          _dividerWidget(),
          Container(
            decoration: BoxDecoration(
              color: Colors.white, // color of card
              borderRadius: const BorderRadius.all(Radius.circular(16.0)),
            ),
            height: 200, // body container height
            width: double.infinity,
            child: childBody,
          )
        ],
      ),
    );
  }

  Widget _dividerWidget() {
    return FractionallySizedBox(
      widthFactor: 0.2, // width of top divider bar
      child: Container(
        margin: const EdgeInsets.symmetric( // margin of top divider bar
          vertical: 12.0,
        ),
        child: Container(
          height: 5.0,
          decoration: BoxDecoration(
            color: Colors.white, // color of top divider bar
            borderRadius: const BorderRadius.all(Radius.circular(2.5)),
          ),
        ),
      ),
    );
  }
}

2- Вы можете вызвать класс выше из любого места следующим образом:

      showModalBottomSheet<void>(
  isScrollControlled: true, // to full height
  useSafeArea: true, // to show under status bar
  backgroundColor: Colors.transparent, // to show BorderRadius of Container
  context: context,
  builder: (BuildContext context) {
    return IOSModalStyle(
      childBody: Center(
        child: Text('Hello, Im Anas...'),
      ),
    );
  },
);

Результат:

Answer 2

Это то, что вы ищете https://pub.dev/packages/modal_bottom_sheet:

showBarModalBottomSheet(
                              expand: true,
                              context: context,
                              backgroundColor: Colors.transparent,
                              builder: (context, scrollController) =>
                                  ModalInsideModal(
                                      scrollController: scrollController),
                            )),