Flutter fluttertoast Modal Bottom Sheet

In Flutter kennen wir die AppBar, aber auch die BottomNavigationBar.  In diesem Post betrachten wir die letztere im Zusammenhang mit Modal Bottom Sheet.
Die Erklärung von Wikipedia:

Modale Dialoge sperren den Rest der Anwendung (oder sogar der Benutzeroberfläche), solange der Dialog angezeigt wird.

Bottom Sheet's gibt es in zwei Varianten: Persistent und Modal. Beide fungieren als, im Vergleich zum "Main Screen", kleine Anzeigeflächen für Informationen. Während die Variante Modal die restliche App sperrt solange aktiv, fungiert die persistente Version als Ergänzung zur laufenden App.
In diesem Post schauen wir uns die Modal Variante an. Der Beispiel Code arbeitet mit fluttertoast, einer Library die wir zuerst im pubspec.yaml File einbinden:

dependencies:
  flutter:
    sdk: flutter
  fluttertoast: ^3.1.0

Der erste Teil des Beispielquellcode's ist wie immer der Einstieg in die App:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: EinToastDemo(title: 'Ein Demo'),
    );
  }
}

Im Code oben, ist nichts was wir nicht schon kennen. Kommen wir zum interessanten Teil:

class EinToastDemo extends StatelessWidget {
  final String title;

  const EinToastDemo({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomAppBar(
        child: Row(
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.menu), 
              onPressed: () {
                showModalBottomSheet<void>(
                  context: context,
                  builder: (BuildContext context)=>openBottomDrawer(), 
                );
              },
              
            ),
              IconButton(
                    icon: Icon(Icons.search),
                    onPressed: () {
                      Fluttertoast.showToast(msg: 'Du hast Search ausgewählt');
                    },
                ),   

                //Third action menu widget for overflow action
                IconButton(
                    icon: const Icon(Icons.more_vert),
                    onPressed: () {
                      Fluttertoast.showToast(msg: 'Hier wird die Overflow action sein');
                    },
                )
        ],
        ),
      ),
    );
  }
}

Wir sehen oben, das die bottomNavigationBar ein Eintrag des Scaffold's ist. In der Funktion BottomAppBar(...) können wir nun selbst entscheiden, wie wir sie ausgestalten möchten. In unserem Fall wird eine Row verwendet, der wir drei IconButton's übergeben.

Zwei davon zeigen einen "Toast" an, wenn sie angeklickt werden. Was ist ein Toast ? 
Ein Toast ist eine Nachricht, die eine kurze Zeit angezeigt wird, als Reaktion auf eine Interaktion des Benutzers. Um das um zu setzen verwenden wir die Library fluttertoast, die wir ja in unser Projekt eingebunden haben.

Das erste Icon Menu implementiert einen Modal Bottom Sheet. showModalBottomSheet(...) müssen wir eine builder: Funktion übergeben, in unserem Beispiel openBottomDrawer(...) .
Der Code für diese Funktion:

Widget openBottomDrawer() {
    return Drawer(
      child: Column(
        children: const <Widget>[
          //Add menu item to edit
          const ListTile(
            leading: const Icon(Icons.mode_edit),
            title: const Text('Edit'),
          ),
          const ListTile(
            //Add menu item to add a new item
            leading: const Icon(Icons.add),
            title: const Text('Add'),
          ),
        ],
      ),
    );
  }

Im Code oben sehen wir, das ein Drawer retourniert wird. Die Funktion Drawer(...) bekommt eine Column als child:, mit zwei ListTile(...) als children: .
In einer realen Anwendung würde man hier noch eine Interaktions Möglichkeit implementieren, Button oder onTap(...) zum Beispiel.

Dieser Code ist lauffähig, hat aber einen Schönheitsfehler. Der Bottom Sheet ist für die zwei ListTile die es enthält viel zu hoch. Abhilfe kann man hier dadurch erreichen, indem man sich von showModalBottomSheet einen Container(...) zurückgeben lässt. Diesen kann man mit height: ausstatten. Hier der vollständige Code:

Das war es für diesen Post. Happy Coding. Bis bald !