Related
i am no newbie to the whole thing of being in a circle of errors, bugs and problem solving.
what i have been facing for the last few weeks is the fact that the code works in another laptop, maybe at someone else's project but i get the errors like it doesn't work although i checked and have run the process successfully a few times before.
it had posted, and those errors didn't exist.
we do have a null checker:
child: SingleChildScrollView(
child: isLoading
? Column(
knowing that is Loading is false
and i run android studio.
ps some of the code below feels missing because it has valuable data , and or it would have been longer than what it already is
Widget build(BuildContext context) {
return DefaultTabController(
length: 1,
child: MaterialApp(
theme: ThemeData(fontFamily: 'Harmattan',),
home: Scaffold(
key: _scaffoldKey,
appBar: AppBar(
actions: [
IconButton(onPressed: (){
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => MaintenanceDataTypesByDriver()));
}, icon: Icon(Icons.view_headline_sharp,size: 40,),)
],
title: Center(child: Text(
'enter',
style: TextStyle(fontSize: 25, color: Colors.white),
),),
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(
Icons.arrow_back_rounded,
size: 40,
color: Colors.white,
),
onPressed: () {
//Navigator.pushNamed(context, mainScreen.id);
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => maintenance_screen()));
},
);
},
),
),
body: TabBarView(
children: [
Center(
child: SingleChildScrollView(
child: isLoading
? Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new CircularProgressIndicator(),
new Text(" اplease hold.. ")
],
)
: new Column(
//crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(height: 0),
Center(
child: Text(
" choose an option",
style: TextStyle(fontSize: 25,),
),
),
SizedBox(height: 5,),
// Operations Types Api List New /
Container(
height: 75,
width: 400,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.35), // border color
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: Center(
child: DropdownButtonHideUnderline(
child: DropdownButton(
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold
),),
.........
}).toList(),
onChanged: (String? newVal) {
setState(() {
print(faultReportingName1.toString());
});
},
value: faultReportingName, //pasing the default id that has to be viewed... //i havnt used something ... //you can place some (id)
),
),
),
),
SizedBox(height: 5),
Center(
child: Text(
"press here",
style: TextStyle(fontSize: 25,),
),
),
SizedBox(height: 5,),
// Fault Locations Api List New
Container(
height: 75,
width: 400,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.35), // border color
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: Center(
child: DropdownButtonHideUnderline(
child: DropdownButton(
hint: Text("اpress here",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold
),),
.....
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold
),
textAlign : TextAlign.end,
),
...........
},
value: faultLocationsName, //pasing the default id that has to be viewed... //i havnt used something ... //you can place some (id)
),
),
),
),
SizedBox(height: 10),
Center(
child: Text(
" date",
style: TextStyle(fontSize: 25),
),
),
//
Container(
width: 300,
height: 75,
child: TextField(
style: TextStyle(color: Colors.black, fontSize: 20),
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
showDatePicker(context: context, initialDate: DateTime.now(), textAlign: TextAlign.center,
decoration: InputDecoration(
errorStyle: TextStyle(height: 0.1),
errorText: _validateStartingDateController ? 'date' : null,
alignLabelWithHint: true,
//labelText: 'Qty',
hintText: '$faultDate1' ,
hintStyle: TextStyle(),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.yellow,
/* 0xfffdbd2a*/width: 20),
borderRadius: BorderRadius.all(Radius.circular(15.0)),
//borderRadius: BorderRadius.circular(15),
),
),
obscureText: false,
//controller: myController,
),
),
//
Center(
child: Text(
"maintenance ",
style: TextStyle(fontSize: 25),
),
),
SizedBox(height: 0),
TextField(
style: TextStyle(fontSize: 20),
keyboardType: TextInputType.number,
//inputFormatters: [FilteringTextInputFormatter.digitsOnly],
controller: opCostController,
textAlign: TextAlign.end,
decoration: InputDecoration(
errorText: _valueValidate ? 'required' : null,
alignLabelWithHint: true,
//labelText: 'Qty',
hintText: 'IQD ',
hintStyle: TextStyle(),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xfffdbd2a), width: 20),
borderRadius:
BorderRadius.all(Radius.circular(15.0)),
//borderRadius: BorderRadius.circular(15),
),
),
obscureText: false,
//controller: myController,
),
SizedBox(height: 0),
Center(
child: Text(
"notes",
style: TextStyle(fontSize: 25),
),
),
SizedBox(height: 0),
TextField(
style: TextStyle(fontSize: 20),
controller: notesController,
textAlign: TextAlign.end,
decoration: InputDecoration(
errorStyle: TextStyle(height: 1),
alignLabelWithHint: true, hintStyle: TextStyle(),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xfffdbd2a), width: 20),
borderRadius:
BorderRadius.all(Radius.circular(15.0)),
//borderRadius: BorderRadius.circular(15),
),
),
obscureText: false,
//controller: myController,
),
SizedBox(height: 5),
Center(
child: _file == null ? Text('') :
Container(
height: 310,
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: FileImage(_file!),
),
borderRadius: BorderRadius.circular(10),
),
//child: Image.asset('images/Logistic.jpg'),
),
),
Container(
height: 50,
width: 200,
child: ElevatedButton(
//style: ElevatedButton.styleFrom(side: BorderSide(width: 1,style: BorderStyle.solid),
style: ButtonStyle(
shape: MaterialStateProperty.all<
RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
side: BorderSide(color: Colors.white)))),
//style: ButtonStyle(shape: OutlinedBorder()),
child: Text(
'save',
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () {
//if(isLoading)return;
setState(() {
double opCost = double.parse(opCostController.text.trim());
String date = faultDateController.text;
int faultLocID = int.parse(faultLocationsName1!.trim());
int faultRepID = int.parse(faultReportingName1!.trim());
String notes = notesController.text.trim();
if(opCost.isNaN || faultReportingName1=='' || faultLocationsName1=='' ||date =='')
{
print('empty');
return;
}
else{
upload();
I think the problem is coming from your data model class. some of your String values is Null.
Try to check it carefully.
I am new to flutter so please bare with me and my ulgly code here. I am trying to create a login screen and so far I have the following.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
foregroundColor: Colors.white,
title: Text('Login Page '),
),
body: Padding(
padding: EdgeInsets.all(10),
child: ListView(
children: <Widget>[
Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10),
child: Text(
'The Hockey Lab',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.w500,
fontSize: 30),
)),
Container(
padding: EdgeInsets.all(10),
child: TextField(
controller: nameController,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 0.0),
),
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.white)),
labelText: 'User Name',
),
),
),
Container(
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
child: TextField(
style: TextStyle(color: Colors.white),
obscureText: true,
controller: passwordController,
decoration: InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.white)),
labelText: 'Password',
),
),
),
FlatButton(
onPressed: () {
//forgot password screen
},
textColor: Colors.blue,
child: Text('Forgot Password'),
),
Container(
height: 50,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text('Login'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AdminMenuPage()),
);
print(passwordController.text);
},
)),
Container(
child: Row(
children: <Widget>[
Text('Does not have account?'),
FlatButton(
textColor: Colors.blue,
child: Text(
'Sign in',
style: TextStyle(fontSize: 20),
),
onPressed: () {
//signup screen
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
))
],
)));
}
}
Which is producing me this Gui however I have an issue When I first load the app I get this
But I want the both textboxes to be white all the time with the frames but when I take my mouse away it disappears I presume its another colour I need like a not focussed colour, also you will notice the username bit has disapeared from the text field widget?.
Also does flutter have such a thing as place holder text color?
I am evuluating flutter for front end stuff at min as Maui is pushed back another six months and I just want to see how long takes me to do the same app in flutter.
you need just to set the color of the container that contain the textField like this :
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
foregroundColor: Colors.white,
title: Text('Login Page '),
),
body: Padding(
padding: EdgeInsets.all(10),
child: ListView(
children: <Widget>[
Container(
alignment: Alignment.center,
padding: EdgeInsets.all(10),
child: Text(
'The Hockey Lab',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.w500,
fontSize: 30),
)),
Container(
color: Colors.White, // here set the color you want
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey,
),
padding: EdgeInsets.all(10),
child: TextField(
controller: nameController,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 0.0),
),
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.white)),
labelText: 'User Name',
),
),
),
Container(
color: Colors.White, // here set the color you want
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey,
),
padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
child: TextField(
style: TextStyle(color: Colors.white),
obscureText: true,
controller: passwordController,
decoration: InputDecoration(
border: new OutlineInputBorder(
borderSide: new BorderSide(color: Colors.white)),
labelText: 'Password',
),
),
),
FlatButton(
onPressed: () {
//forgot password screen
},
textColor: Colors.blue,
child: Text('Forgot Password'),
),
Container(
height: 50,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
child: RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text('Login'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => AdminMenuPage()),
);
print(passwordController.text);
},
)),
Container(
child: Row(
children: <Widget>[
Text('Does not have account?'),
FlatButton(
textColor: Colors.blue,
child: Text(
'Sign in',
style: TextStyle(fontSize: 20),
),
onPressed: () {
//signup screen
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
))
],
)));
}
}
I want my program to print the text "Data has been inserted!" if I get a positive response from the database. It works perfectly except the fact that it doesn't show the text only if I press Ctrl+s.
Does anyone know how can I fix that?
Or maybe how can I tell the program to Ctrl+S automaticly?
(please ignore the other Widgets and variables, I didn't put all of them)
Please let me know if you have any suggestions.
Thanks! :)
Widget _buildInsertedData(){
if(b==1){
print('1');
return Text(
'Data has been inserted!',
);
}
else{
return Text(' ');
}
}
In _buildInsertedData(), I return the Text(' ') so that when the program first runs it wont show anything. This might not be the best way of doing it.
(you can scroll down till the end of the 'build' Widget, that's where the '_buildInsertedData()' is called).
#override
Widget build(BuildContext context) {
email=ModalRoute.of(context).settings.arguments;
email=email["email"];
// print(email);
return Scaffold(
appBar: new AppBar(
title: new Text(
'OrderLunch',
style: TextStyle(
fontSize: 26.0,
fontWeight: FontWeight.bold,
),
),
centerTitle: true,
),
body: Container(
height: 595,
width: 800,
///not accurate
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/portocale.jpg'),
),
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
child: Column(
children: [
SizedBox(height: 20),
Container(
decoration: BoxDecoration(
border: Border.all(
width: 3.5,
color: Colors.blue[400],
),
borderRadius: BorderRadius.all(
Radius.circular(15),
),
color: Colors.white,
),
//padding: EdgeInsets.all(8),
//color: Colors.white,
child: Text(
'copil/copii:',
style: TextStyle(
color: Colors.black.withOpacity(1),
fontWeight: FontWeight.bold,
fontSize: 23.0,
),
),
),
SizedBox(height: 40),
SizedBox(height: 270, child: FutureBuilder(
future: getMethod(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
List snap = snapshot.data;
if(bool1==0){
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
}
if (snapshot.hasError) {
return Center(
child: Text('Error fatching Data!'),
);
}
catiCopii=snap.length;
bool1=1;
}
//print('hi');
if (catiCopii == 1) {
elev1nume = snap[0]['elevNume'];
elev1prenume = snap[0]['elevPrenume'];
return ListTile(
title: Column(
children: [
Row(
children: [
Text(' '),
Container(
decoration: BoxDecoration(
border: Border.all(
width: 4,
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(4),
),
color: Colors.white,
),
child: Text(
"$elev1nume $elev1prenume:",
style: TextStyle(
decoration: TextDecoration.underline,
color: Colors.black,
fontSize: 22.0,
),
),
),
],
),
Row(
children: [
Text(' '),
Container(
decoration: BoxDecoration(
border: Border.all(
width: 4,
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(4),
),
color: Colors.white,
),
child: Text(
'Ii se va comanda maine mancare:',
style: TextStyle(
color: Colors.black,
fontSize: 17.0,
),
),
),
Text(' '),
_buildFirstDate(),
],
),
SizedBox(height: 20.0),
],
),
);
}
else {
///sunt 2 sau mai multi copii
if(bool==0){
elev1nume = snap[0]['elevNume'];
elev1prenume = snap[0]['elevPrenume'];
elev2nume = snap[1]['elevNume'];
elev2prenume = snap[1]['elevPrenume'];
bool=1;
}
return ListTile(
title: Column(
children: [
Row(
children: [
Text(' '),
Container(
decoration: BoxDecoration(
border: Border.all(
width: 4,
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(4),
),
color: Colors.white,
),
child: Text(
"$elev1nume $elev1prenume:",
style: TextStyle(
decoration: TextDecoration.underline,
color: Colors.black,
fontSize: 22.0,
),
),
),
],
),
Row(
children: [
Text(' '),
Container(
decoration: BoxDecoration(
border: Border.all(
width: 4,
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(4),
),
color: Colors.white,
),
child: Text(
'Ii se va comanda maine mancare:',
style: TextStyle(
color: Colors.black,
fontSize: 17.0,
),
),
),
Text(' '),
_buildFirstDate(),
],
),
SizedBox(height: 20.0),
Row(
children: [
Text(' '),
Container(
decoration: BoxDecoration(
border: Border.all(
width: 4,
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(4),
),
color: Colors.white,
),
child: Text(
"$elev2nume $elev2prenume:",
style: TextStyle(
decoration: TextDecoration.underline,
color: Colors.black,
fontSize: 22.0,
),
),
),
],
),
Row(
children: [
Text(' '),
Container(
decoration: BoxDecoration(
border: Border.all(
width: 4,
color: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(4),
),
color: Colors.white,
),
child: Text(
'Ii se va comanda maine mancare:',
style: TextStyle(
color: Colors.black,
fontSize: 17.0,
),
),
),
Text(' '),
_buildSecondDate(),
],
),
],
),
);
}
},
)
),
SizedBox(height: 150),
RaisedButton (
color: Colors.blue[400],
child: Text(
'Save changes',
style: TextStyle(
fontSize: 19.0,
),
),
onPressed: () {
if(catiCopii==1)
updateMethod1();
else{
updateMethod1();
updateMethod2();
}
Future.delayed(Duration(seconds: 1),(){
if (b == 1) {
_buildInsertedData();
print(':)');
//b = 0;
}
});
},
),
_buildInsertedData(),
],
),
),
);
}
I'm guessing it's because _buildInsertedData returns a widget, which you have also added to your tree - which is correct. But calling that function on onPressed doesn't update the widget in the tree. When you press the button it updates the value but you're not rebuilding the widget tree until you press Ctrl-S.
To rebuild the tree you can call
setState(() {
// you can set any new values here (but not necessary)
});
So maybe you want to do it like this:
onPressed: ......
// b gets updated somewhere here before the future
Future.delayed(Duration(seconds: 1),(){
if (b == 1) {
setState(() { }); // rebuilds tree on screen
}
});
You're also checking if b==1 twice - consider removing one :)
I'm new to flutter and i'm trying to put a border color to an AlertDialog.
I can't find a way to do it, so i tried to replace it with a container but the font isn't the same and i can't find the correct font.
Here is the AlertDialog i'm trying to replicate.
The font is the same used for the FlatButton label, yet i still can't find it.
AlertDialog(
backgroundColor: Theme.of(context).primaryColor,
contentPadding: EdgeInsets.all(0),
title:Center(child:Text(contact.name + " "+ contact.familyName)),
content:Column(
children: <Widget>[
Text(_role,style: _style),
Divider(
color: Colors.blueGrey,
),
FlatButton.icon(
label: Text(
"Voir le profil",
),
icon:Icon(
Icons.account_circle,
color: Colors.black,
),
onPressed:(){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => UserProfileScreen(userId:contact.id)),
);
},
),
FlatButton.icon(
label: Text(
"Ajouter en ami",
style:TextStyle(color:Colors.green),
),
icon:Icon(
Icons.add,
color: Colors.green,
),
onPressed:()=>Navigator.pop(context,RoleActions.AJOUT_AMI),
),
_buildPermissions(),
],
),
),
If you're just looking for a border, you can set that with shape:
return AlertDialog(
backgroundColor: Colors.black,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.red)),
);
Dont replace the whole thing with the container rather than enclose them with a container.
like this
Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.white //Add color of your choice
)
),
child: AlertDialog()),
I replaced everything with a container to mimic an AlertDialog, and copied data from the theme
Container(
padding:EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0),
child:Container(
decoration: BoxDecoration(
color: lighten(Theme.of(context).primaryColor,10),
borderRadius: BorderRadius.all(Radius.circular(20)),
border: Border.all(
color: Theme.of(context).primaryColorLight,
),
),
padding: EdgeInsets.all(10),
child : Column(
children: <Widget>[
Text(
contact.name + " "+ contact.familyName,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headline6.copyWith(color:Colors.red),
),
Text(_role,style: _style,textAlign: TextAlign.center),
Divider(
color: Colors.blueGrey,
),
FlatButton.icon(
label: Text(
"Voir le profil",
),
icon:Icon(
Icons.account_circle,
color: Theme.of(context).primaryColorLight,
),
onPressed:(){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => UserProfileScreen(userId:contact.id)),
);
},
),
FlatButton.icon(
label: Text(
"Ajouter en ami",
style:TextStyle(color:Colors.green),
),
icon:Icon(
Icons.add,
color: Colors.green,
),
onPressed:()=>Navigator.pop(context,RoleActions.AJOUT_AMI),
),
_buildPermissions(),
],
),
)
)
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,
)
),
),