Flutter, being growing choice for many developers now a days has yet many things to be explored about. Today, I would like to display how you can have a Custom Dialog in Flutter?
I don\’t need to go to the basics of setting up your flutter project. I am assuming you have one already running. The dialog we will build will be for rating and review.
We will begin by making a small stateless widget that will be used to display the stars for our rating widget (since flutter consists of widgets throughout it\’s framework). We will call it ReviewStars.
class ReviewStars extends StatelessWidget {
final int rating;
final Function updateRating;
ReviewStars({this.rating, this.updateRating});
@override
Widget build(BuildContext context) {
return Row(
children: [
IconButton(icon: rating > 0 ? Icon(Icons.star, color: Colors.red) : Icon(Icons.star_border, color: Colors.red), onPressed: () => updateRating(1)),
IconButton(icon: rating > 1 ? Icon(Icons.star, color: Colors.red) : Icon(Icons.star_border, color: Colors.red), onPressed: () => updateRating(2)),
IconButton(icon: rating > 2 ? Icon(Icons.star, color: Colors.red) : Icon(Icons.star_border, color: Colors.red), onPressed: () => updateRating(3)),
IconButton(icon: rating > 3 ? Icon(Icons.star, color: Colors.red) : Icon(Icons.star_border, color: Colors.red), onPressed: () => updateRating(4)),
IconButton(icon: rating > 4 ? Icon(Icons.star, color: Colors.red) : Icon(Icons.star_border, color: Colors.red), onPressed: () => updateRating(5)),
],
);
}
}
This widget will have two parameters, where one is the Rating value and the other is a Function that will be passed from the parent widget. This widget will have a row where we will keep our Stars as IconButton. The colors of the IconButton will change depending on the value of the rating variable. We are using ternary operator to get the Star and Outlined Star.
Now our actual Review Widget, which will have a child of the ReviewStars
is here:
class ReviewDialog extends StatefulWidget {
@override
_ReviewDialogState createState() => _ReviewDialogState();
}
class _ReviewDialogState extends State<ReviewDialog> {
int rating = 0;
int userId;
TextEditingController remarksController = TextEditingController();
updateRating(int val){
setState(() {
rating = val;
});
}
@override
void initState() {
super.initState();
userId = 0;
}
@override
Widget build(BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))
),
title: Column(
children: <Widget>[
Text(\'Your Opinion Matters\'),
SizedBox(height: 10,),
ReviewStars(rating: rating, updateRating: (val) => updateRating(val),),
TextFormField(
maxLines: 3,
minLines: 1,
decoration: InputDecoration(
fillColor: Colors.white,
filled: true,
hintText: \'Remarks\',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide.none,
),
),
controller: remarksController,
),
Row(
children: [
Expanded(
child: RaisedButton(
child: Text(\'Rate\'),
onPressed: () {
//TODO: Do your action
},
),
),
],
)
],
)
);
}
}
Then in our ReviewWidget
we will be displaying a title, the RatingStars
widget, a remarks column and a button for submitting the final rating.
We will be calling this widget using the showDialog
method of Flutter:
showDialog(context: context, builder: (context){
return ReviewDialog();
});
The result will look like this:
Thank you for reading this article. If you would like to learn more make sure to follow this blog or bookmark it.
Leave a Reply