I have a Text widget with a link to another screen, when clicked, the background appears. How do I remove the background when clicked?
More in the photo
Align(
alignment: AlignmentDirectional.topStart,
child: FlatButton(
//color: Colors.redAccent,
onPressed: () => Navigator.of(context).push(
new MaterialPageRoute(builder: (context){
return new SettingPage();
}
),
),
padding: EdgeInsets.only(left:20.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child:SvgPicture.asset(iconSvgS5, height: 30.0, color:Colors.blueAccent),
),
Padding(
padding: const EdgeInsets.only(left:20.0),
child: GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(builder: (context) => FaqPage()),
),
child:Text(
"Вопросы и ответы",
style: TextStyle(
fontSize: 18.0
),
),
),
),
],
),
),
If you are wrapping your text widget inside of a button then the button by default have feedback to let users know when they are pressed, if you don't need the feedback consider wrapping the button with a GestureDetector widget, and passing a function to the onTap property
Removed the background color on click with this code:
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
You can use the hoverColor property of the FlatButton to set the hoverColor to your liking, here is the modified code that disables the hoverColor (simply sets it to transparent Colors.transparent) -
Align(
alignment: AlignmentDirectional.topStart,
child: FlatButton(
//setting the hover color to transparent.
hoverColor : Colors.transparent,
onPressed: () => Navigator.of(context).push(
new MaterialPageRoute(builder: (context) {
return new SettingPage();
}),
),
padding: EdgeInsets.only(left: 20.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: SvgPicture.asset(iconSvgS5,
height: 30.0, color: Colors.blueAccent),
),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(builder: (context) => FaqPage()),
),
child: Text(
"Вопросы и ответы",
style: TextStyle(fontSize: 18.0),
),
),
),
],
),
),
),
Also side note having a GestureDetector inside of a FlatButton is redundant, and in your case it is ambiguous as well since they are do two separate navigation.
Set all color properties of the FlatButton to transparent.
The example below also includes a convenient hack, how to make the clickable area wider, so if the user will press near the icon, the button will work.
It improves button responsiveness.
Example
FlatButton(
color: Colors.transparent,
focusColor: Colors.transparent,
hoverColor: Colors.transparent,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
padding: const EdgeInsets.all(0.0),
minWidth: 24,
onPressed: () => Get.back(),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
CupertinoIcons.clear,
color: Theme.of(context).colorScheme.pureBlack,
size: 18,
),
],
),
),
Related
I'm working with flutter. I want to make a CupertinoAlertDialog(iOS style is required). My problem is UI designers require the background color of the alert dialog should be #F0F0F0. But I can only adjust its theme into dark or light(e.g. following picture). The code I completed is placed below.
showCupertinoDialog(
context: context,
builder: (BuildContext context){
return Theme(
data: ThemeData.dark(),
child: CupertinoAlertDialog(
title: Text('Title'),
content: Text('Some message here'),
actions: <Widget>[
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Cancle'),
),
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
],
),
);
}
);
Is that possible? Thanks for any advice.
If I recall correctly, the background color for CupertinoAlertDialog is hardcoded. However, you can create a custom dialog that can change the background color of it as well as the functions of the buttons.
You need to create a type Dialog for the showDialog function instead of showCupertinoDialog:
Dialog customDialog = Dialog(
backgroundColor: Color(0xfff0f0f0), // your color
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)), // change 40 to your desired radius
child: CustomAlertDialog(),
);
I also created a stateless widget called CustomAlertDialog, but if you don't want to, you can replace the CustomAlertDialog() with its content.
class CustomAlertDialog extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
height: 150,
child: Column(
children: [
Expanded(
flex: 2,
child: Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.grey, width: 1),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: Center(
child: Text(
"Title",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
),
),
Container(
child: Center(
child: Text("Some message here"),
),
),
],
),
),
),
Expanded(
flex: 1,
child: Row(
children: [
Expanded(
flex: 1,
child: GestureDetector(
child: Container(
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.grey, width: 1),
),
),
child: Center(
child: Text("Cancel"),
),
),
onTap: () {
Navigator.of(context).pop(); // replace with your own functions
},
),
),
Expanded(
flex: 1,
child: GestureDetector(
child: Container(
child: Center(
child: Text("OK"),
),
),
onTap: () {
Navigator.of(context).pop(); // replace with your own functions
},
),
),
],
),
),
],
),
);
}
}
Lastly, replace your whole showCupertinoDialog with this showDialog function:
showDialog(
barrierDismissible: true, // set false if you dont want the dialog to be dismissed when user taps anywhere [![enter image description here][1]][1]outside of the alert
context: context,
builder: (context) {
return customDialog;
},
);
Result: https://i.stack.imgur.com/cV13A.png
I want to make this row clickable to redirect to a different page, how should I do it?
There are a bunch of these rows in the code.
body:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
color: Colors.white,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(10,16,0,16),
color: Colors.white,
child: Icon(Icons.favorite),
),
Container(
padding: EdgeInsets.fromLTRB(5,20,140,20),
color: Colors.white,
child: Text('Favoritos'),
),
Container(
padding: EdgeInsets.fromLTRB(145,16,5,16),
color: Colors.white,
child: Icon(Icons.keyboard_arrow_right),
),
],
),
You can wrap your widget with GestureDetector or InkWell like this:
GestureDetector(
onTap: (){
// Add what you want to do on tap
}
child: Row(
// Add your properties here
),
),
InkWell(
onTap: (){
// Add what you want to do on tap
}
child: Row(
// Add your properties here
),
),
To make the row clickable you will have to wrap it to either inkwell or GestureDetector, else you can chose IconButtons.
InkWell(
onTap: (){ print("Card Clicked"); }
child: Container(
padding: EdgeInsets.fromLTRB(10,16,0,16),
color: Colors.white,
child: Icon(Icons.favorite),
),//Container
);
To go to different activity onTap try this code inside onTap():
onTap: (){
print("Card Clicked");
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),//secondRoute is the
//second class you want to go to.
}
You can use hardik's answer if you want to make clickable columns. Hope it helps! Happy coding:)
I wanted to change the size of the raised Button..
So i created a sized box and added width and height as I wanted and wrapped the raised button inside the sized box...
After I did that the button sticks to the left corner only..
So I used the align widget to keep it in center but since I made to child under the sized box it became an error..
So how to rectify this?!
SizedBox(
width: 100.0,
height: 50.0,
child: Align(
alignment: Alignment.center,
),
child: RaisedButton(
child: Center(child: Text("Sign Up", style: TextStyle(color: Colors.white.withOpacity(.7)),)),
color: Colors.blue[800],
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context)=> UserPage()));
}
),
)
try like this,
SizedBox(
height: 50.0,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
RaisedButton(
child: Center(
child: Text(
"Sign Up",
style: TextStyle(color: Colors.white.withOpacity(.7)),
)),
color: Colors.blue[800],
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => UserPage()));
}),
],
),
)
Simply wrap with center widget
Center(
child: SizedBox(
width: 100.0,
height: 50.0,
child: RaisedButton(
child: Center(child: Text("Sign Up", style: TextStyle(color: Colors.white.withOpacity(.7)),)),
color: Colors.blue[800],
onPressed: () {
}
)
),
)
i'm using Button theme in my project im not able to change the backgroundcolor,text color and also im not able to reduce the height of the button theme can someone please look in to it.
Here's my code:
Widget _signInButton() {
return ButtonTheme(
minWidth: 325,
child: OutlineButton(
splashColor: Colors.grey,
onPressed: () {
signInWithGoogle().whenComplete(() {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return FirstScreen();
},
),
);
});
},
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
highlightElevation: 0,
borderSide: BorderSide(color: Colors.grey),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 1,
child: Image(image: AssetImage("Assets/google_logo.png"), height: 35.0)),
Expanded(
flex: 1,
child: Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
'Sign in with Google',
style: TextStyle(
fontSize: 15,
color: Colors.grey,
try adding height: 8.0 or layoutBehavior:ButtonBarLayoutBehavior.constrained in ButtonTheme.
With any one of these options, you can adjust the height and padding of the button.
Note: adjust the height value as you please. I have set it to 8.0 as an example
You can use buttonColor property in ButtonTheme for changing the button's color. Or the color property in Child Button should do the work.
But since you are using an OutlineButton it won't work as it has no area to paint the color on, it just has an outline.
Note:
You should replace the OutlineButton with RaisedButton.
For Text color you can use style property of the Text widget.
A little example code would be as following:
ButtonTheme(
height: 8.0,
buttonColor: Colors.red,
child: RaisedButton(
color: Colors.blue,
child: Text(
'Button',
style: TextStyle(color: Colors.white),
),
onPressed: () {},
),
)
I am new to Flutter where I am trying to create a Login Screen, but I am not able to handle proper scroll of an field. Below is the code I had written.The main problem is that the text form field go above image which should not happen when it push up.
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Image.asset(
"assets/ic_login_stack.png",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Scaffold(
key: scaffoldKey,
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
),
body: Center(
child: SingleChildScrollView(
padding: EdgeInsets.only(left: 24.0, right: 24.0),
child: Column(
children: <Widget>[
SizedBox(height: 55.0),
Form(key: formKey, child: _getUIForm()),
SizedBox(
width: double.infinity,
height: 50,
child: GestureDetector(
child: RaisedButton(
child: Text(AppLocalizations.of(context).buttonText,
style: TextStyle(
color: Colors.white, fontSize: 18.0)),
elevation: 5.0,
color: Color(0xffE9446A),
//onPressed: _submit,
onPressed: () => {
/*Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CompanyWall()
)
)*/
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (context) => CompanyWall()),
(r) => false)
},
),
)),
SizedBox(height: 20.0),
GestureDetector(
onTap: () =>
Navigator.of(context).pushNamed(ResetPassword.tag),
child: Text(
AppLocalizations.of(context).forgotPasswordText,
style: TextStyle(
decoration: TextDecoration.underline,
color: Colors.grey[800],
fontSize: 16.0),
),
),
SizedBox(height: 30.0),
GestureDetector(
onTap: () =>
Navigator.of(context).pushNamed(SignUpScreen.tag),
child: Text(AppLocalizations.of(context).signUpFreeText,
style: TextStyle(
color: Color(0xffE9446A),
fontSize: 18.0,
fontWeight: FontWeight.bold)),
),
],
),
),
),
)
],
);
}
_getUIForm() {
Multiple Text Form Feild
}
And below are the out put I obtained while running code.How should I handle scroll that textformfeild should remain below the logo.
You are using a Stack with 2 children - the Image and the scrolling content. The image is outside the scrolling content so it will not change its position as you scroll.
If you want the image to scroll along with the content, change your layout so that your Stack is within the SingleChildScrollView. It should end up roughly like so:
Scaffold -> SingleChildScrollView -> Stack -> [Image, Column]
In the scaffold add this
return Scaffold(
resizeToAvoidBottomPadding: false, // <-- add this
);