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;
}
}
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.