codestory

Die Anleitung zu Flutter SimpleDialog

View more Tutorials:

1- Flutter SimpleDialog

Die Klasse SimpleDialog wird verwendet, um ein einfaches Dialogfeld zu erstellen, das aus einem Titel und einer Liste von Optionen besteht, in denen der Benutzer eine Option aus der Liste auswählen kann. Jede Option ist normalerweise ein Objekt SimpleDialogOption.
Wenn Sie möchten, dass ein Dialogfeld dem Benutzer eine Nachricht sendet, berücksichtigen Sie die Klasse AlertDialog.
SimpleDialog Constructor:
SimpleDialog Constructor
const SimpleDialog(
    {Key key,
    Widget title,
    EdgeInsetsGeometry titlePadding: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
    TextStyle titleTextStyle,
    List<Widget> children,
    EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0),
    Color backgroundColor,
    double elevation,
    String semanticLabel,
    ShapeBorder shape}
)

2- SimpleDialog Example

Zum ersten schauen wir uns ein einfaches aber vollständiges Beispiel für den SimpleDialog. Es hilft Ihnen bei der Beanwortung der folgenden grundlegenden Fragen:
  1. So erstellen Sie einem SimpleDialog.
  2. So fügen Sie die Optionslisten in SimpleDialog hinzu.
  3. So geben Sie die Option des Benutzers zurück.
  4. Umgang mit dem zurückgegebenen Wert.
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> {
  ProgrammingLanguage selectedLanguage;

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
            title: Text("Flutter SimpleDialog Example")
        ),
        body: Center (
            child: Column (
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  ElevatedButton (
                    child: Text("Select a Language"),
                    onPressed: () {
                      showMyAlertDialog(context);
                    },
                  ),
                  SizedBox(width:5, height:5),
                  Text("Selected Language: "
                      + (this.selectedLanguage == null ? '?': this.selectedLanguage.name))
                ]
            )
        )
    );
  }

  showMyAlertDialog(BuildContext context) {
    var javascript = ProgrammingLanguage("Javascript", 67.7);
    var htmlCss = ProgrammingLanguage("HTML/CSS", 63.1);
    var sql = ProgrammingLanguage("SQL", 57.4);

    // Create SimpleDialog
    SimpleDialog dialog = SimpleDialog(
      title: const Text('Select a Language:'),
      children: <Widget>[
        SimpleDialogOption(
            onPressed: () {
              // Close and return value
              Navigator.pop(context, javascript);
            },
            child: Text(javascript.name)
        ),
        SimpleDialogOption(
          onPressed: () {
            // Close and return value
            Navigator.pop(context, htmlCss);
          },
          child:  Text(htmlCss.name),
        ),
        SimpleDialogOption(
          onPressed: () {
            // Close and return value
            Navigator.pop(context, sql);
          },
          child:  Text(sql.name),
        )
      ],
    );

    // Call showDialog function to show dialog.
    Future<ProgrammingLanguage> futureValue = showDialog(
        context: context,
        builder: (BuildContext context) {
          return dialog;
        }
    );

    futureValue.then( (language) => {
      this.setState(() {
        this.selectedLanguage = language;
      })
    });
  }

}

class ProgrammingLanguage {
  String name;
  double percent;

  ProgrammingLanguage(this.name, this.percent) ;
}

3- title

Das Property title ist eine Option zum Festlegen des Titels für den SimpleDialog. In den meisten Anwendungsfällen handelt es sich um ein Objekt Text.
Widget title
Zum Beispiel:
title (ex1)
void showMyAlertDialog(BuildContext context) {
  var javascript = ProgrammingLanguage("Javascript", 67.7);
  var htmlCss = ProgrammingLanguage("HTML/CSS", 63.1);
  var sql = ProgrammingLanguage("SQL", 57.4);

  // Create SimpleDialog
  SimpleDialog dialog = SimpleDialog(
    title:  Row (
       children: [
         Icon(Icons.code, color:Colors.blue),
         SizedBox(width:5, height:5),
         Text('Select a Language:'),
       ]
    ),
    children: <Widget>[
      SimpleDialogOption(
          onPressed: () {
            // Close and return value
            Navigator.pop(context, javascript);
          },
          child: Text(javascript.name)
      ),
      SimpleDialogOption(
        onPressed: () {
          // Close and return value
          Navigator.pop(context, htmlCss);
        },
        child:  Text(htmlCss.name),
      ),
      SimpleDialogOption(
        onPressed: () {
          // Close and return value
          Navigator.pop(context, sql);
        },
        child:  Text(sql.name),
      )
    ],
  );;

  // Call showDialog function to show dialog.
  Future<ProgrammingLanguage> futureValue = showDialog(
      context: context,
      builder: (BuildContext context) {
        return dialog;
      }
  );

  futureValue.then( (language) => {
    this.setState(() {
      this.selectedLanguage = language;
    })
  });
}

4- titlePadding

Das Property titlePadding wird verwendet, um den Titel von SimpleDialog mit einem Padding zu versehen. Wenn der title null ist, wird das titlePadding nicht verwendet.
Standardmäßig bietet das titlePadding 24 pixel oben, links und rechts vom Titel und 0 Pixel unten im Titel.
EdgeInsetsGeometry titlePadding: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
Zum Beispiel:
titlePadding (ex1)
titlePadding: EdgeInsets.fromLTRB(24, 24, 24, 50)

5- titleTextStyle

Das Property titleTextStyle wird verwendet, um den Textstil des Bereichs title zu definieren.
TextStyle titleTextStyle
  • TODO Link!
titleTextStyle (ex1)
titleTextStyle: TextStyle(
    color: Colors.red,
    fontSize: 24
)

6- children

Das Property children ist eine Option, die eine Optionsliste von SimpleDialog definiert. Insbesondere ist dies die Liste der SimpleDialogOption, die in einem ListBody platziert und ListBody wird in einem SingleChildScrollView ​​​​​​​platziert.
List<Widget> children
main.dart (children 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> {
  ProgrammingLanguage selectedLanguage;

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
            title: Text("Flutter SimpleDialog Example")
        ),
        body: Center (
            child: Column (
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  ElevatedButton (
                    child: Text("Select a Language"),
                    onPressed: () {
                      showMyAlertDialog(context);
                    },
                  ),
                  SizedBox(width:5, height:5),
                  Text("Selected Language: "
                      + (this.selectedLanguage == null ? '?': this.selectedLanguage.name))
                ]
            )
        )
    );
  }

  void showMyAlertDialog(BuildContext context) {
    var languages = [
      ProgrammingLanguage("Javascript", 67.7),
      ProgrammingLanguage("HTML/CSS", 63.1),
      ProgrammingLanguage("SQL", 57.4),
      ProgrammingLanguage("Python", 44.1),
      ProgrammingLanguage("Java", 40.2),
      ProgrammingLanguage("Bash/Shell/PowerShell", 33.1),
      ProgrammingLanguage("C#", 31.4),
      ProgrammingLanguage("PHP", 26.2),
      ProgrammingLanguage("Typescript", 25.4),
      ProgrammingLanguage("C++", 23.9),
      ProgrammingLanguage("C", 21.8),
      ProgrammingLanguage("Go", 8.8)
    ];

    // A List of SimpleDialogOption(s).
    var itemList = languages.map( (lang) => SimpleDialogOption(
        onPressed: () {
          // Close and return value
          Navigator.pop(context, lang);
        },
        child: Row (
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(lang.name),
              Text (
                  lang.percent.toString(),
                  style: TextStyle(color: Colors.red)
              )
            ]
        )
    )).toList();


    // Create SimpleDialog
    SimpleDialog dialog = SimpleDialog(
        title: Text('Select a Language:'),
        children: itemList
    );

    // Call showDialog function to show dialog.
    Future<ProgrammingLanguage> futureValue = showDialog(
        context: context,
        builder: (BuildContext context) {
          return dialog;
        }
    );

    futureValue.then( (language) => {
      this.setState(() {
        this.selectedLanguage = language;
      })
    });
  }

}

class ProgrammingLanguage {
  String name;
  double percent;

  ProgrammingLanguage(this.name, this.percent) ;
}
  • TODO Link!

7- contentPadding

Das Property contentPadding wird verwendet, um den Inhaltsbereich vom SimpleDialog ​​​​​​​zu füllen.
Standardmäßig bietet contentPadding 16 pixel am unteren Rand des Inhalt und  12 pixel am oberen Rand des Inhalts. Wenn der title null ist, wird das Padding top um 12 Pixel erweitert.
EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0)
Zum Beispiel:
contentPadding (ex1)
contentPadding: EdgeInsets.fromLTRB(0, 50, 0, 24)

8- backgroundColor

Mit dem Property backgroundColor wird die Hintergrundsfarbe vom SimpleDialog ​​​​​​​angegeben.
Color backgroundColor
Zum Beispiel:
backgroundColor: Colors.lightBlueAccent[100]

9- elevation

Das Property elevation definiert die Achse Z vom SimpleDialog. Der Standardwert beträgt 24.0 Pixel.
double elevation

10- semanticLabel

semanticLabel ist ein beschreibender Text vom SimpleDialog, der auf der Benutzeroberfläche nicht sichtbar ist. Wenn der Benutzer den SimpleDialog öffnet und schließt, liest das System dem Benutzer diese Beschreibung vor, wenn der Eingabehilfenmodus (accessibility mode) aktiviert ist.
String semanticLabel

11- shape

Das Property shape wird die Umrissform für SimpleDialog definiert.Der Standardwert von shape ist RoundedRectangleBorder mit einem Radius von 4.0 Pixel an allen vier Ecken.
ShapeBorder shape
  • TODO Link!
RoundedRectangleBorder:
shape (ex1)
shape: RoundedRectangleBorder (
    side:  BorderSide(color: Colors.blueGrey, width: 3),
    borderRadius: BorderRadius.all(Radius.circular(15))
)
BeveledRectangleBorder:
shape (ex2)
shape: BeveledRectangleBorder (
    side:  BorderSide(color: Colors.blueGrey, width: 2),
    borderRadius: BorderRadius.all(Radius.circular(15))
)

View more Tutorials: