mono0926 / adaptive_dialog

Show alert dialog or modal action sheet adaptively according to platform.

adaptive_dialog

Show alert dialog or modal action sheet adaptively according to platform.

Web Demo: https://mono0926.com/adaptive_dialog/

showOkAlertDialog

Convenient wrapper of showAlertDialog.

iOS	Android

showOkCancelAlertDialog

Convenient wrapper of showAlertDialog.

iOS	Android

showConfirmationDialog

Show Confirmation Dialog. For Cupertino, fallback to ActionSheet.

iOS	Android

showModalActionSheet

iOS	Android

showTextInputDialog

iOS	Android

showTextAnswerDialog

Show text input dialog until answer is correct or cancelled. This is useful for preventing very destructive action is executed mistakenly.

iOS	Android

---

FAQ

How can I customize it flexibly?

This packages keeps usage and UI simple like iOS official alert dialog. Therefore, if you need more flexibility than this package provides, I recommend that you build your own directly using standard APIs to meet your requirements without using this package.

• #19 (comment)
• #76 (comment)
• #108 (comment)

The getter modalBarrierDismissLabel was called on null

adaptive_dialog uses Cupertino-style widgets internally on iOS, so GlobalCupertinoLocalizations.delegate is required under certain conditions.

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

class App extends StatelessWidget {
  const App({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //...
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate, // This is required
      ],
    );
  }
}

The input text color same with backgound when using CupertinoTextInputDialog

This fixes the problem.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart' hide Router;

class App extends StatelessWidget {
  const App({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      darkTheme: ThemeData(
        cupertinoOverrideTheme: const CupertinoThemeData(
          textTheme: CupertinoTextThemeData(), // This is required
        ),
      ),
    );
  }
}

adaptive_dialog's Issues

Modal Action Sheet is not scrollable on Android

Steps to Reproduce

showModalActionSheet<int>(
  context: context,
  actions: List.generate(10, (i) {
    return SheetAction<int>(
      key: i,
      label: i.toString(),
    );
  }),
);

showConfirmationDialog height

Hi,
Is there any way while using showConfirmationDialog to have a more "responsive" height?
The widget works well when the list is long enough to be scrollable, and I am aware of contentMaxHeight which I am using currently, but it's not ideal.

Maybe you could add an option to pass to the widget's ListView a shrinkWrap value, so one could set it to true.

Thanks!

The input text color same with backgound when use CupertinoTextInputDialog

I found a issue that when I switch to dark mode.
The DialogTextField text color still black.
We cannot see. the text because the color is same with background.

Is there any way to set DialogTextField text color?

showTextInputDialog() When you click OK, the size of the dialog box will change.

But clicking on Cancel doesn't.

iOS13, iPhone 11

Migrate to null safety

It would be awesome if this package could be migrated to null safety.

How could I change dialog text fontsize

i realy do not understand how to use it.

Why i get some second alert dialog after press OK?
How i can get text from showTextAnswerDialog ?
Somebody give me example please.

showTextAnswerDialog() - add optional arg to submit form when user hits enter on last input field

Story

As a user, I would like the form to automatically submit when the user hits the enter button on the last text input field.

Spec

Add an optional bool autoSubmit = false arg to showTextAnswerDialog()

• it true, then when the text input field onSubitted action should auto-submit the form

There is a problem on iOS

"showTextInputDialog" returns double the value in ios.

MyCode:

showTextInputDialog(
context: context,
title: 'Test Text Input Dialog',
textFields: [
DialogTextField(
hintText: 'Input value',
keyboardType: TextInputType.number,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter number';
}
debugPrint('Value: $value');
return null;
},
)
],
)

Screenshot terminal in iOS:

Screenshot terminal in Android:

Provide a way to override default theme

By default buttons use primary color. but I want use a different color, or secondary color. is there any plan to support this?
as you see from the below image, primary color is orange and reduces readability.

how to implement onOkPressed function?

The showTextInputDialog will return a String with closing the dialog.

I don't want to close the dialog, how could I finish the aysncronous validation when ok pressed?

Nested Navigators

Hi!
I have a tabbed setup that use nested Navigators. It seems that the dialogs are displayed using the root navigator, because when the void pop(T key) => Navigator.of(context).pop(key); is executed in showAlertDialog<T> after pressing any dialog's action button, the tab's page is popped but the dialog stays on the screen.

I was able to successfully fix the issue by forcing to pop using root navigator, so that the dialog is actually removed off the screen after pressing an action button:
void pop(T key) => Navigator.of(context, rootNavigator: true).pop(key);

Would you be so kind to extend your API to support this scenario? Thank you in advance, I love your work.

showTextInputDialog DialogTextField prefixText out of sight

This situation occurs when the focus is not on the input, and it can be seen when the focus is on the input

No background color in Modal Action Sheet Android

Hi, sorry for my english.

I have a issue when I use showModalActioSheet. In iOS looks good but in Android the background color it's transparent and I don't see the content. This is my code:

import 'package:adaptive_dialog/adaptive_dialog.dart' as adaptive;
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

Future<String> showOptionsBottomMenu({
  @required BuildContext context,
  String title = 'Opciones',
  String cancelLabel = 'Cancelar',
  String message,
}) async {
  return await adaptive.showModalActionSheet<String>(
    context: context,
    title: title,
    cancelLabel: cancelLabel,
    message: message,
    isDismissible: true,
    style: adaptive.AdaptiveStyle.material,
    actions: [
      const adaptive.SheetAction(
        label: 'Tomar Foto',
        icon: Icons.insert_photo,
        key: 'tomar',
      ),
      const adaptive.SheetAction(
        label: 'Seleccionar Fotos',
        icon: Icons.insert_photo,
        key: 'seleccionar',
      ),
      const adaptive.SheetAction(
        label: 'Seleccionar archivos pdf, word, excel, power point',
        icon: Icons.insert_photo,
        key: 'seleccionar_archivos',
      ),
    ],
  );
}

I'm using Flutter v1.17.3.

Here the screenshots:

1. iOS
   

2. Android
   

Add support for macOS dialogs

• #67
• #68

Description

We deploy our app to Android, iOS, Web and macOS. It would be great to have the option to display on macOS the dialog with native design:

Big Sur	Catalina

https://github.com/GroovinChip/macos_ui#dialogs

DialogTextField set maxLines is not effect

It can be input more then 5 lines.

final introductions = await showTextInputDialog(
context: context,
textFields: [
DialogTextField(
initialText: _userInfo.introduction,
keyboardType: TextInputType.multiline,
// minLines: 1,
maxLines: 5,
),
],
title: 'input introduction',
);

Android: Modal Action Sheet not scrollable

When using a modal action sheet with many options it is well scrollable under iOS but not on Android. So the user can only select the first ~5 options.

More than 1 message

Is there a way to have more than 1 message for the alert? So the 2nd message will be on a new line

On IOS devices, the first time you use the spring box, you get stuck

On IOS devices, the first time you use the spring box, you get stuck

After appearing once, it is normal to open the cartridge again

Help me please

I do not understand how i can handle OK and CANCEL buttons in showTextInputDialog. In future i get only text from textField.

and why i have this?

showTextInputDialog(
context: context,
textFields: [DialogTextField()],
title: 'Создание папки',
message: 'Введите название папки',
okLabel: 'Создать',
cancelLabel: 'Отмена',
).then((newFolder) {
print(newFolder.isEmpty); ----This is FALSE
print(newFolder); ---- and this get me [ ] - empty!

Support for macOS style text input dialog

Light	Dark

Docs or pub link ?

Looks nice but where is the pub link or docs so that tell us how to use this ?

Migrate to null safety

On projects with null safety we now get a warning that this package should not be imported. A migration to null safety would solve this. I guess I shouldnt be too much work because most of the code should already be null safe.

Android: showOkCancelAlertDialog can't scroll.

The method 'showOkCancelAlertDialog' can't scroll on android.

showTextInputDialog: Text not visible in Cupertino dark mode

Text in showTextInputDialog is not visible in dark mode.

Support keyboard shortcut

• Enter
• Escape
• CallbackShortcuts class - widgets library - Dart API

The getter 'modalBarrierDismissLabel' was called on null

I use your plugin but on iOS 14 i've this error:

The following NoSuchMethodError was thrown while handling a gesture:
The getter 'modalBarrierDismissLabel' was called on null.
Receiver: null
Tried calling: modalBarrierDismissLabel

this is my code:

return GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3), itemBuilder: (_, index) => Builder( builder: (context) => InkWell( onTap: () { if (index == TeouResponses.MAP_OF_RESPONSES.length - 1) { showTextInputDialog( context: context, title: "Je suis...", textFields: [DialogTextField(hintText: "test")], okLabel: "Envoyer", cancelLabel: "Annuler", barrierDismissible: true) .then((inputText) { if (inputText != null && inputText.length > 0) { _textResponse = inputText[0]; _actionsAfterCLick(index); } }); } else if (index == TeouResponses.MAP_OF_RESPONSES.length - 2) { _onImageButtonPressed(ImageSource.camera, context: context, index: TeouResponses.MAP_OF_RESPONSES.length - 2); } else { _actionsAfterCLick(index); } }, child: Card( elevation: 4, child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ SizedBox( height: 60, child: Image( image: TeouResponses.MAP_OF_RESPONSES.values .toList()[index]), ), SizedBox( height: 10, ), Center( child: Text( TeouResponses.MAP_OF_RESPONSES.keys.toList()[index], textAlign: TextAlign.center, ), ) ], ), ), )), ), itemCount: TeouResponses.MAP_OF_RESPONSES.length, );

Option to change cursorColor for showTextInputDialog()

I use MaterialApp for my application and i can configure the cursorColor inside themeData, but it only affects android and not iOS

Feature Request: Add ability to turn off auto correct/auto suggestions in DialogTextField

Currently there is no way to disable auto correct/auto suggestions while using DialogTextField() that I could find. I would like this ability to be able to type in a URL without iOS auto correcting the URL as I type.

Support for macOS style alert dialog

How to prevent physical return/back action?

Hi, thanks for your attention in advance.
Is there any param to prevent physical return/back action? Such as the back key on android device? The param 'barrierDismissible' can't satisfy my requirement.

Default selection in showConfirmationDialog

Is it possible to have a default selected value in showConfirmationDialog?
I understand that isDefaultAction is not what I am talking about.
Thank you!

is it possible to show dialog without build context

HI,
i am looking forward to showing a dialog from inside a Getx Controller
when a push notification been received,
i don't have a context in this situation
is it possible show dialog without context

please help

i have showTextInputDialog()

but where i can past functions on OK and CANCEL buttons?

for example i expect some like this:

showTextInputDialog(
onPressOKButton(){
doSomeThing
}
onPressCANCELButton(){
doSomeThing
}
)

How i can handle tap on OK and CANCEL buttons???

Cannot build example on any flutter channel

Your sdk requirement of >=2.12.0-0 prevents this from being built on the stable channel of flutter, and on the beta channel and below, the following error arises upon trying to build and run the example flutter app.

/C:/Software/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_svg-0.18.1/lib/src/picture_provider.dart:50:59: Error: No named parameter with the name 'nullOk'.
        context != null ? Localizations.localeOf(context, nullOk: true) : null,
                                                          ^^^^^^
/C:/Software/flutter/packages/flutter/lib/src/widgets/localizations.dart:413:17: Context: Found this candidate, but the arguments don't match.
  static Locale localeOf(BuildContext context) {
                ^^^^^^^^


FAILURE: Build failed with an exception.

* Where:
Script 'C:\Software\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 991

* What went wrong:
Execution failed for task ':app:compileFlutterBuildDebug'.
> Process 'command 'C:\Software\flutter\bin\flutter.bat'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 14s
Exception: Gradle task assembleDebug failed with exit code 1

Request : is it possible to dim the backgroud

in the normal dialog i can wrap it with BackdropFilter so that i can have a dimmer background when calling the dialog?

Option to change the directionality of text and text-direction-sensitive render objects

In my app, I need to change the text direction of the title and the content in the dialog but I could not because there is no argument provided for text direction.

Expected Behaviour
The dialog should have support for text direction by making Directionality the root child of the dialog.

showModal(
      context: context,
      useRootNavigator: useRootNavigator,
      configuration: FadeScaleTransitionConfiguration(
        barrierDismissible: barrierDismissible,
      ),
      builder: (context) => Directionality(
        textDirection: TextDirection.rtl,
        child: WillPopScope(
          onWillPop: onWillPop,
          child: AlertDialog(
            title: titleText,
            content: messageText,
            actions: actions.convertToMaterialDialogActions(
              onPressed: pop,
              destructiveColor: colorScheme.error,
              fullyCapitalized: fullyCapitalizedForMaterial,
            ),
            actionsOverflowDirection: actionsOverflowDirection,
            scrollable: true,
          ),
        ),
      ),
    );

iOS dark mode text input is invisible

Hello, I really love your package and use it in my app FluffyChat but I have seen that on iOS in dark mode the text is not visible in the showTextInputDialog().

Make text selectable for Web

Supprt null safety

Please add null safety to this project

Support Windows Fluent UI dialogs

fluent_ui | Flutter Package

Add outer edge to showTextInputDialog for macOS

Cannot be UITested

Need to add optional parameter Key to be able to use integration test

[feat] showYesNoAlertDialog

Just like showOkCancelAlertDialog but using text Yes/No instead of OK/Cancel respectively. Thanks!

can we use buttons??? too

i want to show this instead of a full add a post page in a FB like app//// i want to have a add image. and a textbox too in this model dialog pleas etell

Add fullyCapitalizedForMaterial to all dialogs

It is currently missing in showTextInputDialog which is also used by showTextAnswerDialog.

test

disable "ok" when input text is empty on showTextInputDialog.

I want to implement a feature like
"disable "ok" when input text is empty on showTextInputDialog"

is it support?

Add `builder` parameter

builder parameter allows you to change the Theme.

The builder parameter can be used to wrap the dialog widget to add inherited widgets like Theme.
showDatePicker function - material library - Dart API

This resolves #28, #42 and #56.