Menu
I'm just new in flutter and now I have a problem in my dialog box. The problem is that my dialog box is becoming overflowed because of texts. So, now I want to make it scrollable so that texts still can be viewed. I already put a "SingleChildScrollView" on it but still doesn't work Please help.
My code:
_viewingRequest(dynamic data) async {
return showDialog(
barrierDismissible: false,
context: _scaffoldKey.currentContext,
builder: (context) {
return SingleChildScrollView(
child: AlertDialog(
contentPadding: EdgeInsets.only(left: 25, right: 25),
title: Center(child: Text("Information")),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
content: Container(
height: 200,
width: 300,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 20,
),
Text(
'Name of requestor: ${data['Name_ofUser']}'
),
Text(
'Description:',
),
Text(
'${data['Help_Description']}',
),
Text(
'Type of help needed: ${data['Help_TypeNeeded']}',
)
],
),
),
actions: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.20,
child: RaisedButton(
child: new Text(
'Fund',
style: TextStyle(color: Colors.white),
),
color: Color(0xFF121A21),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
onPressed: () {
saveIssue();
Navigator.of(context).pop();
},
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.01,
),
Padding(
padding: const EdgeInsets.only(right: 70.0),
child: Container(
width: MediaQuery.of(context).size.width * 0.20,
child: RaisedButton(
child: new Text(
'Cancel',
style: TextStyle(color: Colors.white),
),
color: Color(0xFF121A21),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.02,
),
],
)
],
),
);
});
}
My UI:
Link for my UI
531
You can Use Align widget and align your dialog widget as per your need. Here in example i am setting it to the bottomCenter that is Alignment(0, 1) . Example code: Align( alignment: Alignment(0, 1), child: Material( shape: RoundedRectangleBorder(borderRadius: BorderRadius.
Flutter custom Alert Dialog If you want to implement more advanced custom Dialog, you can use Dialog widget for that. Instead of the AlertDialog , in here we return Dialog widget. The showDialog method will remain the same. You can use a Container widget to set relevant height for the Dialog.
Change position of SingleChildScrollView to on top of Column works fine
return AlertDialog(
contentPadding: EdgeInsets.only(left: 25, right: 25),
title: Center(child: Text("Information")),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
content: Container(
height: 200,
width: 300,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 20,
),
Text(
'Name of requestor: }'
),
Text(
'Description:' * 20,
),
Text(
'Help_Description',
),
Text(
'Type of help needed:Help_TypeNeeded',
)
],
),
),
),
full test code
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() {
runApp(MyStatelessApp());
}
class MyStatelessApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Dialog Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: StatelessWidgetDemo(),
);
}
}
class StatelessWidgetDemo extends StatefulWidget {
@override
_StatelessWidgetDemoState createState() => _StatelessWidgetDemoState();
}
class _StatelessWidgetDemoState extends State<StatelessWidgetDemo> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Dialog Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {
_showTestDialog();
},
child: Text('Show Test Dialog'),
),
SizedBox(
height: 20,
),
RaisedButton(
onPressed: () {
_showCupertinoDialog();
},
child: Text('Show Cupertino Dialog'),
),
SizedBox(
height: 20,
),
RaisedButton(
onPressed: () {
_showSimpleDialog();
},
child: Text('Show Simple Dialog'),
)
],
),
)));
}
void _showTestDialog() {
showDialog(
context: context,
barrierDismissible: false,
//context: _scaffoldKey.currentContext,
builder: (context) {
return AlertDialog(
contentPadding: EdgeInsets.only(left: 25, right: 25),
title: Center(child: Text("Information")),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
content: Container(
height: 200,
width: 300,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 20,
),
Text(
'Name of requestor: }'
),
Text(
'Description:' * 20,
),
Text(
'Help_Description',
),
Text(
'Type of help needed:Help_TypeNeeded',
)
],
),
),
),
actions: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.20,
child: RaisedButton(
child: new Text(
'Fund',
style: TextStyle(color: Colors.white),
),
color: Color(0xFF121A21),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
onPressed: () {
//saveIssue();
Navigator.of(context).pop();
},
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.01,
),
Padding(
padding: const EdgeInsets.only(right: 70.0),
child: Container(
width: MediaQuery.of(context).size.width * 0.20,
child: RaisedButton(
child: new Text(
'Cancel',
style: TextStyle(color: Colors.white),
),
color: Color(0xFF121A21),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.02,
),
],
)
],
);
});
}
void _showMaterialDialog() {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Material Dialog'),
content: Text('This is the content of the material dialog'),
actions: <Widget>[
FlatButton(
onPressed: () {
_dismissDialog();
},
child: Text('Close')),
FlatButton(
onPressed: () {
print('HelloWorld!');
_dismissDialog();
},
child: Text('HelloWorld!'),
)
],
);
});
}
_dismissDialog() {
Navigator.pop(context);
}
void _showCupertinoDialog() {
showDialog(
context: context,
builder: (context) {
return CupertinoAlertDialog(
title: Text('Cupertino Dialog'),
content: Text('This is the content of the cupertino dialog'),
actions: <Widget>[
FlatButton(
onPressed: () {
_dismissDialog();
},
child: Text('Close')),
FlatButton(
onPressed: () {
print('HelloWorld!');
_dismissDialog();
},
child: Text('HelloWorld!'),
)
],
);
});
}
void _showSimpleDialog() {
showDialog(
context: context,
builder: (context) {
return SimpleDialog(
title: Text('Chosse an Option'),
children: <Widget>[
SimpleDialogOption(
onPressed: () {
_dismissDialog();
},
child: const Text('Option 1'),
),
SimpleDialogOption(
onPressed: () {
_dismissDialog();
},
child: const Text('Option 2'),
),
SimpleDialogOption(
onPressed: () {
_dismissDialog();
},
child: const Text('Option 3'),
),
SimpleDialogOption(
onPressed: () {
_dismissDialog();
},
child: const Text('Option 4'),
),
],
);
});
}
}
Just simply set the scrollable param of the AlertDialog to true to wrap both the title and content widgets in a scroll view, allowing all overflowed content to be visible while still showing the button bar.
OutlinedButton(
onPressed: () => showDialog(
context: context,
builder: (_) => AlertDialog(
title: const Text('Reason'),
shape: const RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(20))),
scrollable: true,
content: Text('Super long content here'),
actionsAlignment: MainAxisAlignment.center,
actions: [
OutlinedButton(
onPressed: () => Navigator.pop(context),
child: Text('I have done reading ✓'),
)
],
),
),
child: Text('View reason for visit'),
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
