Bottom sheet modals in Flutter

Bottom sheet modals sind ein verbreitetes Element, da sie dem User eine Auswahl an Dingen geben, die leicht mit dem Daumen zu erreichen sind. Das ist besonders wichtig im Zeitalter von immer größer werdenden Smartphones und sieht auch noch um einiges besser aus! Hier zeige ich dir, wie du dir ein bottom sheet modal in Flutter selbst bauen kannst. Wie es funktioniert An sich ist das ganz einfach. Du musst einfach nur diese Funktion ausführen und schon hast du ein simples bottom sheet modal, falls du dir unsicher bist wohin mit dem Code, dann schau einfach ins Codebeispiel auf GitHub:

showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          child: new Wrap(
            children: <Widget>[
              new ListTile(
                leading: new Icon(Icons.access_alarms),
                title: new Text('Neuer Alarm'),
                onTap: () => {},
              ),
            ],
          ),
        );
      },
    );

Das dadurch erzeugte modal sieht so aus:

Elemente einfügen

Dabei lässt sich der Inhalt im modal frei gestalten, indem du was du willst, im Wrap Widget als child hinzufügst:

showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          child: Wrap(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.access_alarms),
                title: Text('Neuer Alarm'),
                onTap: () => {},
              ),
              ListTile(
                leading: Icon(Icons.hourglass_empty),
                title: Text('Timer'),
                onTap: () => {},
              ),
              SizedBox(
                height: 70,
                child: ListView(
                  shrinkWrap: true,
                  children: <Widget>[
                      Container(
                        padding: EdgeInsets.all(10.0),
                        child: Text('2:00:00'),
                      ),
                      Container(
                        padding: EdgeInsets.all(10.0),
                        child: Text('15:00'),
                      ),
                      Container(
                        padding: EdgeInsets.all(10.0),
                        child: Text('30:00'),
                      ),
                      Container(
                        padding: EdgeInsets.all(10.0),
                        child: Text('5:00'),
                    )
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );

Form ändern

Zu guter Letzt kannst du ab Flutter Version 1.3.6 das Ganze ein wenig schöner gestalten, indem du die Form mit angibst. Das geht so:

showModalBottomSheet(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0)),
      ),
      context: context,
      builder: (BuildContext context) {
        return Container(
          child: Wrap(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.access_alarms),
                title: Text('Neuer Alarm'),
                onTap: () => {},
              ),
              ListTile(
                leading: Icon(Icons.hourglass_empty),
                title: Text('Timer'),
                onTap: () => {},
              ),
              SizedBox(
                height: 70,
                child: ListView(
                  shrinkWrap: true,
                  children: <Widget>[
                      Container(
                        padding: EdgeInsets.all(10.0),
                        child: Text('2:00:00'),
                         ),
                         Container(
                           padding: EdgeInsets.all(10.0),
                           child: Text('15:00'),
                         ),
                         Container(
                           padding: EdgeInsets.all(10.0),
                           child: Text('30:00'),
                         ),
                         Container(
                           padding: EdgeInsets.all(10.0),
                           child: Text('5:00'),
                         ),
                      ],
                    )
                  ],
                ),
              ),
            ],
          ),
        );
      },
    );

Damit hast du ein gut aussehendes bottom sheet modal in Flutter, das du gestalten kannst, wie du möchtest!

Beispiel-App

Wie immer findest du im coodoo GitHub-Profil eine Demo hierzu.