Search code examples
flutterflutter-alertdialog

How to add tabs to an alert dialog in flutter


I have a stand-alone class called dialogs.dart which contains a reusable alert dialog. I want this alert dialog to have tabs, but I have no idea how to implement it if it's possible. Any ideas are highly appreciated. Here's my code for dialogs.dart

import 'package:flutter/material.dart';
enum DialogAction{yes,abort}

class Dialogs{
  static int selectedRadio;
  static void setSelectedRadio(int val){
    selectedRadio=val;
  }

  static Future<DialogAction> yesAbortDialog(
      BuildContext context,
      String title,
      String body,
      )async{
    final action= await showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context){
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          title: Text(title),
          content: StatefulBuilder(
            builder: (BuildContext context, StateSetter setState) {
              return Column(

                mainAxisSize: MainAxisSize.min,
                children: List<Widget>.generate(3, (int index) {
                  return Radio<int>(
                    value: index,
                    groupValue: selectedRadio,
                    onChanged: (int value) {
                      setState(() => selectedRadio = value);
                    },
                  );
                }),
              );

            },
          ),
          actions: <Widget>[
            FlatButton(
              onPressed: ()=>Navigator.of(context).pop(DialogAction.abort),
              child: const Text('cancel'),
            ),
            RaisedButton(
              onPressed: ()=>Navigator.of(context).pop(DialogAction.yes),
              child: const Text('Proceed', style: TextStyle(color: Colors.white),),
              color: Colors.green,
            ),
          ],
        );
      }
    );
    return(action!=null)?action: DialogAction.abort;
  }
}

Solution

  • Don't use 'AlertDialog' for this purpose. Use 'Dialog' class. Inside it you can configure your own child the way you like. Tie tabs and events to it. Refer this - https://api.flutter.dev/flutter/material/Dialog-class.html You can use 'container' with margin to get the barrier effect.