betacode

Руководство Flutter AlertDialog

  1. AlertDialog
  2. Examples
  3. shape
  4. elevation
  5. title
  6. titlePadding
  7. titleTextStyle
  8. content
  9. contentPadding
  10. contentTextStyle
  11. actions
  12. actionsPadding
  13. actionsOverflowDirection
  14. actionsOverflowButtonSpacing
  15. buttonPadding
  16. backgroundColor
  17. insetPadding
  18. clipBehavior
  19. semanticLabel
  20. scrollable

1. AlertDialog

AlertDialog - это диалоговое окно, которое используется для уведомления пользователям о некоторых ситуациях, для которых требуется подтверждение. Оно включает в себя произвольный заголовок, произвольный контент и произвольные кнопки действия (action button) под контентом.
Если содержимое слишком велико для экрана по вертикали, вы можете завернуть его в SingleChildScrollView для избежания переполнений. Тем не менее, следует отметить, что AlertDialog пытается определить свой размер на основе внутреннего размера своих дочерних элементов; поэтому его дочерние виджеты, такие как ListView, GridView и CustomScrollView следует использовать при создании контента.
Режим ленивого отображения данных не работает в AlertDialog. Если это проблематично, вы можете использовать класс Dialog напрямую, чтобы получить больше творческого пространства.
  • Руководство Flutter Dialog
Если вам нужен простой диалог, содержащий только один заголовок и один список опций, рассмотрите возможность использования SimpleDialog.
AlertDialog Constructor:
AlertDialog Constructor
const AlertDialog(
    {Key key,
    Widget title,
    Widget content,
    List<Widget> actions,
    ShapeBorder shape,
    double elevation,
    EdgeInsetsGeometry titlePadding,
    TextStyle titleTextStyle,
    EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
    TextStyle contentTextStyle,
    EdgeInsetsGeometry actionsPadding: EdgeInsets.zero,
    VerticalDirection actionsOverflowDirection,
    double actionsOverflowButtonSpacing,
    EdgeInsetsGeometry buttonPadding,
    Color backgroundColor,
    String semanticLabel,
    EdgeInsets insetPadding: _defaultInsetPadding,
    Clip clipBehavior: Clip.none,
    bool scrollable: false}
)

2. Examples

Прежде всего, взгляните на простой, но полный пример AlertDialog, который поможет вам ответить на следующие основные вопросы:
  • Как создать AlertDialog.
  • Как вернуть значение из AlertDialog.
  • Как обрабатывать возвращаемое значение.
main.dart (ex1)
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  String answer = "?";

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
            title: Text("Flutter AlertDialog Example")
        ),
        body: Center (
            child: Row (
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  ElevatedButton (
                    child: Text("Question"),
                    onPressed: () {
                      showMyAlertDialog(context);
                    },
                  ),
                  SizedBox(width:5, height:5),
                  Text("Answer: " + this.answer.toString())
                ]
            )
        )
    );
  }

  showMyAlertDialog(BuildContext context) {
    // Create AlertDialog
    AlertDialog dialog = AlertDialog(
      title: Text("Election 2020"),
      content: Text("Will you vote for Trump?"),
      actions: [
        ElevatedButton(
            child: Text("Yes"),
            onPressed: (){
              Navigator.of(context).pop("Yes, Of course!"); // Return value
            }
        ),
        ElevatedButton(
            child: Text("No"),
            onPressed: (){
              Navigator.of(context).pop("No, I will vote for Biden"); // Return value
            }
        ),
      ],
    );

    // Call showDialog function to show dialog.
    Future<String> futureValue = showDialog(
        context: context,
        builder: (BuildContext context) {
          return dialog;
        }
    );
    Stream<String> stream = futureValue.asStream();
    stream.listen((String data) {
      String answerValue = data;
      this.setState(() {
        this.answer = answerValue;
      });
    }, onDone : () {
      print("Done!");
    } , onError: (error) {
      print("Error! " + error.toString());
    });
  }

}
  • Dart Stream

3. shape

Свойство shape используется для определения формы границы AlertDialog. По умолчанию значение shape представляет собой RoundedRectangleBorder с радиусом 4,0 пикселейпо четырем углам.
ShapeBorder shape
  • Руководство Flutter ShapeBorder
shape (ex1)
void openMyAlertDialog(BuildContext context)  {
  // Create a AlertDialog.
  AlertDialog dialog = AlertDialog(
    title: Text("Confirm"),
    content: Text("Are you sure to remove this item?"),
    shape: RoundedRectangleBorder(
        side:  BorderSide(color: Colors.green,width: 3),
        borderRadius: BorderRadius.all(Radius.circular(15))
    ),
    actions: [
      ElevatedButton(
          child: Text("Yes Delete"),
          onPressed: (){
            Navigator.of(context).pop(true); // Return true
          }
      ),
      ElevatedButton(
          child: Text("Cancel"),
          onPressed: (){
            Navigator.of(context).pop(false); // Return false
          }
      ),
    ],
  );

  // Call showDialog function.
  Future<bool> futureValue = showDialog(
      context: context,
      builder: (BuildContext context) {
        return dialog;
      }
  );
  futureValue.then( (value) {
    print("Return value: " + value.toString()); // true/false
  });
}

4. elevation

Свойство elevation определяет Z-координату AlertDialog. Его значение по умолчанию составляет 24,0 пикселя.
double elevation

5. title

Свойство title используется для создания заголовкадля AlertDialog. В большинстве случаев оно используется в качестве объекта Text. 
Widget title
Ниже приведен простой пример с title, который является объектом Text:
title (ex1)
void openMyAlertDialog(BuildContext context)  {
  // Create a AlertDialog.
  AlertDialog dialog = AlertDialog(
    title: Text("Are you sure to remove this item?"),
    content: Text("It will delete all items permanently."),
    actions: [
      ElevatedButton(
          child: Text("Yes Delete"),
          onPressed: (){
            Navigator.of(context).pop(true); // Return true
          }
      ),
      ElevatedButton(
          child: Text("Cancel"),
          onPressed: (){
            Navigator.of(context).pop(false); // Return false
          }
      ),
    ],
  );

  // Call showDialog function.
  Future<bool> futureValue = showDialog(
      context: context,
      builder: (BuildContext context) {
        return dialog;
      }
  );
  futureValue.then( (value) {
      print("Return value: " + value.toString()); // true/false
  });
}
Еще один пример с более сложнымtitle:
title (ex2)
void openMyAlertDialog(BuildContext context)  {
  // Create a AlertDialog.
  AlertDialog dialog = AlertDialog(
    title: Row (
        children: [
          Icon(Icons.delete, color: Colors.red),
          SizedBox(width: 5, height: 5),
          Text("Are you sure to remove this item?"),
        ]
    ),
    content: Text("It will delete all items permanently."),
    actions: [
      ElevatedButton(
          child: Text("Yes Delete"),
          onPressed: (){
            Navigator.of(context).pop(true); // Return true
          }
      ),
      ElevatedButton(
          child: Text("Cancel"),
          onPressed: (){
            Navigator.of(context).pop(false); // Return false
          }
      ),
    ],
  );

  // Call showDialog function.
  Future<bool> futureValue = showDialog(
      context: context,
      builder: (BuildContext context) {
        return dialog;
      }
  );
  futureValue.then( (value) {
    print("Return value: " + value.toString()); // true/false
  });
}

6. titlePadding

Свойство titlePadding используется для добавления padding (отступа) вокруг заголовка AlertDialog. Если заголовок - null, titlePadding использоваться не будет.
По умолчанию titlePadding предоставляет 24 пикселя в верхней, левой и правой частях заголовка. Оно также предоставляет 20 пикселей в нижней части заголовка, если content - null.
EdgeInsetsGeometry titlePadding
Например:
titlePadding (ex1)
void openMyAlertDialog(BuildContext context)  {
  // Create a AlertDialog.
  AlertDialog dialog = AlertDialog(
    title: Text("Confirm"),
    titlePadding: EdgeInsets.fromLTRB(24, 24, 24, 50),
    content: Text("Are you sure to remove this item?"),
    actions: [
      ElevatedButton(
          child: Text("Yes Delete"),
          onPressed: (){
            Navigator.of(context).pop(true); // Return true
          }
      ),
      ElevatedButton(
          child: Text("Cancel"),
          onPressed: (){
            Navigator.of(context).pop(false); // Return false
          }
      ),
    ],
  );

  // Call showDialog function.
  Future<bool> futureValue = showDialog(
      context: context,
      builder: (BuildContext context) {
        return dialog;
      }
  );
  futureValue.then( (value) {
    print("Return value: " + value.toString()); // true/false
  });
}

7. titleTextStyle

Свойство titleTextStyle используется для определения стиля текста в области title.
TextStyle titleTextStyle
titleTextStyle (ex1)
void openMyAlertDialog(BuildContext context)  {
  // Create a AlertDialog.
  AlertDialog dialog = AlertDialog(
    title: Text("Confirm"),
    titleTextStyle: TextStyle(color: Colors.red, fontSize: 24),
    content: Text("Are you sure to remove this item?"),
    actions: [
      ElevatedButton(
          child: Text("Yes Delete"),
          onPressed: (){
            Navigator.of(context).pop(true); // Return true
          }
      ),
      ElevatedButton(
          child: Text("Cancel"),
          onPressed: (){
            Navigator.of(context).pop(false); // Return false
          }
      ),
    ],
  );

  // Call showDialog function.
  Future<bool> futureValue = showDialog(
      context: context,
      builder: (BuildContext context) {
        return dialog;
      }
  );
  futureValue.then( (value) {
    print("Return value: " + value.toString()); // true/false
  });
}

8. content

Свойство content - это опция для определения содержимого, которое будет отображаться в центре AlertDialog. Оно должно быть объектом SingleChildScrollView, если содержимое длинное.
Widget content
content (ex1)
void openMyAlertDialog(BuildContext context)  {
  // Create a AlertDialog.
  AlertDialog dialog = AlertDialog(
    title: Text("Confirm"),
    titleTextStyle: TextStyle(color: Colors.red, fontSize: 24),
    content: Row (
        children: [
          Icon(Icons.dangerous, size: 30, color: Colors.red),
          SizedBox(width:5, height:5),
          Text("Are you sure to remove this item?")
        ]
    ),
    actions: [
      ElevatedButton(
          child: Text("Yes Delete"),
          onPressed: (){
            Navigator.of(context).pop(true); // Return true
          }
      ),
      ElevatedButton(
          child: Text("Cancel"),
          onPressed: () {
            Navigator.of(context).pop(false); // Return false
          }
      ),
    ],
  );

  // Call showDialog function.
  Future<bool> futureValue = showDialog(
      context: context,
      builder: (BuildContext context) {
        return dialog;
      }
  );
  futureValue.then( (value) {
    print("Return value: " + value.toString()); // true/false
  });
}
  • Руководство Flutter SingleChildScrollView

9. contentPadding

Свойство contentPadding используется для добавления padding (отступа) вокруг contentAlertDialog. Если значение content - null, contentPadding использоваться не будет.
По умолчанию contentPadding предоставляет 20 пикселей в верхней части content и 24 пикселя в левой, правой и нижней частях content.
EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0)
contentPadding (ex1)
void openMyAlertDialog(BuildContext context)  {
  // Create a AlertDialog.
  AlertDialog dialog = AlertDialog(
    title: Text("Confirm"),
    content: Text("Are you sure to remove this item?"),
    contentPadding: EdgeInsets.fromLTRB(24, 24, 24, 50),
    actions: [
      ElevatedButton(
          child: Text("Yes Delete"),
          onPressed: (){
            Navigator.of(context).pop(true); // Return true
          }
      ),
      ElevatedButton(
          child: Text("Cancel"),
          onPressed: (){
            Navigator.of(context).pop(false); // Return false
          }
      ),
    ],
  );

  // Call showDialog function.
  Future<bool> futureValue = showDialog(
      context: context,
      builder: (BuildContext context) {
        return dialog;
      }
  );
  futureValue.then( (value) {
    print("Return value: " + value.toString()); // true/false
  });
}

10. contentTextStyle

Свойство contentTextStyle используется для определения стиля текста в области content.
TextStyle contentTextStyle
contentTextStyle (ex1)
void openMyAlertDialog(BuildContext context)  {
  // Create a AlertDialog.
  AlertDialog dialog = AlertDialog(
    title: Text("Confirm"),
    content: Text("Are you sure to remove this item?"),
    contentTextStyle: TextStyle(color: Colors.red, fontStyle: FontStyle.italic),
    actions: [
      ElevatedButton(
          child: Text("Yes Delete"),
          onPressed: (){
            Navigator.of(context).pop(true); // Return true
          }
      ),
      ElevatedButton(
          child: Text("Cancel"),
          onPressed: (){
            Navigator.of(context).pop(false); // Return false
          }
      ),
    ],
  );

  // Call showDialog function.
  Future<bool> futureValue = showDialog(
      context: context,
      builder: (BuildContext context) {
        return dialog;
      }
  );
  futureValue.then( (value) {
    print("Return value: " + value.toString()); // true/false
  });
}

11. actions

Свойство actions - это опция для определения кнопок действия, расположенных в нижней части AlertDialog. В частности, это список TextButton или ElevatedButton, завернутых в ButtonBar.
List<Widget> actions
  • Руководство Flutter ButtonBar

12. actionsPadding

Свойство actionsPadding используется для добавления padding (отступа) вокруг ButtonBarAlertDialog. Если действия - null, то actionsPadding использоваться не будет. Значение по умолчанию для actionsPadding - EdgeInsets.zero (0,0,0,0).
Вместо использования свойства actionsPadding можно использовать свойство buttonPadding для создания отступа (padding) вокруг каждой кнопки.
EdgeInsetsGeometry actionsPadding: EdgeInsets.zero
actionsPadding (ex1)
void openMyAlertDialog(BuildContext context)  {
  // Create a AlertDialog.
  AlertDialog dialog = AlertDialog(
    title: Text("Confirm"),
    content: Text("Are you sure to remove this item?"),
    actions: [
      ElevatedButton(
          child: Text("Yes Delete"),
          onPressed: (){
            Navigator.of(context).pop(true); // Return true
          }
      ),
      ElevatedButton(
          child: Text("Cancel"),
          onPressed: (){
            Navigator.of(context).pop(false); // Return false
          }
      )
    ],
    actionsPadding: EdgeInsets.fromLTRB(24, 24, 24, 50),
  );

  // Call showDialog function.
  Future<bool> futureValue = showDialog(
      context: context,
      builder: (BuildContext context) {
        return dialog;
      }
  );
  futureValue.then( (value) {
    print("Return value: " + value.toString()); // true/false
  });
}

13. actionsOverflowDirection

actions обычно располагаются встроке. Однако, если горизонтального пространства недостаточно, они будут размещены в столбце. Свойство actionsOverflowDirection укажет, как упорядочить actions по столбцу сверху вниз (по умолчанию) или снизу вверх.
VerticalDirection actionsOverflowDirection

// enum VerticalDirection

    VerticalDirection.up  
    VerticalDirection.down  (Default)
  • actionsOverflowDirection: VerticalDirection.up
  • actionsOverflowDirection: VerticalDirection.down (Default)

14. actionsOverflowButtonSpacing

actions обычно располагаются встроке. Однако, если горизонтального пространства недостаточно, они будут размещены в столбце. Свойство actionsOverflowButtonSpacing определяет расстояние между actions в вертикальном направлении.
double actionsOverflowButtonSpacing

15. buttonPadding

EdgeInsetsGeometry buttonPadding

16. backgroundColor

Свойство backgroundColor используется для указания цвета фона для AlertDialog.
Color backgroundColor

17. insetPadding

EdgeInsets insetPadding: _defaultInsetPadding

18. clipBehavior

Clip clipBehavior: Clip.none
  • Flutter Clip clipBehavior

19. semanticLabel

semanticLabel (семантическая метка) - это описательный текст AlertDialog, который не отображается в пользовательском интерфейсе. Когда пользователь открывает или закрывает AlertDialog, система будет читать емк это описание при условии включения режима специальных возможностей (accessibility mode) .
String semanticLabel

20. scrollable

Свойство scrollable устарело и больше не используется.
@Deprecated(
 'Set scrollable to `true`. This parameter will be removed and '
 'was introduced to migrate AlertDialog to be scrollable by '
 'default. For more information, see '
 'https://flutter.dev/docs/release/breaking-changes/scrollable_alert_dialog. '
 'This feature was deprecated after v1.13.2.'
)
bool scrollable: false

Pуководства Flutter

Show More

Pуководства Flutter

Show More

Новейшие статьи

Show More