Bottom Sheet Dilaog
Bottom Sheet looks like a dialog, which opens from bottom and closes to bottom with animation. We uses the context argument to lookup the theme and Navigator
Calling bottom sheet dialog-
onPressed: () {
showModalBottomSheet(context: context, builder: (BuildContext context) {
return BottomTimerDialog();
});
}
showModalBottomSheet(context: context, builder: (BuildContext context) {
return BottomTimerDialog();
});
}
BottomTimerDialog Class
class BottomTimerDialog extends StatelessWidget {
Widget build(BuildContext context) {
final titleText = Container(
padding: EdgeInsets.all(20),
child: Text('Bottom Sheet Dialog', style: TextStyle(
fontSize: 18, color: Colors.black, fontWeight: FontWeight.bold)),
);
final middleText = Container(
padding: EdgeInsets.fromLTRB(0, 20, 0, 50),
child: Text('Are you sure you want to delete this?', style: TextStyle(
fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold)),
);
final bottomButtons = Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("OK"),
onPressed: () async {
Navigator.of(context).pop();
}
),
Padding(padding: EdgeInsets.all(20),),
RaisedButton(
child: Text("Cancel"),
onPressed: () {
Navigator.pop(context);
}
),
],
);
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
titleText,
middleText,
bottomButtons
],
);
}
}
Widget build(BuildContext context) {
final titleText = Container(
padding: EdgeInsets.all(20),
child: Text('Bottom Sheet Dialog', style: TextStyle(
fontSize: 18, color: Colors.black, fontWeight: FontWeight.bold)),
);
final middleText = Container(
padding: EdgeInsets.fromLTRB(0, 20, 0, 50),
child: Text('Are you sure you want to delete this?', style: TextStyle(
fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold)),
);
final bottomButtons = Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("OK"),
onPressed: () async {
Navigator.of(context).pop();
}
),
Padding(padding: EdgeInsets.all(20),),
RaisedButton(
child: Text("Cancel"),
onPressed: () {
Navigator.pop(context);
}
),
],
);
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
titleText,
middleText,
bottomButtons
],
);
}
}
ConversionConversion EmoticonEmoticon