Navigator.push is not working in Flutter? - flutter

I'm making a learning app that has 2 buttons
1: Lead you directly learning dashboard
2: The login & signup
The start learning button work fine,
the problem with the login button
When I clicked nothing
happed
there are no errors in my code, but the button is not working, and I don't know why
The code for login button:
//------------------------------------------------------------------------------
// Start Learning Button..
//------------------------------------------------------------------------------
Container(
padding: const EdgeInsets.all(18),
margin: const EdgeInsets.all(20),
width: double.infinity,
decoration: BoxDecoration(
gradient: const LinearGradient(colors: [
Color.fromARGB(255, 240, 142, 14),
Color.fromARGB(255, 250, 185, 88),
], begin: Alignment.centerLeft, end: Alignment.centerRight),
boxShadow: [
BoxShadow(
color: AppColor.accentColor.withOpacity(0.3),
spreadRadius: 4,
blurRadius: 8,
offset: const Offset(0, 0),
),
],
borderRadius: BorderRadius.circular(12),
),
//------------------------------------------------
// boutton input
child: GestureDetector(
child: Text(
'Start Learning',
style: AppFont.bigText,
textAlign: TextAlign.center,
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const selectLanguagScreen()),
);
},
),
),
//------------------------------------------------------------------------------
// Login - signup
//--------------------------------------------------------------------------------
TextButton(
onPressed: () {
print('hello');
MaterialPageRoute(
builder: (context) => const loginScreen());
},
child: Text(
'login-Sing up',
style: AppFont.bigText.copyWith(
color: Colors.orange,
decoration: TextDecoration.underline),
),
),
This is how it looks:
This what the DEBUG CONSOLE shows
Appreciate if someone can advise. Thank you in advance!

You need to use Navigator.of(context).push to go new route
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => const loginScreen()));
More about navigation

use this:
Navigator.push(context, MaterialPageRoute(builder: (c) => yourPage));

Try the following code:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const loginScreen(),
),
);

Related

Flutter How Can I Show Dialog on Another Page

I want to show dialog when I press the button I want to be navigated to another page and then I want to show a dialog indicating that I have been navigated to that page.
So I try this code;
InkWell(
onTap: () async {
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => BottomBarD()),
(route) => false);
Dialog(
child: Container(
child: Column(
children: [
Text(
"Navigated to Another Page",
style: TextStyle(
fontFamily: "Quando",
fontWeight: FontWeight.w500,
fontSize: 15,
),
),
TextButton(
onPressed: () async {
Navigator.of(context).pop();
},
child: Text(
"Okey",
style: TextStyle(
fontFamily: "Quando",
fontSize: 15,
),
),
),
],
),
),
);
},
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.orangeAccent, Colors.red],
begin: Alignment.bottomRight,
end: Alignment.centerLeft),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(112.0),
topLeft: Radius.circular(112.0),
bottomRight: Radius.circular(112.0),
topRight: Radius.circular(112.0),
),
),
height: MediaQuery.of(context).size.height * 0.065,
width: MediaQuery.of(context).size.width * 0.80,
margin: EdgeInsets.only(
top: 30.0,
bottom: 10.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Text(
"Navigate and ShowDialog Button",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 17,
fontFamily: "Quando"),
),
),
],
),
),
),
But when I press the okay button in the dialog, the okay button does not work and it gives a that error;
Unhandled Exception: Null check operator used on a null value
This worked fine on DartPad:
void _incrementCounter() {
Navigator.of(context).push(MaterialPageRoute(
builder: (c) => Scaffold(body: Text('new page'))
));
showDialog(context: context,
builder: (c) => AlertDialog(content: Text('the dialog in it'),)
);
}
Notice that .push() returns a Future immediately. The dialog you show after that is shown on top of page 2, since we don't await for it.
I put the Dialog in my second page BottomBarD() and I displayed it based on a conditional field every time the BottomBarD() loads.

Flutter: unloaded widgets when starting the app & unresponsive widgets

for a while now, I was trying to learn Flutter for mobile development. So, everything is straight forward and easy to grasp.
But, the following issues I cannot seem to solve:
Resizing the CircleAvatar() in the AppBar: I tried using scale, size, nothing worked.
Whatever I added after the 1st ListView.builder(), the emulator does not read/ display
my flutter is up-to-date and no errors/issues are shown when I run flutter doctor or my run the app.
Thanks
Code Used:
class MessageScreen extends StatefulWidget {
static Route<dynamic> route() => MaterialPageRoute(
builder: (context) => MessageScreen(),
);
#override
_MessageScreenState createState() => _MessageScreenState();
}
class _MessageScreenState extends State<MessageScreen> {
String tempLink =
'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80';
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue[400],
appBar: AppBar(
elevation: 0.0,
leading: CircleAvatar(
backgroundImage: NetworkImage(tempLink),
radius: 15.0,
child: tempLink == null ? Text('HH') : null,
),
title: Text('Chats'),
backgroundColor: Colors.blue[400],
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.search),
),
],
),
body: Column(
children: [
Row(
children: [
Container(
child: ListView.builder(
itemCount: newMatching.length,
padding: EdgeInsets.only(left: 6),
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => ChatScreen(
user: newMatching[index],
),
),
),
child: _profileButton(tempLink),
);
},
),
),
],
),
SizedBox(
height: 18,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20), topRight: Radius.circular(20)),
),
child: ListView.builder(
itemCount: chats.length,
itemBuilder: (BuildContext context, int index) {
final Message chat = chats[index];
return GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => ChatScreen(
user: chat.sender,
),
),
),
child: Container(
margin: EdgeInsets.only(top: 5, bottom: 5, right: 1),
padding:
EdgeInsets.symmetric(horizontal: 2, vertical: 5),
decoration: BoxDecoration(
color: chat.unread ? Color(0xFFFFEFEE) : Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(20.0),
bottomRight: Radius.circular(20.0),
),
),
child: _chatNavigatorButton(
chat.sender.imgAvatar,
chat.sender.fname,
chat.text,
chat.time,
chat.unread)),
);
}),
),
],
),
);
}
}
Try wrapping the CircleAvatar with a Container:
Container(height: 10, width: 10, child: CircleAvatar(...))
Is there a chance that chats simply has the length of 0 and no elements? Maybe the second ListView.builder() does display correctly but includes no items. At least that's what I can retrieve from the given code.

Close modal bottom sheet after go back from other page

I have an issue with modal bottom sheet.
After I use Navigator.push to another page, the modal bottom sheet remain there when I go back.
I already try using FocusScope.of(context).focusedChild.unfocus(); and Navigator.pop(context); still not helping.
Modal bottom sheet code:
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blueAccent,
child: Icon(
Icons.add,
color: Colors.white,
),
onPressed: () {
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
context: context,
isScrollControlled: true,
builder: (context) => SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: AddTask(), //open statefull widget
),
),
);
}),
Add Task code:
Row(
children: <Widget>[
InkWell(
borderRadius: BorderRadius.circular(8),
onTap: () async {
FocusScope.of(context).focusedChild.unfocus();
await DatabaseService(uid: user.uid, taskId: taskId)
.updateTask(false, _titleValue, _notesValue,
UpdateChecklist().checklistInput, '', '', '');
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TaskDetail(
uid: user.uid,
taskId: taskId,
)),
);
},
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(8)),
child: Icon(
Icons.add,
color: Colors.blueAccent,
),
),
),
is there any way to make the modal bottom sheet go back to unfocus when I return to the page?
it solved by adding then.
Row(
children: <Widget>[
InkWell(
borderRadius: BorderRadius.circular(8),
onTap: () async {
await DatabaseService(uid: user.uid, taskId: taskId)
.updateTask(false, _titleValue, _notesValue,
UpdateChecklist().checklistInput, '', '', '');
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TaskDetail(
uid: user.uid,
taskId: taskId,
)),
).then((value) => Navigator.pop(context));
closing showModalBottomSheet programmatically is done via
Navigator.pop(context);

OnPressed Parameter issue with Text

Container(
height: 50.0,
margin: EdgeInsets.symmetric(horizontal: 60),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Color.fromRGBO(49, 39, 79, 1),
),
child: Center(
child: Text(
"Login", style: TextStyle(color: Colors.white),),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
}
),
),
Hi, could someone take a look at this code? I am having issues implementing switching pages in Flutter. The parameter for onPressed is not defined. This would mean that I need to put the function on a button or not? Can't I have the function be on the container along with the text?
You are using the property onPressed inside the widget Text. The class Text does not have an onPressed property, you can check here:
https://api.flutter.dev/flutter/widgets/Text-class.html
If you want to use the onPressed property then you can use the widget RaisedButton for example.
https://api.flutter.dev/flutter/material/RaisedButton-class.html
We don't apply onPressed on Text.
It is available for Buttons such as Raised buttons.
Refer : Raised button
You can wrap your Text widget in a GestureDetector widget like this:
Container(
height: 50.0,
margin: EdgeInsets.symmetric(horizontal: 60),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Color.fromRGBO(49, 39, 79, 1),
),
child: Center(
child: GestureDetector(
child: Text(
"Login",
style: TextStyle(color: Colors.white),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
},
),
),
),

How to implement a Custom dialog box in flutter?

I'm new to flutter and need to create a gallery app that needs a custom dialog box to show the selected image. How can I implement that?
Use Dialog class which is a parent class to AlertDialog class in Flutter. Dialog widget has a argument , "shape" which you can use to shape the Edges of the Dialog box.
Here is a code sample:
Dialog errorDialog = Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)), //this right here
child: Container(
height: 300.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('Got It!', style: TextStyle(color: Colors.purple, fontSize: 18.0),))
],
),
),
);
showDialog(context: context, builder: (BuildContext context) => errorDialog);}
Screenshot (Null Safe):
Code:
Just call this method:
void showCustomDialog(BuildContext context) {
showGeneralDialog(
context: context,
barrierLabel: "Barrier",
barrierDismissible: true,
barrierColor: Colors.black.withOpacity(0.5),
transitionDuration: Duration(milliseconds: 700),
pageBuilder: (_, __, ___) {
return Center(
child: Container(
height: 240,
child: SizedBox.expand(child: FlutterLogo()),
margin: EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(40)),
),
);
},
transitionBuilder: (_, anim, __, child) {
Tween<Offset> tween;
if (anim.status == AnimationStatus.reverse) {
tween = Tween(begin: Offset(-1, 0), end: Offset.zero);
} else {
tween = Tween(begin: Offset(1, 0), end: Offset.zero);
}
return SlideTransition(
position: tween.animate(anim),
child: FadeTransition(
opacity: anim,
child: child,
),
);
},
);
}
On a button click show dialog as -
showDialog(
context: context,
builder: (_) => LogoutOverlay(),
);
Dialog design with two buttons -
class LogoutOverlay extends StatefulWidget {
#override
State<StatefulWidget> createState() => LogoutOverlayState();
}
class LogoutOverlayState extends State<LogoutOverlay>
with SingleTickerProviderStateMixin {
AnimationController controller;
Animation<double> scaleAnimation;
#override
void initState() {
super.initState();
controller =
AnimationController(vsync: this, duration: Duration(milliseconds: 450));
scaleAnimation =
CurvedAnimation(parent: controller, curve: Curves.elasticInOut);
controller.addListener(() {
setState(() {});
});
controller.forward();
}
#override
Widget build(BuildContext context) {
return Center(
child: Material(
color: Colors.transparent,
child: ScaleTransition(
scale: scaleAnimation,
child: Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(15.0),
height: 180.0,
decoration: ShapeDecoration(
color: Color.fromRGBO(41, 167, 77, 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0))),
child: Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(
top: 30.0, left: 20.0, right: 20.0),
child: Text(
"Are you sure, you want to logout?",
style: TextStyle(color: Colors.white, fontSize: 16.0),
),
)),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: ButtonTheme(
height: 35.0,
minWidth: 110.0,
child: RaisedButton(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
splashColor: Colors.white.withAlpha(40),
child: Text(
'Logout',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 13.0),
),
onPressed: () {
setState(() {
Route route = MaterialPageRoute(
builder: (context) => LoginScreen());
Navigator.pushReplacement(context, route);
});
},
)),
),
Padding(
padding: const EdgeInsets.only(
left: 20.0, right: 10.0, top: 10.0, bottom: 10.0),
child: ButtonTheme(
height: 35.0,
minWidth: 110.0,
child: RaisedButton(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
splashColor: Colors.white.withAlpha(40),
child: Text(
'Cancel',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontSize: 13.0),
),
onPressed: () {
setState(() {
/* Route route = MaterialPageRoute(
builder: (context) => LoginScreen());
Navigator.pushReplacement(context, route);
*/ });
},
))
),
],
))
],
)),
),
),
);
}
}
You just put this class in your project and call its method for showing dialog. Using this class you don't need to write dialog code everywhere
class DialogUtils {
static DialogUtils _instance = new DialogUtils.internal();
DialogUtils.internal();
factory DialogUtils() => _instance;
static void showCustomDialog(BuildContext context,
{#required String title,
String okBtnText = "Ok",
String cancelBtnText = "Cancel",
#required Function okBtnFunction}) {
showDialog(
context: context,
builder: (_) {
return AlertDialog(
title: Text(title),
content: /* Here add your custom widget */,
actions: <Widget>[
FlatButton(
child: Text(okBtnText),
onPressed: okBtnFunction,
),
FlatButton(
child: Text(cancelBtnText),
onPressed: () => Navigator.pop(context))
],
);
});
}
}
You can call this method like :
GestureDetector(
onTap: () =>
DialogUtils.showCustomDialog(context,
title: "Gallary",
okBtnText: "Save",
cancelBtnText: "Cancel",
okBtnFunction: () => /* call method in which you have write your logic and save process */),
child: Container(),
)
Alert Dialog
Custom Dialog
Full-Screen Dialog
ref: Flutter Alert Dialog to Custom Dialog | by Ishan Fernando | CodeChai | Medium
Alert Dialog
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Alert Dialog"),
content: Text("Dialog Content"),
actions: [
TextButton(
child: Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
)
],
);
},
);
Custom Dialog
showDialog(
context: context,
builder: (BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(20.0)), //this right here
child: Container(
height: 200,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'What do you want to remember?'),
),
SizedBox(
width: 320.0,
child: RaisedButton(
onPressed: () {},
child: Text(
"Save",
style: TextStyle(color: Colors.white),
),
color: const Color(0xFF1BC0C5),
),
)
],
),
),
),
);
});
Full-Screen Dialog
showGeneralDialog(
context: context,
barrierDismissible: true,
barrierLabel: MaterialLocalizations.of(context)
.modalBarrierDismissLabel,
barrierColor: Colors.black45,
transitionDuration: const Duration(milliseconds: 200),
pageBuilder: (BuildContext buildContext,
Animation animation,
Animation secondaryAnimation) {
return Center(
child: Container(
width: MediaQuery.of(context).size.width - 10,
height: MediaQuery.of(context).size.height - 80,
padding: EdgeInsets.all(20),
color: Colors.white,
child: Column(
children: [
RaisedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
"Save",
style: TextStyle(color: Colors.white),
),
color: const Color(0xFF1BC0C5),
)
],
),
),
);
});
An General E.g
showDialog(context: context,builder: (context) => _onTapImage(context)); // Call the Dialog.
_onTapImage(BuildContext context) {
return Stack(
alignment: Alignment.center,
children: <Widget>[
Image.network('https://via.placeholder.com/150',fit: BoxFit.contain,), // Show your Image
Align(
alignment: Alignment.topRight,
child: RaisedButton.icon(
color: Theme.of(context).accentColor,
textColor: Colors.white,
onPressed: () => Navigator.pop(context),
icon: Icon(
Icons.close,
color: Colors.white,
),
label: Text('Close')),
),
],
);
}
I usually build a wrapper for the dialog that matches the app theme and avoids much redundant code.
PlaceholderDialog
class PlaceholderDialog extends StatelessWidget {
const PlaceholderDialog({
this.icon,
this.title,
this.message,
this.actions = const [],
Key? key,
}) : super(key: key);
final Widget? icon;
final String? title;
final String? message;
final List<Widget> actions;
#override
Widget build(BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
icon: icon,
title: title == null
? null
: Text(
title!,
textAlign: TextAlign.center,
),
titleTextStyle: AppStyle.bodyBlack,
content: message == null
? null
: Text(
message!,
textAlign: TextAlign.center,
),
contentTextStyle: AppStyle.textBlack,
actionsAlignment: MainAxisAlignment.center,
actionsOverflowButtonSpacing: 8.0,
actions: actions,
);
}
}
Usage
showDialog(
context: context,
builder: (ctx) => PlaceholderDialog(
icon: Icon(
Icons.add_circle,
color: Colors.teal,
size: 80.0,
),
title: 'Save Failed',
message: 'An error occurred when attempt to save the message',
actions: [
TextButton(
onPressed: () => Navigator.of(ctx).pop(),
child: Text('!Got It'),
),
],
),
);
Result
You can now use AlertDialog and in content build your widget.
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
backgroundColor: Colors.green,
content: Container(
height:200,
width:200,
decoration: BoxDecoration(
image: DecorationImage(
image: FileImage(filepath),
fit: BoxFit.cover))),}),
There's a working solution in my case:
Future<void> _showMyDialog() async {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: Text('AlertDialog Title'),
content: SingleChildScrollView(
child: Column(
children: <Widget>[
Text('This is a demo alert dialog.'),
Text('Would you like to confirm this message?'),
],
),
),
actions: <Widget>[
TextButton(
child: Text('Confirm'),
onPressed: () {
print('Confirmed');
Navigator.of(context).pop();
},
),
TextButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
Hope this is helpful:
I've made static function in a separate class:
import 'package:flutter/material.dart';
import 'package:flutter_application_1/TGColors.dart';
class TGDialog
{
static doNothing() { } // stub needed for Function parameters
/// Returns an AlertDialog with most optional parameters
static AlertDialog dlg( BuildContext context,
{ String txtTitle = 'WHAT? no title?' ,
String txtMsg = 'WHAT? no content?',
String txtBtn1 = 'CANCEL' ,
String txtBtn2 = 'OK' ,
Function funcBtn1 = doNothing ,
Function funcBtn2 = doNothing ,
Color colBackground = TGColors.Orange ,
Color colText = TGColors.Indigo } )
{
return
AlertDialog(
backgroundColor : colBackground,
title : Text(txtTitle),
content : Text(txtMsg),
actions : <Widget>
[
TextButton(
onPressed : () => { funcBtn1(), Navigator.pop(context,'Cancel')},
child : Text(txtBtn1, style: TextStyle(color: colText)),
),
TextButton(
onPressed :() => { funcBtn2(),Navigator.pop(context) },
child : Text(txtBtn2, style: TextStyle(color: colText)),
),
],
);
}
}
An example:
Positioned( bottom: 1, left: (screenW / 5.6),
child : FloatingActionButton(
heroTag : 'clear',
onPressed :() => showDialog<String>
(
context : context,
builder : (BuildContext context) =>
///////////////////////////////////////////////////////
TGDialog.dlg( context,
txtTitle : 'Clear Order?',
txtMsg : 'This resets all item counts' ,
funcBtn2 : resetOrder)
///////////////////////////////////////////////////////
),
child : const Text('clear\nall', textAlign: TextAlign.center),
shape : RoundedRectangleBorder(
borderRadius: BorderRadius.circular(40),
),
),
),
etc.
Btw: I like CSS webcolors so I defined them in a separate class
like so:
import 'dart:ui';
/// Contains mainly web colors (based on CSS)
///
/// Usage e.g: ... = TGcolors.CornFlowerBlue
class TGColors
{
static const PrimaryColor = Color(0xFF808080);
static const AliceBlue = Color(0xFFF0F8FF);
static const AntiqueWhite = Color(0xFFFAEBD7);
static const Aqua = Color(0xFF00FFFF);
static const Aquamarine = Color(0xFF7FFFD4);
// etc.
Custom Alert Dialog in Flutter
void openAlert() {
dialog = Dialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.0)),
//this right here
child: Container(
height: 350.0,
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
ClipRRect(
child: Image.asset(
"assets/images/water1.jpg",
width: double.infinity,
height: 180,
fit: BoxFit.cover,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16), topRight: Radius.circular(16)),
),
Container(
margin: EdgeInsets.only(top: 16),
decoration: boxDecorationStylealert,
width: 200,
padding: EdgeInsets.symmetric(horizontal: 8),
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
showToastMessage("-");
},
child:Image.asset("assets/images/subtraction.png",width: 30,height: 30,)),
Text(
"1",
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
color: black_color),
),
GestureDetector(
onTap: () {
showToastMessage("+");
},
child:Image.asset("assets/images/add.png",width: 30,height: 30,)),
],
),
),
Expanded(child: Container()),
Row(
children: [
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 12, right: 6),
child: MaterialButton(
onPressed: cancelClick,
color: green_color,
child: Text(
"CANCEL",
style: TextStyle(fontSize: 12, color: white_color),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4)),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 6, right: 12),
child: MaterialButton(
onPressed: okClick,
color: green_color,
child: Text(
"OK",
style: TextStyle(fontSize: 12, color: white_color),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4)),
),
),
)
],
)
],
),
),
);
showDialog(
context: context, builder: (BuildContext context) => dialog);
}