Skip to content

Dialog

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Danger

This component on development, if you use the component please follow this documentation.

Confirm

Dialog confirm default

Dialog Confirm

Useing Properties content

Dialog Confirm with content

Dialog confirm default 

AppDialog.confirm(
    context: context,
    title: 'Dialog Title',
    description: 'Phasellus consectetur facilisis',
    submitted: 'Yes',
    onSubmitted: () {},
),

Useing Properties content 

AppDialog.confirm(
    context: context,
    title: 'Change roles',
    description: 'Are you sure you want to change the role for user Nanang?',
    content:  TextFieldDropdown(
        onChanged: (String value) {},
        hint: 'Select Role',
        selectedItem: 'Manager',
        items: const ['Admin', 'Manager', 'User'],
    ),
    submitted: 'Save',
    onSubmitted: () {},
)

Constructors

  • content Defines the the Widget on below description
  • submitted Defines the text for the button submit.
  • back Defines the text for the button cancel.
  • isDismiss If false the dialog cannot be closed.
  • submittedColor Defines the color for the button submit.

Detail

Dialog Detail

AppDialog.detail(
  context: context,
  title: 'Detail User',
  imageUrl: AppImages.avatarUrl,
  content: const [TypeFilterForm()],
  onSubmitted: () {},
  onReset: () {},
)

Constructors

  • content put [ListRowBasic] inside these properties.
  • imageUrl put url address image type String
  • onDelete If the property is null then the delete button is hidden.
  • onSubmitted If the property is null then the edit button is hidden.
  • isDismiss If false the dialog cannot be closed.
  • heightReduce set height Dialog (Height Screen / 1.2) - heightReduce

For the contents of the dialog using Row Content:

Row Basic

Row basic

ListRowBasic(label: 'Tags', value: 'Tag 1')

Info

if the value has paragraph, please use multiple is true

Row Chip

Row chip

ListRowChip(label: 'Type', value: 'Type 1', colorClip: AppColors.blue),

Info

The background color followed the colorChip just only opacity(0.1)

Row link

ListRowLink(label: 'Link Videos', onClick: () {}),

Info

  • value Default value label is "Lihat", you can custom this.

Row Highline

Row highline

ListRowHighline(
  onAdd:() {
    //! TODO: function for icon button add
  }
  label: 'Highline',
  listValue: [
    ListRowHighlineValue(
      onClick: (){
        //! TODO: redirect to detail highline
      }
      value: 'Whatsapp',
    ),
  ],
)

Info

  • listValue type is list ListRowHighlineValue.

Form

Dialog Form

AppDialog.form(
  context: context,
  title: 'Create new Type',
  content: const TypeAddForm(),
  onSubmitted: () {},
)

Constructors

  • content put List Form input on the properties
  • isDismiss If false the dialog cannot be closed.
  • heightReduce set height Dialog (Height Screen / 1.2) - heightReduce

Filter

Dialog Filter

AppDialog.filter(
  context: context,
  title: 'Fitler Type',
  content: const TypeFilterForm(),
  onSubmitted: () {},
  onReset: () {},
)

Constructors

  • content put List Form input on the properties
  • isDismiss If false the dialog cannot be closed.
  • heightReduce set height Dialog (Height Screen / 1.2) - heightReduce

Import

Dialog Import

AppDialog.import(
  context: context,
  title: 'Import kartu',
  description: 'Silahkan masukukan file Excel ke sini. Pastikan data sesuai dengan template.',
  content: TextFieldPicker(
    fileType: FileType.media,
    onDone: (i) {},
  ),
  onSubmitted: () {},
  onDownload: () {},
),

Constructors

  • content put the Widget TextFieldPicker
  • isDismiss If false the dialog cannot be closed.
Authors: Nanang Prasetya