detailed static method

dynamic detailed({ required BuildContext context, required ModalTitle title, required String message, ModalDetail? detail, required ModalButton button, })

Shows a detailed dialog with a title, a message, a button and an optional detail. If the color of the button is not defined, it will be #FCE444 by default. If the color of the title is not defined, it will be #303F9F by default. If the detail is shown, a divider will be shown between the button and the detail. You can define the text that will be shown when the detail is hidden and the text that will be shown when the detail is expanded.

Implementation

static detailed({
  required BuildContext context,
  required ModalTitle title,
  required String message,
  ModalDetail? detail,
  required ModalButton button,
}) {
  return showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return _BaseAlertDialog(
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Divider(
              color: Colors.transparent,
              height: 18,
            ),
            Align(
              alignment: Alignment.center,
              child: Text(
                title.text,
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: title.color ?? const Color(0xFF303F9F),
                  fontWeight: FontWeight.w500,
                  fontSize: 20,
                ),
              ),
            ),
            const Divider(
              color: Colors.transparent,
              height: 9,
            ),
            Align(
              alignment: Alignment.center,
              child: Text(
                message,
                textAlign: TextAlign.center,
                style: const TextStyle(
                  color: Color(0xFF52575C),
                  fontWeight: FontWeight.w500,
                  fontSize: 14,
                ),
              ),
            ),
            const Divider(
              color: Color(0xFFDBDDE0),
              height: 36,
            ),
            Align(
              alignment: Alignment.center,
              child: ElevatedButton(
                onPressed: () => Navigator.pop(context),
                style: ButtonStyle(
                  backgroundColor: MaterialStatePropertyAll(
                    button.color ?? const Color(0xFFFCE444),
                  ),
                  minimumSize: const MaterialStatePropertyAll(
                    Size(double.infinity, 35),
                  ),
                  shape:
                      const MaterialStatePropertyAll<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(6),
                      ),
                    ),
                  ),
                ),
                child: Text(
                  button.text,
                  style: TextStyle(
                    color: button.textColor ?? const Color(0xFF25282B),
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
            Visibility(
              visible: detail != null,
              child: Column(
                children: [
                  const Divider(
                    color: Color(0xFFDBDDE0),
                    height: 36,
                  ),
                  Align(
                    alignment: Alignment.center,
                    child: _HiddenContent(
                      visibleText: detail!.visibleText,
                      hiddenText: detail.hiddenText,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      );
    },
  );
}