How to implement Popup with Flutter?

Question

I have a Flutter app with screens rendered conditionally with an array. Anyway, I need to have a popup screen like this :

If have stored all my "popup screens" in an array and rendered the main screen and the popup screen in a stack. I don't know if this is the best solution and I guess I will have performance issues.

Here is the PopupContainer class, this Widget is rendered on every Popup Screen with the child passed as content :

class PopupContainer extends StatefulWidget {
  final Widget? child;

  const PopupContainer({
    Key? key,
    this.child,
  }) : super(key: key);

  @override
  State<PopupContainer> createState() => _PopupContainerState();
}

class _PopupContainerState extends State<PopupContainer> {
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;

    return Consumer<ScreenManager>(
      builder: (context, manager, child) => Stack(
        alignment: Alignment.bottomCenter,
        children: [
          BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
            child: Container(
              decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
            ),
          ),
          Container(
            height: height * 0.8,
            width: double.infinity,
            padding: const EdgeInsets.all(32),
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16),
                topRight: Radius.circular(16),
              ),
              boxShadow: [
                BoxShadow(
                  blurRadius: 37,
                  spreadRadius: 0,
                  color: Color.fromRGBO(28, 48, 72, 0.24),
                ),
              ],
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  alignment: Alignment.topRight,
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      padding: EdgeInsets.zero,
                      primary: Colors.transparent,
                      shadowColor: Colors.transparent,
                    ),
                    onPressed: () => manager.closePopup(),
                    child: SvgPicture.asset('assets/close.svg'),
                  ),
                ),
                widget.child ?? const SizedBox.shrink(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

The consumer is used for handling the screens states :

enum ScreensName {
  homeScreen,
  favoriteProductsScreen,
  archivedListsScreen,
  recipesScreen,
}

enum PopupsName {
  newProductPopup,
  archivedListPopup,
  editProductPopup,
  newRecipePopup,
}

const screens = <ScreensName, Widget>{
  ScreensName.homeScreen: HomeScreen(),
  ScreensName.favoriteProductsScreen: FavoriteProductsScreen(),
  ScreensName.archivedListsScreen: ArchivedListsScreen(),
  ScreensName.recipesScreen: RecipesScreen(),
};

const popups = <PopupsName, Widget>{
  PopupsName.newProductPopup: NewProductPopup(),
};

class ScreenManager extends ChangeNotifier {
  static ScreensName screenName = ScreensName.homeScreen;
  static PopupsName? popupName = PopupsName.newProductPopup;

  get currentScreen => screens[screenName];
  get currentPopup => (popups[popupName] ?? Container());

  /// Open the given popup.
  void openPopup(PopupsName newPopupName) {
    popupName = newPopupName;

    notifyListeners();
  }

  /// Closes the current popup.
  void closePopup() {
    popupName = null;

    notifyListeners();
  }

  /// Change the screen.
  void setScreen(ScreensName newScreenName) {
    screenName = newScreenName;

    notifyListeners();
  }
}

And finally, the main component build method (I also have some theme styling but useless here) :

Widget build(BuildContext context) {
    DatabaseHelper.initDb();

    return Consumer<ScreenManager>(
      builder: (context, screenManager, child) => Material(
        child: MaterialApp(
          title: _title,
          theme: _customTheme(),
          home: Stack(
            alignment: Alignment.bottomCenter,
            children: <Widget>[
              screenManager.currentScreen,
              screenManager.currentPopup,
            ],
          ),
        ),
      ),
    );
  }

PS : I am a web developer so I know the main programming principles but Dart and mobile dev is brand new for me. Also, I could share my code with you, however, this project is splitted into files and it would take too much space in the post. Ask if you need it !

Answer 1

Maybe an easier solution would be to use the showDialog function where you need to trigger the popup. Check out the docs https://api.flutter.dev/flutter/material/showDialog.html

showDialog(context: context, builder: (context) => AlertDialog(title: Text('Title'), content: Text('Here content'),));