Related
I'm new to Flutter and trying to customize the AlertDialog widget of the material dart.
There are ways to set the background color for the whole dialog, is there a way to set the background color only to certain part of the dialog, from the attached picture the background color for the actions section of dialog should be different.
Try below code hope its helpful to you.
Your Widget to call alrtDialog
TextButton(
onPressed: () {
showDataAlert();
},
child: Text(
'Pressed',
),
),
Your Alert Dialog function
showDataAlert() {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(
20.0,
),
),
),
contentPadding: EdgeInsets.only(
top: 10.0,
),
title: Text(
"Your Title Here",
style: TextStyle(fontSize: 24.0),
),
content: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"Your Contents Here",
style: TextStyle(fontSize: 24.0),
),
SizedBox(
height: 5.0,
),
Container(
decoration: BoxDecoration(
color: Colors.grey.shade500,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0)),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
style: ElevatedButton.styleFrom(
primary: Colors.white,
),
child: Text(
"Cancel",
style: TextStyle(
color: Colors.black,
),
),
),
SizedBox(
width: 10,
),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
style: ElevatedButton.styleFrom(
primary: Colors.black,
),
child: Text(
"Confirm",
),
),
],
),
)),
],
),
),
);
});
}
Refer ElevatedButton here
Refer AlertDialog here
Your Result Screen->
AlertDialog has backgroundColor parameter and takes Color that will apply to the full background.
title, actions takes widget can be configured the way you want.
AlertDialog(
backgroundColor: Colors.pink,
content: Text("Message"),
buttonPadding: EdgeInsets.all(13),
actions: [
ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
),
child: Text("Cancel"),
),
ElevatedButton(
onPressed: () {},
child: Text("Confirm"),
),
],
);
I'm using ElevatedButton as action button, and you can choose anything and configure it. While everything is widget, you can place the way you want. You can also override the themeData.
More about
AlertDialog-class.
ElevatedButton
themes
ElevatedButton config on SO
You can create custom dialog.
like this.
Dialog errorDialog = Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)), //this right here
child: Container(
height: 200.0,
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(15.0),
child: Text('Cool', style: TextStyle(color: Colors.red),),
),
Padding(
padding: EdgeInsets.all(15.0),
child: Text('Awesome', style: TextStyle(color: Colors.red),),
),
Padding(padding: EdgeInsets.only(top: 50.0)),
TextButton(onPressed: () {
Navigator.of(context).pop();
},
child: Text('Done!', style: TextStyle(color: Colors.purple, fontSize: 18.0),))
],
),
),
);
and show dialog
showDialog(context: context, builder: (BuildContext context) => errorDialog);}
https://i.stack.imgur.com/Mz3YL.png
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
//this right here
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Column(
children: [
Padding(
padding: EdgeInsets.all(15.0),
child: Text(
'Cool',
style: TextStyle(color: Colors.red),
),
),
Padding(
padding: EdgeInsets.all(15.0),
child: Text(
'Awesome',
style: TextStyle(color: Colors.red),
),
),
Padding(padding: EdgeInsets.only(top: 50.0)),
],
),
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(12), bottomRight: Radius.circular(12))
),
width: double.maxFinite,
child: TextButton(
onPressed: () {},
child: Text(
'Done!',
style: TextStyle(color: Colors.purple, fontSize: 18.0),
)),
)
],
),
); ```
[1]: https://i.stack.imgur.com/Mz3YL.png
Textfield inside bottom sheet gets hidden when keyboard pops up to type inside textfield in flutter. How to move TextField up when keyboard appears?
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(
Icons.west,
size: 30,
color: Colors.black,
),
onPressed: () {
Navigator.pop(context);
},
),
actions: [
Icon(
Icons.filter,
color: Colors.black,
),
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
VideoCardWidget(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
TextButton(
onPressed: () {
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
builder: (context) {
return Container(
margin: EdgeInsets.zero,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
// gradient: LinearGradient(
// colors: [Color(0xFF6589AB), Colors.white],
// begin: Alignment.topCenter,
// end: Alignment.bottomCenter,
// ),
color: Colors.white,
),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(15),
),
child: Card(
elevation: 10,
margin: EdgeInsets.zero,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
fillColor: Color(0xFFf5f5f5),
filled: true,
hintText: 'Ask your Doubts',
hintStyle: TextStyle(
color: Colors.grey[600],
),
),
keyboardType: TextInputType.multiline,
maxLines: 15,
),
),
),
),
SizedBox(
height: 10,
),
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(right: 20),
child: TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 40.0),
child: Text(
'Send',
style: TextStyle(color: Colors.white),
),
),
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(12),
),
),
backgroundColor:
MaterialStateProperty.all<Color>(
Color(0xFF003b73),
),
),
),
),
),
],
),
),
);
});
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFF003b73),
),
),
child: Text(
'Ask Your Doubt',
style: TextStyle(
color: Colors.white,
),
),
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFF003b73),
),
),
// onPressed: _openQuizBottomSheet,
onPressed: () {},
child: Text(
'Quiz',
style: TextStyle(
color: Colors.white,
),
),
),
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFF003b73),
),
),
onPressed: () {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) {
// return KeyNoteScreen();
// },
// ),
// );
},
child: Text(
'Key Notes',
style: TextStyle(
color: Colors.white,
),
),
),
],
),
],
),
);
in your case you need to set isScrollControlled in your showModalBottomSheet as follows:
showModalBottomSheet(
context: context,
isScrollControlled: true,
but In general, you can have to approaches:
use resizeToAvoidBottomPadding to avoid the overflow:
return Scaffold(
resizeToAvoidBottomPadding: false, // this avoids the overflow error
// in flutter 2.0 or upper versions, use resizeToAvoidBottomInset instead
appBar: AppBar(
title: Text('TextField Animation Demo'),
),
or wrap your whole widget by SingleChildScrollView. However, as you returning column, first you need to wrap it by suitable container size. for example set height of this container based on the screen size.
You need Wrap Column with SingleChildScrollView
I have a few buttons and I need to set the colour of the card view as per the button click.
Basically, I'm adding a theme to my post, so on the preview page, I need to allow the user to select the colour of their choice by clicking the button.
Screenshot:
CardView Page with Buttons
Button Code:
Padding(
padding: const EdgeInsets.only(top: 10),
child: Row(
children: [
Expanded(
child: MaterialButton(
onPressed: () {},
color: Colors.yellow,
shape: CircleBorder(),
),
),
Expanded(
child: MaterialButton(
onPressed: () {},
color: Colors.orange,
shape: CircleBorder(),
),
),
Expanded(
child: MaterialButton(
onPressed: () {},
color: Colors.brown,
shape: CircleBorder(),
),
),
Expanded(
child: MaterialButton(
onPressed: () {},
color: Colors.blue,
shape: CircleBorder(),
),
),
Expanded(
child: MaterialButton(
onPressed: () {},
color: Colors.green,
shape: CircleBorder(),
),
),
Expanded(
child: MaterialButton(
onPressed: () {},
color: Colors.black,
shape: CircleBorder(),
),
),
],
),
),
Cardview Code:
Card(
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(
color: MyColors.black, width: 1.5),
borderRadius: BorderRadius.circular(10)),
child: Column(
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
backgroundImage:
CachedNetworkImageProvider(
_profileurl),
),
),
Text(_username),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Obx(
() => Text(
pollDataController1.question.value,
style: TextType.boldHeading,
),
),
),
Obx(
() => ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.asset(
(pollImageController.imageDisplay.value),
width: 320,
height: 170,
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10.0),
child: Column(
children: [
Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Obx(
() => Text(
pollDataController1
.op1.value +
" ",
style: TextStyle(
color: MyColors.offBlack,
fontSize: 16.0,
),
),
),
Obx(
() => Text(pollDataController1
.op1Emoji.value),
),
SizedBox(
width: 25.0,
),
Obx(
() => Text(
pollDataController1
.op2.value +
" ",
style: TextStyle(
color: MyColors.offBlack,
fontSize: 16.0,
),
),
),
Obx(
() => Text(pollDataController1
.op2Emoji.value),
),
],
),
],
),
SizedBox(height: 13.0),
Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Obx(
() => Text(
pollDataController1
.op3.value +
" ",
style: TextStyle(
color: MyColors.offBlack,
fontSize: 16.0,
),
),
),
Obx(
() => Text(pollDataController1
.op3Emoji.value),
),
SizedBox(
width: 25.0,
),
Obx(
() => Text(
pollDataController1
.op4.value +
" ",
style: TextStyle(
color: MyColors.offBlack,
fontSize: 16.0,
),
),
),
Obx(
() => Text(pollDataController1
.op4Emoji.value),
),
],
),
],
),
],
),
),
],
),
),
),
You can use a global variable for color and a function to change the color on tapping each circle button.
So an example would be:
Color cardBackgroundColor = Colors.white;
void changeColor(Color changeToColor) {
setState(() {
cardBackgroundColor = changeToColor;
});
}
then in your button code use it like this:
Expanded(
child: MaterialButton(
onPressed: changeColor(Colors.yellow),
color: Colors.yellow,
shape: CircleBorder(),
),
),
and in the Cardview Code change it to:
Card(child: Container(
decoration: BoxDecoration(
color: cardBackgroundColor,
border: Border.all(
color: MyColors.black, width: 1.5),
borderRadius: BorderRadius.circular(10)),
This would be the quickest way to do it, although it might not be the cleanest.
I've made a chat page that contains the header, a MessagesStream and a Row that includes the TextField and RaisedButton. I've checked every single page there is about this issue, both in GitHub and StackOverflow, but I wasn't able to find any solution. The row does not go up when the keyboard is launched, instead it goes over the bottom part of the screen, hiding everything.
Could anyone please help me figure this out? I've literally tried everything.
This is my Scaffold:
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
FocusScope.of(context).requestFocus(new FocusNode());
},
child: Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: Colors.lightGreenAccent,
appBar: new AppBar(
backgroundColor: Colors.lightGreenAccent,
elevation: 0,
leading: IconButton(
icon: Icon(Icons.arrow_back_ios, color: Colors.white),
onPressed: () => Navigator.of(context).pop(),
),
centerTitle: true,
title: Image(
image: iconApp,
height: 50,
width: 50,
),
),
body: SafeArea(
child: Column(
children: <Widget>[
SizedBox(height: 10),
Expanded(
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Material(
borderRadius: BorderRadius.only(topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0)),
color: grayWhite,
elevation: 2,
child: Padding(
padding: const EdgeInsets.only(bottom:10),
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 10.0, left: 15),
child: CircleAvatar(
child: Image.network(
),
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 10, left: 15),
child: Text(
"Test",
style: TextStyle(
color: Colors.black54,
fontSize: 20
),
),
),
Padding(
padding: const EdgeInsets.only(top: 3, left: 15),
child: Text(
"Test2",
style: TextStyle(
color: Colors.black54,
fontSize: 15
),
),
),
Container(
height: 1,
color: Colors.white70,
)
],
),
)
],
),
),
),
MensagensStream(),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
controller: textEditingController,
autofocus: true,
autocorrect: true,
onChanged: (value) {
mensagem = value;
},
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Digite a sua mensagem..."
),
),
),
),
ButtonTheme(
height: 55,
minWidth: 10,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
100,
)
),
color: Colors.lightGreenAccent,
child: Icon(Icons.send, color: Colors.white),
onPressed: () => {
textEditingController.clear(),
firestore.collection('mensagens').add({
'Mensagem': mensagem,
'Remetente': googleEmail,
'Destinatario': "patio#teste.com",
'DataHorario': FieldValue.serverTimestamp(),
})
},
),
),
],
)
],
),
),
)
],
),
),
),
);
}
}```
Wrap either one of you Columns (probably the outer one) with a SingleChildScrollView. The issue is that simply popping up the keyboard doesn't suddenly tell the layout that it needs to be able to scroll. You have explicitly say you want it to be able to scroll.
See this for more information on the SingleChildScrollView.
You can use a Scaffold and place the text field as bottomSheet
I am trying to create an alert dialog with rounded corners in Flutter same as below screenshot. also add my code here, but my output is exactly different from the expected one. anyone, please help me.
Expected Alert Dialog
my code is here.
void _showAlert() {
AlertDialog dialog = new AlertDialog(
content: new Container(
width: 260.0,
height: 230.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: const Color(0xFFFFFF),
borderRadius: new BorderRadius.all(new Radius.circular(32.0)),
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// dialog top
new Expanded(
child: new Row(
children: <Widget>[
new Container(
// padding: new EdgeInsets.all(10.0),
decoration: new BoxDecoration(
color: Colors.white,
),
child: new Text(
'Rate',
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
],
),
),
// dialog centre
new Expanded(
child: new Container(
child: new TextField(
decoration: new InputDecoration(
border: InputBorder.none,
filled: false,
contentPadding: new EdgeInsets.only(
left: 10.0, top: 10.0, bottom: 10.0, right: 10.0),
hintText: ' add review',
hintStyle: new TextStyle(
color: Colors.grey.shade500,
fontSize: 12.0,
fontFamily: 'helvetica_neue_light',
),
),
)),
flex: 2,
),
// dialog bottom
new Expanded(
child: new Container(
padding: new EdgeInsets.all(16.0),
decoration: new BoxDecoration(
color: const Color(0xFF33b17c),
),
child: new Text(
'Rate product',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
),
],
),
),
);
showDialog(context: context, child: dialog);
}
}
The output I get from the above code is.
Though i am late with the solution, but this may help others searching for it. The following code snippets details how it can be achieved.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
Color myColor = Color(0xff00bfa5);
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Rounde Alert Box",
home: Scaffold(
appBar: AppBar(
backgroundColor: myColor,
title: Text("Rounded Alert Box"),
),
body: RoundedAlertBox(),
),
);
}
}
class RoundedAlertBox extends StatefulWidget {
#override
_RoundedAlertBoxState createState() => _RoundedAlertBoxState();
}
class _RoundedAlertBoxState extends State<RoundedAlertBox> {
#override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
onPressed: openAlertBox,
color: myColor,
child: Text(
"Open Alert Box",
style: TextStyle(color: Colors.white),
),
),
);
}
openAlertBox() {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
contentPadding: EdgeInsets.only(top: 10.0),
content: Container(
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
"Rate",
style: TextStyle(fontSize: 24.0),
),
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
Icon(
Icons.star_border,
color: myColor,
size: 30.0,
),
],
),
],
),
SizedBox(
height: 5.0,
),
Divider(
color: Colors.grey,
height: 4.0,
),
Padding(
padding: EdgeInsets.only(left: 30.0, right: 30.0),
child: TextField(
decoration: InputDecoration(
hintText: "Add Review",
border: InputBorder.none,
),
maxLines: 8,
),
),
InkWell(
child: Container(
padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: myColor,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(32.0),
bottomRight: Radius.circular(32.0)),
),
child: Text(
"Rate Product",
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
),
),
],
),
),
);
});
}
}
The output of the code snippet looks like this:
The container where you set the BoxDecoration is in the widget tree under the alert dialog. Which means you are setting just a box within the padding of your Dialog. You need to create a custom AlertDialog/showDialog and set the radius there. In the custom widget you also add the button and everything where you need to work beyond that padding.
When you include the customShowDialog.dart file in your project (gist.github.com) where you can edit the radius here borderRadius: BorderRadius.all(Radius.circular(20.0)) and call it like this:
return new CustomAlertDialog(
content: new Container(
width: 260.0,
height: 230.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: const Color(0xFFFFFF),
borderRadius:
new BorderRadius.all(new Radius.circular(32.0)),
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// dialog top
new Expanded(
child: new Row(
children: <Widget>[
new Container(
// padding: new EdgeInsets.all(10.0),
decoration: new BoxDecoration(
color: Colors.white,
),
child: new Text(
'Rate',
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
],
),
),
// dialog centre
new Expanded(
child: new Container(
child: new TextField(
decoration: new InputDecoration(
border: InputBorder.none,
filled: false,
contentPadding: new EdgeInsets.only(
left: 10.0,
top: 10.0,
bottom: 10.0,
right: 10.0),
hintText: ' add review',
hintStyle: new TextStyle(
color: Colors.grey.shade500,
fontSize: 12.0,
fontFamily: 'helvetica_neue_light',
),
),
)),
flex: 2,
),
// dialog bottom
new Expanded(
child: new Container(
padding: new EdgeInsets.all(16.0),
decoration: new BoxDecoration(
color: const Color(0xFF33b17c),
),
child: new Text(
'Rate product',
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontFamily: 'helvetica_neue_light',
),
textAlign: TextAlign.center,
),
),
),
],
),
),
);
});
You will get something like this:
EDIT:
Although Flutter lately introduced the shape property which would help you with the rounded corners by setting a ShapeBorder with e.g.
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))
),
you would still need to quickly add a custom widget for some customizations, like custom padding, as stated above.
This worked for me:
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0))),
Try this code :
AlertDialog(
shape: RoundedRectangleBorder(borderRadius:
BorderRadius.all(Radius.circular(15))),
title: Text('Your title!'),
content: Container(),
);
add
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10.0))),
title: Text("Loading..."),
content: CircularProgressIndicator(),
);
},
);
Try this code
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
title: Text('title'),
content: Text('content'),
);
},
);
You can simply use shape property of AlertDialog
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(16)))
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
This line of code will make alert dialog with rounded corner.
Use like this
AlertDialog(
shape:RoundedRectangleBorder(
borderRadius:BorderRadius.circular(10.0,),
),
content: yourContent()
);
Try this code
Theme(
data: Theme.of(context).copyWith(
dialogTheme: DialogTheme(
backgroundColor: Theme.of(context).cardColor,
shape: RoundedRectangleBorder(
borderRadius: radius(6),
),
),
),
child: AlertDialog()
I was looking at these answers and none of them helped me achieve the desired look.
I noticed that there was a default padding so all I did was:
AlertDialog(
titlePadding: EdgeInsets.all(0),
title: Container(
height: 30.00,
width: 300.00,
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.only(topLeft: Radius.circular(32), topRight: Radius.circular(32)),
),
),
)
I overrode the titlePadding attribute and it came just right. There is also a contentPadding attribute if you find any trouble with that. I copied this from one of my apps just to show the attribute, but it is applicable to this case as well.
If you want to use the standard Dialog you can just apply a Decoration to the Container that matches your Dialog settings
showDialog(
context: context,
child: Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
),
child: Text('foobar'),
)
],
),
),
);
To change the appearance of the shape of the dialog, you can set the shape property of the AlertDialog to the desired shape.
AlertDialog default shape is a RoundedRectangleBorder with a radius of 4.0
AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
)
AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(12.0))),
contentPadding: EdgeInsets.only(top: 10.0),
content: Container(
width: 300.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
//crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
IconButton(
icon: Icon(
Icons.highlight_off_outlined, color: Color(0xff5A5D60),),
onPressed: () {
Navigator.of(context,
rootNavigator: true)
.pop();
}),
SizedBox(
width: 10,
)
],
),
Image(
image: AssetImage(
'assets/warningicon.png'),
),
SizedBox(
height: mdq.height * .01,
),
Text(
'Registered Successfully',
style: GoogleFonts.roboto(
color: Color(0xff11171C),
fontSize: mdq.width * .04,
fontWeight: FontWeight.bold),
),
Text(
'Your account has been Successfully\ncreated.',
textAlign: TextAlign.center,
style: GoogleFonts.roboto(
color: Color(0xff11171C),
fontSize: mdq.width * .04,
),
),
SizedBox(
height: mdq.height * .04,
),
Row(
//mainAxisAlignment: MainAxisAlignment.start,
// crossAxisAlignment: CrossAxisAlignment.center,
children: [
InkWell(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Login1()));
},
child: Container(
padding: EdgeInsets.only(
top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: Color(0xffEEEEEE),
borderRadius: BorderRadius.only(
bottomLeft:
Radius.circular(12.0),
//bottomRight: Radius.circular(32.0)
),
),
width: 150,
child: Text(
"No",
style: TextStyle(
color: Color(0xff5A5D60),
fontSize: 17),
textAlign: TextAlign.center,
),
),
),
InkWell(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Testing()));
},
child: Container(
padding: EdgeInsets.only(
top: 20.0, bottom: 20.0),
decoration: BoxDecoration(
color: Color(0xffFFDC00),
borderRadius: BorderRadius.only(
//bottomLeft: Radius.circular(32.0),
bottomRight:
Radius.circular(12.0)),
),
child: Text(
"Yes",
style: TextStyle(
color: Colors.white,
fontSize: 17),
textAlign: TextAlign.center,
),
width: 150,
),
),
],
),
],
),
),
),[You can also show and design dialog box like this**strong text**][1]
You can use like this
using get: ------------->
Get.generalDialog(
pageBuilder: (BuildContext buildContext, Animation animation,
Animation secondaryAnimation) =>
AlertDialog(
contentPadding: EdgeInsets.zero,
// this padding user for outside of alert padding
insetPadding: EdgeInsets.symmetric(horizontal: 10),
content: Container(
height: Get.height - 300, // Change as per your requirement
width: Get.width, // Change as per your requirement
child: <Your Widget>
),
),
));
using alert dialog:------>
CustomAlertDialog(
content: new Container(
width: 260.0,
height: 230.0,
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: const Color(0xFFFFFF),
borderRadius:
new BorderRadius.all(new Radius.circular(32.0)),
),
child: <Your widget>
),
);
});
Padding(
padding: const EdgeInsets.symmetric(horizontal: 23.0),
child: IconButton(
onPressed: (){},
icon: const Icon(
Icons.fiber_new_rounded,
size: 25,
color: Colors.white,
)
),
),