Bootstrap Like Modal: BSModal

Post All Questions on StackOverflow, and tag @CatTrain (user:16200950)

https://stackoverflow.com/

Importing:

YAML:

bootstrap_like_modal: ^0.0.1

Dart:

import 'package:bootstrap_like_modal/bootstrap_like_modal.dart';

Simple Example:

import 'package:flutter/material.dart';
import 'package:bootstrap_like_modal/bootstrap_like_modal.dart';

void main() {
  BSModal modal = BSModal(
    title: const Text("Title"),
    content: const Text("Content"),
  );
  modal.actions = [
    ElevatedButton(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(Colors.red),
      ),
      child: Text("Close"),
      onPressed: () {
        modal.hide();
      },
    ),
  ];

  runApp(
    MaterialApp(
      home: Scaffold(
        body: Builder(
          builder: (context) {
            return ElevatedButton(
              child: Text("Open Modal"),
              onPressed: () {
                modal.show(context);
              },
            );
          },
        ),
      ),
    ),
  );
}

BSModal

A class that makes using a modal easier. The BSModal class has the below methods and members.

Methods:

  • bool isOpen()
    • returns true if the modal is currently open
  • void toggle(BuildContext passedContext)
    • opens the modal or closes it. if the modal is currently open it closes, and if it is close it opens it.
  • void hide()
    • hides the modal
  • Future
    • Opens the modal

Members:

The below members can be set in teh constructor, or set after the BSModal class has been created. For example, see below. Note that the majority of the members are passed to showDialog, and AlertDialog

// constructor way
BSModal modal = BSModal(
    content: Text("Content"),
);
// alternate way
modal.content = Text("Content 2");

Custom:

  • onHide
    • A function that runs when the modal is done closing
  • onShow
    • A function that runs once the modal is done opening
  • dynamicSize
    • bool that if true sizes the modal width dynamically based on the screensize
  • modalType
    • specifies the max width of the modal. Sizes defined by bootstrap_like_breakpoints
      • sm
      • md
      • lg
      • xl
  • titleDivider
  • actionsDivider
  • bsModalTitleColumnOptions
    • Class containing all the options that can be passed to a Column
    • The Column is located in the title of the modal
  • bsModalActionsRowOptions
    • Class containing all the options that can be passed to a Row
    • The Row is in the actions of the modal
  • enableTitleDivider
    • bool that if false hides the titleDivider
  • enableActionsDivider
    • bool that if false hides the actionsDivider

showDialog:

  • barrierColor
  • barrierDismissible
  • barrierLabel
  • routeSettings
  • useSafeArea
  • useRootNavigator

AlertDialog:

  • content
  • title
  • actions
  • backgroundColor
  • clipBehavior
  • actionsAlignment
  • actionsOverflowButtonSpacing
  • actionsOverflowDirection
  • actionsPadding
  • buttonPadding
  • contentPadding
  • contentTextStyle
  • elevation
  • insetPadding
  • scrollable
  • semanticLabel
  • shape
  • titlePadding
  • titleTextStyle

Ref:

https://getbootstrap.com/docs/4.0/components/modal/
https://pub.dev/packages/bootstrap_like_breakpoints
https://api.flutter.dev/flutter/material/AlertDialog-class.html
https://api.flutter.dev/flutter/material/showDialog.html

Libraries

bootstrap_like_modal