betacode

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

View more Tutorials:

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

1- AlertDialog

AlertDialog - это диалоговое окно, которое используется для уведомления пользователям о некоторых ситуациях, для которых требуется подтверждение. Оно включает в себя произвольный заголовок, произвольный контент и произвольные кнопки действия (action button) под контентом.
Если содержимое слишком велико для экрана по вертикали, вы можете завернуть его в SingleChildScrollView для избежания переполнений. Тем не менее, следует отметить, что AlertDialog пытается определить свой размер на основе внутреннего размера своих дочерних элементов; поэтому его дочерние виджеты, такие как ListView, GridView и CustomScrollView следует использовать при создании контента.
Режим ленивого отображения данных не работает в AlertDialog. Если это проблематично, вы можете использовать класс Dialog напрямую, чтобы получить больше творческого пространства.
  • TODO Link?
Если вам нужен простой диалог, содержащий только один заголовок и один список опций, рассмотрите возможность использования 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, который поможет вам ответить на следующие основные вопросы:
  1. Как создать AlertDialog. 
  2. Как вернуть значение из AlertDialog.
  3. Как обрабатывать возвращаемое значение.
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());
    });
  }

}

3- shape

Свойство shape используется для определения формы границы AlertDialog. По умолчанию значение shape представляет собой RoundedRectangleBorder с радиусом 4,0 пикселей по четырем углам.

ShapeBorder shape
  • TODO Link?
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
  });
}
  • TODO Link?

9- contentPadding

Свойство contentPadding используется для добавления padding (отступа) вокруг content AlertDialog. Если значение 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
  • TODO Link?

12- actionsPadding

Свойство actionsPadding используется для добавления padding (отступа) вокруг ButtonBar AlertDialog. Если действия - 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

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

View more Tutorials:

Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.