flutter how to floatingactionbutton overlapping alertdialog? - flutter

I want to floating action button is front of the alert dialog, I tried add elevation to floatingactionbutton and alertdialog but still not working. is it possible to make floatingactionbutton overlapping all layout including alertdialog?
this my alertdialog using lib rflutter_alert
var alertStyle = AlertStyle(
// animationType: AnimationType.fromTop,
alertElevation: 1,
isCloseButton: false,
isOverlayTapDismiss: false,
descStyle: TextStyle(fontSize: textBody3),
descTextAlign: TextAlign.center,
titleStyle: TextStyle(
color: Colors.red,
fontSize: textHeader1,
fontWeight: FontWeight.bold),
alertAlignment: Alignment.center,
);
Alert(
context: context,
style: alertStyle,
content: Column(
children: <Widget>[
const SizedBox(
height: 30,
),
Text(msg),
const SizedBox(
height: 30,
),
Text(jam)
],
),
buttons: [
DialogButton(
child: Text(
"OK",
style: TextStyle(color: Colors.white, fontSize: textButton1),
),
onPressed: () => Navigator.pop(context),
color: Palette.color_primary,
radius: BorderRadius.circular(0.0),
),
],
image: flag == "OK"
? Image.asset(
"assets/images/success.png",
height: 50,
width: 50,
)
: Image.asset(
"assets/images/error.png",
height: 50,
width: 50,
),
).show();
and this the floatingactionbutton using lib DraggableFab
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: DraggableFab(
child: FloatingActionButton.extended(
elevation: 10,
onPressed: () {
getLocation();
},
label:ValueListenableBuilder(
valueListenable: notifierLocFab,
builder: (BuildContext context, bool value,Widget? child) {
return Column(
children: [
Text(latitudeFab.toStringAsFixed(7)),
Text(longitudeFab.toStringAsFixed(7)),
],
);
}),
),
),
);
}

Related

Flutter Inkwell Ontap not working inside a Stack

I am building a flutter ecommerce app and I am having an issue where ontap isn't working inside my inkwell widget. I want the ontap to work so that I can show the product description. I have placed the inkwell widget as a child inside a Positioned widget, which happens to be one of the children of a Stack. How can I solve this?
Here's my code:
return Card(
shadowColor: Colors.grey,
surfaceTintColor: Colors.amber,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Stack(
children: [
Positioned(
right: 0,
child: InkWell(
onTap: () {
print('tapped');
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
ProductDetails(
id: bottleCategory
.bottleList[index].id,
bottleName: bottleCategory
.bottleList[index]
.bottleName,
image: bottleCategory
.bottleList[index]
.image,
price: bottleCategory
.bottleList[index]
.price)));
},
child: IconButton(
icon: favoriteProvider.isExist(
bottleCategory.bottleList[index])
? Icon(
Icons.favorite,
color: Colors.redAccent,
)
: Icon(
Icons.favorite_border,
),
onPressed: (() {
favoriteProvider.toggleFavorites(
bottleCategory.bottleList[index]);
if (favoriteProvider.isExist(
bottleCategory.bottleList[index])) {
ScaffoldMessenger.of(context)
.hideCurrentSnackBar();
ScaffoldMessenger.of(context)
.showSnackBar(
const SnackBar(
content: Text(
"Product Added to Favorite!",
style: TextStyle(fontSize: 16),
),
backgroundColor: Colors.green,
duration: Duration(seconds: 1),
),
);
} else {
ScaffoldMessenger.of(context)
.hideCurrentSnackBar();
ScaffoldMessenger.of(context)
.showSnackBar(
const SnackBar(
content: Text(
"Product Removed from Favorite!",
style: TextStyle(fontSize: 16),
),
backgroundColor: Colors.red,
duration: Duration(seconds: 1),
),
);
}
}),
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Image.asset(
bottleCategory.bottleList[index].image,
height: 200.0,
),
),
Center(
child: Text(
bottleCategory
.bottleList[index].bottleName,
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold))),
Center(
child: Text(
'R${bottleCategory.bottleList[index].price}'),
)
],
),
Positioned(
bottom: 0,
right: 10,
child: IconButton(
icon: const Icon(Icons.add_circle),
iconSize: 40.0,
onPressed: () {
cart.addToCart(
bottleCategory.bottleList[index].id,
bottleCategory
.bottleList[index].bottleName,
bottleCategory
.bottleList[index].price,
bottleCategory
.bottleList[index].image);
},
))
],
),
);
Why do you use IconButton in the child of InkWell?
use one of them and Put all of your onPress functions into that widget.

Not able to align floating action menu in flutter

I have this menu on the floating button , but I could not align it correctly,
I want it to show directly above the floating button, this is how it looks in red box:
I want the pop up menu to be like this in red box , I tried to change offset number but did not work it just moves left and right
please help me find a solution I'm really struggling, I provided the code below please check it out
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: myPopMenu(context),
backgroundColor: Colors.white,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomNav(
onChange: (a) {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(
builder: (c) => AppPage(initialPage: a,)),
(route) => false);
},
),
);
}
Widget myPopMenu(BuildContext context) {
return Theme(
data: Theme.of(context).copyWith(
cardColor: Colors.white60,
),
child: PopupMenuButton(
offset: const Offset(-90, 100),
icon: Image.asset('assets/logo.png', fit: BoxFit.cover, height: 40),
onCanceled: () {
setState(() {
isClicked = false;
});
},
onSelected: (value) {
setState(() {
isClicked = false;
});
print('pop up clicked');
if (value == 0) {
alertRate();
} else if (value == 1){
alertServices();
}else if (value == 2) {
alertAdditonalInfo();
}else if (value == 3){
alertReport();
}
},
itemBuilder: (context) {
setState(() {
isClicked = true;
});
return [
PopupMenuItem(
child: Center(
child: Text(
'Rate & Review',
style: TextStyle(color: Colors.black),
),
),
value: 0,
),
PopupMenuItem(
height: 4,
child: Container(
height: 2,
color: Colors.black,
),
),
PopupMenuItem(
child: Center(
child: Text(
'Edit Available Services',
style: TextStyle(color: Colors.black),
),
),
value: 1,
),
PopupMenuItem(
height: 4,
child: Container(
height: 2,
color: Colors.black,
),
),
PopupMenuItem(
child: Center(
child: Text(
'Edit Social Accounts',
style: TextStyle(color: Colors.black),
),
),
value: 2,
),
PopupMenuItem(
height: 4,
child: Container(
height: 2,
color: Colors.black,
),
),
PopupMenuItem(
child: Center(
child: Text(
'Report an Issue',
style: TextStyle(color: Colors.black),
),
),
value: 3,
),
];
}),
);
}
You can use stack and positioned widget to place it at specific height above bottom nav bar like this
class Sample extends StatelessWidget {
const Sample({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
alignment: Alignment.center,
children: [
Positioned(
bottom: 30,
child: Container(
color: Colors.grey,
width: 50,
height: 30,
child: Text('Hello'),
),
)
],
,
);
}
}

Why is pdf not displaying?

This is my code to show pdf when clicked the button but for some reason, pdf is not displaying. I don't know what to do.
import 'package:flutter/material.dart';
import 'package:pdf_flutter/pdf_flutter.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Network PDF Viewer"),
),
body: Center(
child: TextButton(
onPressed: () {
PDF.network(
'https://google-developer-training.github.io/android-developer-fundamentals-course-concepts/en/android-developer-fundamentals-course-concepts-en.pdf',
height: 300,
width: 200,
placeHolder: Image.asset("assets/images/pdf.png",
height: 200, width: 100),
);
},
child: Container(
height: 30,
width: 100,
child: Center(
child: Text(
'Open PDF',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
),
),
));
}
}
I want my users to access the pdf by clicking on the button but the pdf is not displaying no matter how many times I click the button.
You cannot use PDF.network as on Pressed method, instead, do it like this
bool openedPDF = false;
Center(
child: TextButton(
onPressed: () {
setState((){openedPDF = true;});
},
child: Container(
height: 30,
width: 100,
child: Center(
child: Text(
'Open PDF',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
),
),
));
Visibility(
visible : openedPDF,
child:PDF.network(
'https://google-developer-training.github.io/android-developer-fundamentals-course-concepts/en/android-developer-fundamentals-course-concepts-en.pdf',
height: 300,
width: 200,
placeHolder: Image.asset("assets/images/pdf.png",
height: 200, width: 100),
);
Try this package
flutter_cached_pdfview
PDF().cachedFromUrl(widget.url,
placeholder: (progress) => Center(
child: Text("Loading - $progress %"),
),
errorWidget: (error) => Center(
child: Text("An error occured while opening bill PDF"),
)),
upvote if you find useful

The named parameter 'onTap' isn't defined

I currently learning Flutter and I'm very new to it. in my app I used responsive grid package and add Text in responsive container. i wanted to go to another page when tap on this text but my bad it gives me this error.
The named parameter 'onTap' isn't defined.
Try correcting the name to an existing named parameter's name, or defining a named parameter with the name 'onTap'.
i used following code:
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Container(
child: ResponsiveGridRow(children: [
ResponsiveGridCol(
lg: 12,
child: Container(
height: 400,
alignment: Alignment.center,
color: Colors.orange,
child: Column(
children: [
Container(
margin: EdgeInsets.only(top: 150),
alignment: Alignment.center,
child: Text("Welcome To",
style: TextStyle(
fontSize: 40,
color: Colors.white)),
),
Container(
alignment: Alignment.center,
child: Text("our App",
style: TextStyle(
fontSize: 40,
color: Colors.white,
fontWeight: FontWeight.bold)),
),
],
),
),
),
ResponsiveGridCol(
xs: 4,
md: 2,
child: Container(
height: 18,
alignment: Alignment.centerLeft,
child: Text("Login",
style: TextStyle(
fontSize: 13,
// decoration: TextDecoration.underline,
color: Colors.orange[800])),
onTap: () { // i got error here
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SignIn()),
);
}
),
)
]),
),
),
);
}
}
Your widget does not have an onTap property you need to create as show below by wrapping the widget that you need to be clickable with a gesture detector or InkWell
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SignIn()),
);
}
child:Container(
height: 18,
alignment: Alignment.centerLeft,
child: Text("Login",
style: TextStyle(
fontSize: 13,
// decoration: TextDecoration.underline,
color: Colors.orange[800])),
)),
The Container widget does not have onTap property try to wrap it in InkWell like this:
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SignIn()),
);
},
child: Container(
height: 18,
alignment: Alignment.centerLeft,
child: Text("Login",
style: TextStyle(
fontSize: 13,
// decoration: TextDecoration.underline,
color: Colors.orange[800])),
)))

when i tried to calling a dialog it will show me this error setState() or markNeedsBuild called during build

This is my dialog Code
Here is am getting an error of setstate() or MarkerneedsBuild called during the build. this overlay widget cannot be marked as needing to process of building widgets.
When I am trying to call _onAlertOtp widget it will show me this error.in the build method, i've bloc and state when my signup is successful then i have to call alert dialog. but when I am trying to do that it will show me the error. Hope you understand the question please help me.
_onAlertotp(BuildContext context) {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: Text('Enter OTP'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 2.7,
width: MediaQuery.of(context).size.width,
alignment: Alignment.center,
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'We have Texted and/or Emailed OTP (One Time Pin) to your registered cell phone and/ or email account. Please check and enter OTP below to activate your TUDO account.',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 15),
textAlign: TextAlign.center,
),
),
SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 8.0, horizontal: 30),
child: PinCodeTextField(
length: 6, // must be greater than 0
obsecureText: false, //optional, default is false
shape: PinCodeFieldShape
.underline, //optional, default is underline
onDone: (String value) {
setState(() {
passcode = value;
print(value);
});
},
textStyle: TextStyle(
fontWeight: FontWeight
.bold), //optinal, default is TextStyle(fontSize: 18, color: Colors.black, fontWeight: FontWeight.bold)
onErrorCheck: (bool value) {
setState(() {
hasError = value;
});
},
shouldTriggerFucntions:
changeNotifier.stream.asBroadcastStream(),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Text(
hasError
? "*Please fill up all the cells and press VERIFY again"
: "",
style: TextStyle(
color: Colors.red.shade300, fontSize: 12),
),
),
SizedBox(
height: 20,
),
RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: "Didn't receive the code? ",
style:
TextStyle(color: Colors.black54, fontSize: 15),
children: [
TextSpan(
text: " RESEND",
// recognizer: onTapRecognizer,
style: TextStyle(
color: colorStyles["primary"],
fontWeight: FontWeight.bold,
fontSize: 16))
]),
),
SizedBox(
height: 7,
),
Container(
margin: const EdgeInsets.symmetric(
vertical: 16.0, horizontal: 30),
child: ButtonTheme(
height: 50,
child: FlatButton(
onPressed: () async {
/// check the [_onData] fucntion to understand better
changeNotifier.add(Functions.submit);
// at first we will check error on the press of the button.
if (!hasError) {
_onAlertrunnigbusiness(context);
}
},
child: Center(
child: Text(
"VERIFY".toUpperCase(),
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold),
)),
),
),
decoration: BoxDecoration(
color: colorStyles["primary"],
borderRadius: BorderRadius.circular(5),
),
),
],
),
),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('Regret'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
Here Is Another DIalog. which open on first dialog verify button click
_onAlertrunnigbusiness(context) {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: Text('Are you running Business?'),
content: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 10,
),
Text(
"TUDO.App aims at Businesses bridging gaps between Business Service Providers and Consumers collaborate on unique technology platform. If you own a business, we strongly recommend, provide your business information to grow your customer base and expand your business services. Any questions? Call us #1-800-888-TUDO"),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FlatButton.icon(
icon: Icon(FontAwesomeIcons.arrowCircleRight),
label: Text('No'),
color: colorStyles["primary"],
textColor: Colors.white,
padding:
EdgeInsets.symmetric(vertical: 10, horizontal: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
),
onPressed: () {
NavigationHelper.navigatetoMainscreen(context);
},
),
SizedBox(height: 10),
FlatButton.icon(
icon: Icon(FontAwesomeIcons.arrowCircleRight),
label: Text('Yes'),
color: colorStyles["primary"],
textColor: Colors.white,
padding:
EdgeInsets.symmetric(vertical: 10, horizontal: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
),
onPressed: () {
NavigationHelper.navigatetoBspsignupcreen(context);
},
),
],
)
],
),
),
actions: <Widget>[
FlatButton(
child: Text('Close'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
And Here i am calling my dialog
#override
Widget build(BuildContext context) {
return BlocListener<SignupBloc, SignupState>(
bloc: widget._signupBloc,
listener: (
BuildContext context,
SignupState currentState,
) {
if (currentState is InSignupState) {
_countries = currentState.countries.countries;
return Container(child: content(_signupBloc, context, _countries));
}
if (currentState is SignupButtonClickedEvent) {
print('SignupButtonClickedEvent clicked');
return Container();
}
if (currentState is SignupSuccessState) {
print(
' You are awesome. you have successfully registered without confirmation');
print(currentState.signupUser.toJson());
print("Hey Otp Is opned");
if (!_isError) {
return _onAlertotp(context);
}
// NavigationHelper.navigatetoMainscreen(context);
_isLoading = false;
showAlertBox = true;
return Container(
child: content(_signupBloc, context, _countries),
);
}
if (currentState is SignupVerficationOtp) {
print('signup verficitaion otp button clicked');
return Container();
}
return Container(child: content(_signupBloc, context, _countries));
},
);
}
}
try using below code to display an alert dialog
in place of return _onAlertotp(context);
WidgetsBinding.instance.addPostFrameCallback((_) {
// show alert dialog here
_onAlertotp(context);
});
You should use a BlocListener at the root of your build method to handle events that do not return a widget (in your case the showDialog method)
Your if (currentState is SignupSuccessState) { part would be in the BlocListener and not in the BlocBuilder