Flutter Modal and DraggableScrollableSheet

main.dart

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

final GlobalKey<NavigatorState> overviewTabKey = GlobalKey<NavigatorState>();
final GlobalKey<NavigatorState> searchTabKey = GlobalKey<NavigatorState>();
final GlobalKey<NavigatorState> favoriteTabKey = GlobalKey<NavigatorState>();
final GlobalKey<NavigatorState> profileTabKey = GlobalKey<NavigatorState>();

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,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        backgroundColor: Colors.white,
        activeColor: Colors.blue,
        inactiveColor: Color(0XFF222222),
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Überblick',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Suche',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            label: 'Favoriten',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profil',
          ),
        ],
      ),
      tabBuilder: (context, index) {
        if (index == 0) {
          return CupertinoTabView(
            navigatorKey: overviewTabKey,
            builder: (BuildContext context) => OverviewTab(),
          );
        } else if (index == 1) {
          return CupertinoTabView(
            navigatorKey: searchTabKey,
            builder: (BuildContext context) => SearchTab(),
          );
        } else if (index == 2) {
          return CupertinoTabView(
            navigatorKey: favoriteTabKey,
            builder: (BuildContext context) => FavoriteTab(),
          );
        } else {
          return CupertinoTabView(
            navigatorKey: profileTabKey,
            builder: (BuildContext context) => ProfileTab(),
          );
        }
      },
    );
  }
}

class OverviewTab extends StatelessWidget {
  void displayModalRoot(BuildContext context, bool useRootNavigator) {
    showModalBottomSheet(
        context: context,
        backgroundColor: Colors.transparent,
        isScrollControlled: true,
        useRootNavigator: useRootNavigator,
        builder: (context) {
          return Container(
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(12),
                topRight: Radius.circular(12),
              ),
              clipBehavior: Clip.hardEdge,
              child: SingleChildScrollView(
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: const Radius.circular(10),
                      topRight: const Radius.circular(10),
                    ),
                  ),
                  child: Container(
                    child: Column(
                      children: [
                        Container(
                          alignment: Alignment.topCenter,
                          padding: EdgeInsets.only(top: 8),
                          child: Container(
                            width: 60,
                            height: 6,
                            decoration: BoxDecoration(
                              color: Colors.grey,
                              borderRadius: BorderRadius.all(
                                const Radius.circular(5.0),
                              ),
                            ),
                          ),
                        ),
                        ListTile(
                          title: Text('Settings'),
                          leading: Icon(Icons.settings),
                          subtitle: Text('Lorem ipsum'),
                          trailing: Text('412 €'),
                          onTap: () {
                            displayModalRoot(context, useRootNavigator);
                          },
                        ),
                        ListTile(
                          title: Text('Settings'),
                          leading: Icon(Icons.settings),
                          subtitle: Text('Lorem ipsum'),
                          trailing: Text('412 €'),
                          onTap: () {
                            displayModalRoot(context, useRootNavigator);
                          },
                        ),
                        SizedBox(
                          height: 40,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          );
        });
  }

  void displayModalDraggable(BuildContext context, bool useRootNavigator) {
    showModalBottomSheet(
        context: context,
        backgroundColor: Colors.transparent,
        isScrollControlled: true,
        useRootNavigator: useRootNavigator,
        builder: (context) {
          return DraggableScrollableActuator(
            child: DraggableScrollableSheet(
              minChildSize: 0.25,
              initialChildSize: 0.25,
              builder:
                  (BuildContext context, ScrollController scrollController) {
                return ClipRRect(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(12),
                    topRight: Radius.circular(12),
                  ),
                  clipBehavior: Clip.hardEdge,
                  child: Container(
                    color: Colors.white,
                    child: ListView(
                      shrinkWrap: true,
                      controller: scrollController,
                      children: [
                        Container(
                          alignment: Alignment.topCenter,
                          padding: EdgeInsets.only(top: 8),
                          child: Container(
                            width: 60,
                            height: 6,
                            decoration: BoxDecoration(
                              color: Colors.grey,
                              borderRadius: BorderRadius.all(
                                const Radius.circular(5.0),
                              ),
                            ),
                          ),
                        ),
                        ListTile(
                          title: Text('Settings'),
                          leading: Icon(Icons.settings),
                          subtitle: Text('Lorem ipsum'),
                          trailing: Text('412 €'),
                          onTap: () {
                            displayModalDraggable(context, useRootNavigator);
                          },
                        ),
                        ListTile(
                          title: Text('Settings'),
                          leading: Icon(Icons.settings),
                          subtitle: Text('Lorem ipsum'),
                          trailing: Text('412 €'),
                          onTap: () {
                            displayModalDraggable(context, useRootNavigator);
                          },
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Überblick',
          style: TextStyle(
            color: Colors.black87,
          ),
        ),
        backgroundColor: Colors.white,
      ),
      body: Container(
        color: Colors.amber,
        child: DraggableScrollableSheet(
          initialChildSize: 0.3,
          minChildSize: 0.25,
          maxChildSize: 1.0,
          builder: (BuildContext context, scrollController) {
            return ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(12),
                topRight: Radius.circular(12),
              ),
              clipBehavior: Clip.hardEdge,
              child: Container(
                color: Colors.white,
                child: SingleChildScrollView(
                  controller: scrollController,
                  child: Column(
                    children: [
                      Container(
                        alignment: Alignment.topCenter,
                        padding: EdgeInsets.only(top: 8),
                        child: Container(
                          width: 60,
                          height: 6,
                          decoration: BoxDecoration(
                            color: Colors.grey,
                            borderRadius: BorderRadius.all(
                              const Radius.circular(5.0),
                            ),
                          ),
                        ),
                      ),
                      ListTile(
                        title: Text(
                          'DraggableScrollableSheet with Root navigation',
                          style: TextStyle(color: Colors.black54),
                        ),
                        onTap: () {
                          //displayModalDraggable(context);
                          // _displayModal(context);
                          displayModalDraggable(context, true);
                        },
                      ),
                      Divider(
                        height: 1,
                      ),
                      ListTile(
                        title: Text(
                          'DraggableScrollableSheet without Root navigation',
                          style: TextStyle(color: Colors.black54),
                        ),
                        onTap: () {
                          //displayModalDraggable(context);
                          // _displayModal(context);
                          displayModalDraggable(context, false);
                        },
                      ),
                      Divider(
                        height: 1,
                      ),
                      ListTile(
                        title: Text(
                          'Modal with Root navigation',
                          style: TextStyle(color: Colors.black54),
                        ),
                        onTap: () {
                          displayModalRoot(context, true);
                        },
                      ),
                      Divider(
                        height: 1,
                      ),
                      ListTile(
                        title: Text(
                          'Modal without Root navigation',
                          style: TextStyle(color: Colors.black54),
                        ),
                        onTap: () {
                          displayModalRoot(context, false);
                        },
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class SearchTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Suche',
          style: TextStyle(
            color: Colors.black87,
          ),
        ),
        backgroundColor: Colors.white,
      ),
      body: Container(
        color: Colors.greenAccent,
        child: Center(
          child: RaisedButton(
            child: Text('Navigate'),
            onPressed: () {
              final route = MaterialPageRoute(builder: (context) {
                return ChildTab();
              });
              Navigator.of(context).push(route);
            },
          ),
        ),
      ),
    );
  }
}

class FavoriteTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Favoriten',
          style: TextStyle(
            color: Colors.black87,
          ),
        ),
        backgroundColor: Colors.white,
      ),
      body: Container(
        color: Colors.yellow,
        child: Center(
          child: RaisedButton(
            child: Text('Navigate'),
            onPressed: () {
              final route = MaterialPageRoute(builder: (context) {
                return ChildTab();
              });
              Navigator.of(context).push(route);
            },
          ),
        ),
      ),
    );
  }
}

class ProfileTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Profil',
          style: TextStyle(
            color: Colors.black87,
          ),
        ),
        backgroundColor: Colors.white,
      ),
      body: Container(
        color: Colors.blue,
        child: Center(
          child: RaisedButton(
            child: Text('Navigate'),
            onPressed: () {
              final route = MaterialPageRoute(builder: (context) {
                return ChildTab();
              });
              Navigator.of(context).push(route);
            },
          ),
        ),
      ),
    );
  }
}

class ChildTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Child',
          style: TextStyle(
            color: Colors.black87,
          ),
        ),
        backgroundColor: Colors.white,
      ),
      body: Container(
        color: Colors.orange,
        child: Center(
          child: RaisedButton(
            child: Text('Navigate'),
            onPressed: () {
              final route = MaterialPageRoute(builder: (context) {
                return ChildTab();
              });
              Navigator.of(context).push(route);
            },
          ),
        ),
      ),
    );
  }
}