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.

score 2 · Answer 1 · answered Aug 11 '20 at 03:05

2

Is this what you are looking for modal_bottom_sheet:

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

answered Aug 11 '20 at 03:05

Jim

6,928
1
7
18

Pretty much, yeah. But I did not want to use that whole package just for the bar because I have other customisations of my own. Maybe I can look into the code to see how it is implemented there. Thanks. – Faizyy Aug 11 '20 at 05:56
1

@Faizyy I have posted a new answer for that – AnasSafi Sep 25 '22 at 22:35

score 1 · Accepted Answer · answered Sep 25 '22 at 22:33

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:

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

2 Answers2