How to put an iOS style dismissible bar on flutter modal sheet

Question

I am pretty new to flutter and trying to achieve a dismissible bar for my modalSheet. Something like this image:

I can only think of a stack. But that would make the code complex. Please let me know if there is a better way.

Answer 1

To display showModalBottomSheet as IOS modal style:

1- Create new Dart Class IOSModalStyle with this full code:

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- You can call above class from anywhere like this:

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...'),
      ),
    );
  },
);

Result: