I am creating an app for iOS using Flutter.
For that Application, I am using dialogue in one screen.
For that dialogue, It is showing a grey layer on dialogue in the
release version of iOS but it is working as expected in the Simulator or debug version
There is a grey layer on dialogue I have added my code to anyone facing the same issue?
need help.
static dynamic customPage(BuildContext context) {
return showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
return CustomDialog(
insetPadding: const EdgeInsets.all(20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8)),
),
child: Container(
child: Stack(
children: [
Positioned(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Positioned(
right: 0.0,
child: GestureDetector(
onTap: () {
if (Navigator.canPop(context))
Navigator.pop(context, true);
},
child: Container(
color: Colors.transparent,
child: Icon(
Icons.close,
color: Colors.black,
size: 25,
),
),
),
),
),
right: 1.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"images/bind_loader.gif",
height: 90.0,
width: 90.0,
),
],
),
Padding(
padding: const EdgeInsets.only(top: 80.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CustomDialougeUtil(),
],
),
),
Padding(
padding: const EdgeInsets.only(
right: 12.0, bottom: 10.0, top: 120),
child: Text(
"Please wait while we are confirming your payment",
style: bindTheme.textTheme.headline3,
textAlign: TextAlign.center,
),
),
],
),
),
);
},
);
}
// this is a Widget that is showDialog
class _CustomDialougeUtilState extends State<CustomDialougeUtil> {
//State full widget that uses normal timer view to display on dialogue
}
Related
I have to do Slidable widget with 3 CustomSlidableAction. I did it, but Slidable is open only to half of child widget and I don't have enough space for CustomSlidableActions. How can I open Slidable more than half of child width?
I've tried to google, but I didn't find the answer. If you know how to do it or have some links to read more about Slidable - please share
Here is the full code:
class SlidableWrapper extends StatelessWidget {
final Widget child;
const SlidableWrapper({
Key? key,
required this.child,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Slidable(
endActionPane: ActionPane(
motion: const ScrollMotion(),
children: [
CustomSlidableAction(
onPressed: (_) {
//make messages unread
},
backgroundColor: Palette.green,
padding: EdgeInsets.symmetric(
horizontal: 24.w,
vertical: 11.h,
),
child: Column(
children: [
SizedBox(
height: 25.h,
width: 25.w,
child: SvgPicture.asset(
'assets/icons/Chats.svg',
color: Palette.white,
),
),
SizedBox(
height: 6.h,
),
Text(
'unread'.tr(),
style: TextStyles.poppins14400.copyWith(
color: Palette.white,
),
),
],
),
),
CustomSlidableAction(
onPressed: (_) {
//pin chat
},
backgroundColor: Palette.green,
padding: EdgeInsets.symmetric(
horizontal: 24.w,
vertical: 11.h,
),
child: Column(
children: [
SizedBox(
height: 25.h,
width: 25.w,
child: SvgPicture.asset(
'assets/icons/pin.svg',
color: Palette.white,
),
),
SizedBox(
height: 6.h,
),
Text(
'pin'.tr(),
style: TextStyles.poppins14400.copyWith(
color: Palette.white,
),
),
],
),
),
CustomSlidableAction(
onPressed: (_) {
//more actions
},
backgroundColor: Palette.green,
padding: EdgeInsets.symmetric(
horizontal: 24.w,
vertical: 11.h,
),
child: Column(
children: [
SizedBox(
height: 25.h,
width: 25.w,
child: SvgPicture.asset(
'assets/icons/more.svg',
color: Palette.white,
),
),
SizedBox(
height: 6.h,
),
Text(
'more'.tr(),
style: TextStyles.poppins14400.copyWith(
color: Palette.white,
),
),
],
),
),
],
),
child: child,
);
}
}
Here is the problem:
Try to use extentRatio parameter in ActionPane
endActionPane: ActionPane(
motion: const ScrollMotion(),
extentRatio: 0.5, //This is a percentage of the width
children: [...]),
I want to show this kind of side menu when I click button, like a drawer. It is only for specific screen control only not for every screen. May I know which control I can use.
There will be vertical slider and some buttons to control the page.
Should I use bottom sheet or dialog or floating action button? Or is there any library like side menu?
Please refer below code
double _value = 0.0;
#override
Widget build(BuildContext context) {
return Stack(
overflow: Overflow.visible,
children: [
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Center(
child: Text("Example"),
),
),
Align(
alignment: Alignment.center,
child: Row(
children: [
Spacer(),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.symmetric(
vertical: 3.0,
),
padding: EdgeInsets.symmetric(
horizontal: 9.0,
vertical: 12.0,
),
decoration: BoxDecoration(
color: Colors.black54,
borderRadius: BorderRadius.circular(
8.0,
),
),
child: Icon(
Icons.vibration_rounded,
color: Colors.blue,
size: 28.0,
),
),
Container(
margin: EdgeInsets.symmetric(
vertical: 5.0,
),
padding: EdgeInsets.symmetric(
horizontal: 0.0,
vertical: 12.0,
),
decoration: BoxDecoration(
color: Colors.black54,
borderRadius: BorderRadius.circular(
8.0,
),
),
child: Column(
children: [
SfSlider.vertical(
min: 0.0,
max: 100.0,
value: _value,
interval: 10,
showTicks: false,
showLabels: false,
enableTooltip: false,
minorTicksPerInterval: 1,
inactiveColor: Colors.white24,
onChanged: (dynamic value) {
setState(() {
_value = value;
});
},
),
Icon(
Icons.music_note_rounded,
color: Colors.blue,
size: 25.0,
),
SizedBox(
height: 12.0,
),
Icon(
Icons.settings,
color: Colors.white,
size: 25.0,
),
],
),
),
],
),
SizedBox(
width: 9.0,
),
],
),
),
],
);
}
You can use the stack to create a floating menu and also show or hide the floating menu with the Visibility widget.
bool showMenu = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Column(
children: <Widget>[
......................
],
),
Positioned(
top: 50.0,
left: 25.0,
child: Visibility(
child; YourFloatingMenu(),
visible: showMenu,
),
),
],
),
);
}
I have a layout the login button is at the bottom of the screen and the TextFormField's are at the top of the screen. I have an issue where I want to display the button above the keyboard when it appears but I'm having difficulties doing that. I want a clean solution and not some hack, but can't seem to find one. Is using a floatingActionButton or bottomNavigationBar a solution maybe and using MediaQuery.of(context).viewInsets.bottom? Here is the code and pictures.
I have this view of the screen:
but when the keyboard appears I can't see the login button:
I wanted to put the button right beneath the password TexFormField after the keyboard appears.
Is there some sort a simple solution and yet not a hack for this?
Here is the code:
Scaffold(
resizeToAvoidBottomInset: false, // <- here I set this to false so my whole widget doesn't resize when the keyboard appears
backgroundColor: Colors.white,
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: [
SizedBox(
height: 48.0,
),
Padding(
padding: const EdgeInsets.only(left: 24.0, right: 25.0),
child: Form(
key: _loginFormKey,
child: Column(
children: [
TextFormField(
onChanged: (value) {
setState(() => email = value);
},
),
SizedBox(
height: 24.0,
),
TextFormField(
onChanged: (value) {
setState(() => password = value);
},
),
],
),
),
),
],
),
Padding(
padding: const EdgeInsets.only(
left: 23.0, right: 24, bottom: 64.0),
child: SizedBox(
width: double.infinity,
child: PrimaryButton(
buttonText: 'LOG IN',
),
),
),
],
),
);
Thanks in advance for you help!
In your code, you have to avoid resizeToAvoidBottomInset: false which makes your button invisible, and yes I see, you need space between edit text and button that's why you add Colum as a parent. but there is another better way to achieve this and the yes button will show in below code as you expected.
Scaffold(
backgroundColor: Colors.white,
body:
Stack(
children: [
Padding(
padding: const EdgeInsets.only(left: 24.0, right: 25.0),
child: Form(
child: Column(
children: [
TextFormField(
onChanged: (value) {},
),
SizedBox(
height: 24.0,
),
TextFormField(
onChanged: (value) {},
),
],
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding:
const EdgeInsets.only(left: 23.0, right: 24, bottom: 64.0),
child: SizedBox(
width: double.infinity,
child: ElevatedButton(
child: Text("Button"),
onPressed: () {},
)),
),
),
],
)
);
I'm trying to redirect to a new screen after logging in
I am writing an app and need help with changing which screen is being seen, when the google sign in button is pressed it authenticates the profile, but I have no idea how to make it go to the home page after it logs in, so it just redirects back to the log-in page and the log-in process repeats. Any way for me to fix this?
import 'package:flutter/material.dart';
import 'auth.dart';
import 'flutter_auth_buttons.dart';
class LoginScreen2 extends StatelessWidget {
final Color backgroundColor1;
final Color backgroundColor2;
final Color highlightColor;
final Color foregroundColor;
final AssetImage logo;
LoginScreen2({Key k, this.backgroundColor1, this.backgroundColor2, this.highlightColor, this.foregroundColor, this.logo});
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
decoration: new BoxDecoration(
gradient: new LinearGradient(
begin: Alignment.centerLeft,
end: new Alignment(1.0, 0.0),
// 10% of the width, so there are ten blinds.
colors: [this.backgroundColor1, this.backgroundColor2],
// whitish to gray
tileMode: TileMode
.repeated, // repeats the gradient over the canvas
),
),
height: MediaQuery
.of(context)
.size
.height,
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.only(top: 150.0, bottom: 50.0),
child: Center(
child: new Column(
children: <Widget>[
Container(
height: 128.0,
width: 128.0,
child: new CircleAvatar(
backgroundColor: Colors.transparent,
foregroundColor: this.foregroundColor,
radius: 100.0,
child: new Text(
"",
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.w100,
),
),
),
),
new Padding(
padding: const EdgeInsets.all(16.0),
)
],
),
),
),
new Container(
width: MediaQuery
.of(context)
.size
.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0),
alignment: Alignment.center,
decoration: BoxDecoration(
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
),
new Container(
width: MediaQuery
.of(context)
.size
.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
),
new Container(
width: MediaQuery
.of(context)
.size
.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 30.0),
alignment: Alignment.center,
child: new Row(
),
),
new Container(
width: MediaQuery
.of(context)
.size
.width,
margin: const EdgeInsets.only(
left: 100.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
GoogleSignInButton(onPressed: () =>authService.googleSignIn (
)) ,
new Expanded(
child: new FlatButton(
padding: const EdgeInsets.symmetric(
vertical: 20.0, horizontal: 20.0),
color: Colors.transparent,
onPressed: () => {},
child: Text(
"",
style: TextStyle(
color: this.foregroundColor.withOpacity(0.5)),
),
),
),
],
),
),
new Expanded(child: Divider(),),
new Container(
width: MediaQuery
.of(context)
.size
.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 10.0, bottom: 20.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
padding: const EdgeInsets.symmetric(
vertical: 20.0, horizontal: 20.0),
color: Colors.transparent,
onPressed: () => {},
child: Text(
"Don't have an account? Create One",
style: TextStyle(
color: this.foregroundColor.withOpacity(0.5)),
),
),
),
],
),
),
],
),
)
]);
}}
class SubPage extends StatelessWidget{
#override
Widget build(BuildContext context){
return new Scaffold(
appBar: new AppBar(
title: new Text('Tile'),
),
body: new GridView.count(
crossAxisCount: 2,
children: new List<Widget>.generate(1000, (index) {
return new GridTile(
child: new Card(
color: Colors.blue.shade200,
child: new Center(
child: new Text('tile $index'),
)
),
);
}),
),
);
}
}
I shall assume that the google sign in button is calling an async job that authenticates the user info and returns a promise that informs if its a successful login or not.
In this case, you can navigate to the home page once the response is received.
GoogleSignInButton(
onPressed: () => authService.googleSignIn ().then((response){
if(response is okay){
Navigator.push(context, MaterialPageRoute(builder: (context) => HomePage()));
}
})
)
I think you don't know how to redirect from one screen to another in Flutter.
This will help you out: https://flutter.dev/docs/development/ui/navigation
In your case you need to use Navigator.pushReplacement when your Google Sign In is completed.
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (BuildContext context) => MyHomePage()));
And Google Sign In may return the Future using which you can perform below operation.
Here then is a callback to be called when Google sign in future complete.
authService.googleSignIn.then((someValue){
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (BuildContext context) => MyHomePage()));
});
the Row in my container contains padding on the left(I think). I want to align with the other children in the Column. I've been playing around with padding for the last two hours and find out how to eliminate the padding...
The sign in should align vertically from the left with buttons above it
#override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
height: MediaQuery.of(context).size.height,
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/img/signin.png'),
fit: BoxFit.cover,
),
),
),
Container(
padding: EdgeInsets.only(top: 100),
child: Opacity(
opacity: _showProgressIndicator ? 1 : 0,
child: CircularProgressIndicator(),
),
),
Container(
// height: MediaQuery.of(context).size.height - 180,
padding:
EdgeInsets.only(top: 20, left: 10, right: 10, bottom: 60),
child: Form(
key: formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
verticalDirection: VerticalDirection.up,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
new FlatButton(
padding: EdgeInsets.zero,
child: new Text('SIGN IN',
style: Theme.of(context).textTheme.body1),
onPressed: () {
Navigator.push(
context, SignInPage(widget.onSignedIn));
},
),
Opacity(
opacity: _showMessage ? 1 : 0,
child: Text('CONSIDER GOOGLE', style:Theme.of(context).textTheme.body1)),
new FlatButton(
padding: new EdgeInsets.all(0.0),
child: new Text(
'SIGN UP WITH EMAIL',
style: Theme.of(context).textTheme.body1,
),
onPressed: () {
Navigator.push(
context, SignUpPage(widget.onSignedIn));
},
),
]),
new Container(
// padding: EdgeInsets.all(10),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new RaisedButton(
color: Colors.blue[800],
padding: EdgeInsets.all(20),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(4))),
child: new Text('CONNECT WITH FACEBOOK',
style: new TextStyle(
fontSize: 16,
letterSpacing: 0.5,
color: Colors.white)),
onPressed: loginWithFb,
),
new SizedBox(height: 20),
new RaisedButton(
color: Colors.red,
padding: EdgeInsets.all(20),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(4))),
child: new Text('CONNECT WITH GOOGLE',
style: new TextStyle(
fontSize: 16,
letterSpacing: 0.5,
color: Colors.white)),
onPressed: loginWithGoogle,
),
],
),
),
],
),
))
],
),
),
);
}
I could fix this by changing the default ButtonTheme if I understand correctly what you mean, because you said:
The sign in should align vertically from the left with buttons above it
Don't you mean horizontally from the left, if that is the case try this:
Wrap the Flatbutton in a Theme with ThemeData and a new ButtonTheme, then change the padding and minWidth with your own(when I only changed the padding or width it didn't work).
This removes the default from the ButtonTheme
Example:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Theme(
data: ThemeData(buttonTheme: ButtonThemeData(minWidth: 20.0,padding: EdgeInsets.all(0.0))),
child: new FlatButton(
child: new Text('SIGN IN',
style: Theme.of(context).textTheme.body1),
onPressed: () {
},
),
),
Opacity(
opacity: true ? 1 : 0,
child: Text('CONSIDER GOOGLE', style:Theme.of(context).textTheme.body1)),
new FlatButton(
padding: new EdgeInsets.all(0.0),
child: new Text(
"SIGN UP WITH EMAIL ",
style: Theme.of(context).textTheme.body1,
),
onPressed: () {
},
),
]),
Result: