This is my FlatButton. How can I solve it with textButton or elevatedButton?
Center(
child: FlatButton(
onPressed: () { },
child: Container(
margin:EdgeInsets.only(top: 25),
child: image != null
? Image.file(image,width:140,height:192,fit:BoxFit.fill)
: Container(
width: 240,
height: 200,
child: Icon(Icons.camera_front, size: 100, color:Colors.grey,)
),
),
),
),
Change FlatButton to TextButton.
Center(
child: TextButton(
onPressed: () { },
child: Container(
margin:EdgeInsets.only(top: 25),
child: image != null
? Image.file(image,width:140,height:192,fit:BoxFit.fill)
: Container(
width: 240,
height: 200,
child: Icon(Icons.camera_front, size: 100, color:Colors.grey,)
),
),
),
),
For styling using TextButton,
TextButton(
style: TextButton.styleFrom(
padding: const EdgeInsets.all(16.0),
primary: Colors.white,
textStyle: const TextStyle(fontSize: 20),
),
onPressed: () {},
child: const Text('Gradient'),
),
FlatButton is replaced with TextButton and RaisedButton is replaced with ElevatedButton.
Here is the code of TextButton with styling
TextButton(
onPressed: () { },
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.deepPurple)
),
child: Container(
margin:EdgeInsets.only(top: 25),
child: image != null
? Image.file(image,width:140,height:192,fit:BoxFit.fill)
: Container(
width: 240,
height: 200,
child: Icon(Icons.camera_front, size: 100, color:Colors.grey,)
),
),
),
Just change FlatButton to TextButton or ElevatedButton.
Related
I am trying to show the buttons in parallelly view like showing the below image. How to align buttons in parallelly in flutter for android application. But I do not know how to align it. I have attached images for more info. If anyone knows the answer please help to find the solution.
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
const SizedBox(
height: 510,
),
SizedBox(
width: 300, // <-- Your width
height: 50, // <-- Your height
child: ElevatedButton(
onPressed: () {
//validateForm();
Navigator.push(context,
MaterialPageRoute(builder: (c) => const PhoneLoginScreen()));
},
style: ElevatedButton.styleFrom(
primary: Color(0xff557de3),
shape: StadiumBorder()
),
child: const Text(
"SIGN IN WITH",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold
),
),
),
),
const SizedBox(
height: 20,
),
SizedBox(
width: 300, // <-- Your width
height: 50, // <-- Your height
child: ElevatedButton(
onPressed: () {
onGoogleSignIn(context);
},
style: ElevatedButton.styleFrom(
primary: Color(0xFF557de3),
shape: CircleBorder(),
padding: EdgeInsets.all(24),
//primary: Color(0xFFF5F1F1),
),
child: const Text(
"GMAIL",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold
),
),
),
),
SizedBox(
width: 300, // <-- Your width
height: 50, // <-- Your height
child: ElevatedButton(
onPressed: () {
onGoogleSignIn(context);
},
style: ElevatedButton.styleFrom(
primary: Color(0xFF557de3),
shape: CircleBorder(),
padding: EdgeInsets.all(24),
//primary: Color(0xFFF5F1F1),
),
child: const Text(
"PHONE",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold
),
),
),
),
],
),
),
)
From my code:
Expecting like this:
I would probably switch to a Wrap widget considering your expectation.
See Flutter documentation
Main differences are:
Add infinite width to the first widget, so it always takes all the space available.
Removed width on the others. I don't see the need for a 300 width. I might have missed something.
Handle spacing directly with the Wrap widget properties
SingleChildScrollView(
child: Wrap(
alignment: WrapAlignment.center,
runSpacing: 20.0, // Or more
spacing: 20, // Or more
children: [
SizedBox(
width: double.infinity, // <-- Your width
height: 50, // <-- Your height
child: // Button
),
SizedBox(
height: 50, // <-- Your height
child: // Button
),
SizedBox(
height: 50, // <-- Your height
child: // Button
),
],
),
),
You could use Row widget for this inside the Column widget.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
EmailButton(),
PhoneButton(),
],
),
I am trying to add image for buttons in flutter like below the image. Here i have used ElevatedButton. So How to set background image for the ElevatedButton. I do not know how to add image for it. If anyone know please help to find the solution.
child:SingleChildScrollView(
child: Wrap(
alignment: WrapAlignment.center,
runSpacing: 20.0, // Or more
spacing: 20, // Or more
children: [
const SizedBox(
height: 520,
),
SizedBox(
width: double.infinity, // <-- Your width
height: 50, // <-- Your height
),
SizedBox(
height: 50, // <-- Your height
child: ElevatedButton(
onPressed: () {
onSignIn(context);
},
style: ElevatedButton.styleFrom(
primary: Color(0xff557de3),
shape: StadiumBorder()
),
child: const Text(
"GMAIL",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold
),
),
),
),
SizedBox(
height: 50, // <-- Your height
child: ElevatedButton(
onPressed: () {
//validateForm();
},
style: ElevatedButton.styleFrom(
primary: Color(0xff557de3),
shape: StadiumBorder()
),
child: const Text(
"Phone",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold
),
),
),// Button
),
],
),
),
You can use:
ElevatedButton.icon(
onPressed: (){},
icon: Icon(Icons.phone),
label: Text("hello"),
),
You can use gestures detector
GestureDetector(
onTap: () {
debugPrint('The image button has been tapped');
},
child: SizedBox(
width: 300,
height: 100,
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.cover,
),
),
),
or use icon button
IconButton(
splashRadius: 100,
iconSize: 200,
icon: Ink.image(
image: const NetworkImage(
'https://picsum.photos/250?image=9'),
),
onPressed: () {
// do something when the button is pressed
debugPrint('Hi there');
},
),
You can add image from asset:
ElevatedButton(
onPressed: () {},
child: Image.asset('your_asset_path')
)
Or you can add network image:
ElevatedButton(
onPressed: () {},
child: Image.network('your_image_url_path')
)
Or you can create your custom button:
GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('your_asset_image_path'),
),
),
)
)
Instead of using the ElevatedButton, have you tried IconButton, GestureDetector, InkWell, InkResponse and Material?
IconButton(
splashRadius: 100, // optional
onPressed: {YOUR_LOGIC_COMPONENT}
icon: Container(
child : {YOUR_WIDGET},
),
),
or
GestureDetector(
child: SizedBox(child: {YOUR_WIDGET}),
onTap: {YOUR_LOGIC_COMPONENT},
);
or
InkWell(
child: CircleAvatar(child: {YOUR_WIDGET}),
onTap: {YOUR_LOGIC_COMPONENT},
);
You can use MaterialButton and customize it according to your need.
MaterialButton(
padding: EdgeInsets.all(8.0),
textColor: Colors.white,
splashColor: Colors.red,
elevation: 8.0,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(''), //some asset image
fit: BoxFit.cover),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(),
),
),
// ),
onPressed: () {
print('Tapped');
},
),
how to change this square text button to a circular button with a plus icon as the image shows. here's my designed button code. and left side image showing the button I designed so far. I want It to be styled as Right side image.
Padding(
padding: const EdgeInsets.fromLTRB(300, 150, 0, 0),
child: SizedBox(
height: 50,
child: TextButton(
style: TextButton.styleFrom( backgroundColor: Color(0xffCAEC93) ,
side: BorderSide(color: Color(0xffCAEC93),
),
),
onPressed: () {
Icon(
Icons.favorite,
size: 20,
color: Colors.grey,
);
},
child: Text('M',style: TextStyle(fontFamily: 'Sen',color:Color(0xffFFFFFF)),),
),
),
),
You should be using FloatingActionButton instead, however if you still want to use Button then make use of the below code:
ElevatedButton(
onPressed: (){},
style: ElevatedButton.styleFrom(
shape: const CircleBorder(),
primary: Colors.lightGreen,
fixedSize: const Size(60,60)
),
child: const Icon(Icons.add_circle_outline))
Result:
You can use Floating action button for that : https://api.flutter.dev/flutter/material/FloatingActionButton-class.html
I recommend to use FloatingActionButton instead of TextButton:
FloatingActionButton(
onPressed: (){},
child: Icon(Icons.add),
),
your code should be like:
Padding(
padding: const EdgeInsets.fromLTRB(300, 150, 0, 0),
child: SizedBox(
height: 50,
child: FloatingActionButton(
onPressed: (){},
child: Icon(Icons.add),
),
),
),
You can use a FloatingActionButton
Like so:
FloatingActionButton(
child: Icon(Icons.add_circle_outline),
backgroundColor: Color(0xffCAEC93),
onPressed: (){
//do something
}
)
Use Container and give border radius to container and wrap conatiner widget with InkWell.
Center(
child: InkWell(
onTap: (){
print("Clicked");
},
child: Container(
alignment: Alignment.center,
height: 106,
width: 106,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(80)),
),
child: Image.asset("assets/edit.png",scale: 8,)
),
),
),
Image Output:
My approach with text added
Center(
child: InkWell(
onTap: () {},
child: Row(children: [
Container(
alignment: Alignment.center,
height: 40,
width: 40,
decoration: BoxDecoration(
color: Color(0xFFfd9770),
borderRadius: BorderRadius.all(Radius.circular(80)),
),
child: Icon(
Icons.edit,
color: Colors.white,
size: 20,
),
),
SizedBox(
width: 10,
),
Text('edit'.tr)
]))),
Try this it will work fortextButton
SizedBox(
height: 50,
width: 50,
child: TextButton(
style: TextButton.styleFrom(
backgroundColor: Color(0xffCAEC93),
side: BorderSide(
color: Color(0xffCAEC93),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
side: BorderSide(color: Colors.red)),
),
onPressed: () {},
child: Icon(
Icons.add,
color: Colors.white,
)),
),
Or you can try FloatingActionButton
I want to make a button with an icon centered.
thie is my code.
ElevatedButton.icon(
onPressed: () {},
icon: Icon(Icons.arrow_forward),
label: Text(''),
style: ElevatedButton.styleFrom(
primary: Colors.red,
fixedSize: Size(100, 50),
)
Try below code hope its help to you. The lable field is required for ElevatedButton.icon refer documentation here you can used TextButton
Using Container
Container(
height: 50.0,
width: 150.0,
child: TextButton(
child: Icon(Icons.person),
onPressed: () {},
),
),
Using SizedBox
SizedBox(
height: 50.0,
width: 150.0,
child: TextButton(
child: Icon(Icons.person),
onPressed: () {},
),
),
please try with this
ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red.shade800),
),
child: FittedBox(
fit: BoxFit.fitWidth,
child: Icon(Icons.person_add_alt_1_rounded, size: 18)),
)
InkWell(
child: Container(
height: 50,
width: 100,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.red,),
child: Icon(Icons.arrow_forward, color: Colors.white),
),
onTap: () {
},
),
the label field is the required field in the ElevatedButton.icon widget. But there are other options as well like this:
Container(
height: 50.0,
width: 100.0,
child: FlatButton(
child: Icon(Icons.arrow_forward),
onPressed: () {},
),
),
EDIT:
You could use Container with GestureDetector widget, like this:
GestureDetector(
onTap: (){},
child: Container(
height: 50.0,
width: 100.0,
decoration: BoxDecoration(
color: Colors.red
),
child: Center(child: Icon(Icons.arrow_forward)),
)
)
ElevatedButton(
onPressed: () {},
child: Icon(Icons.arrow_forward),
style: ElevatedButton.styleFrom(primary: Colors.red,fixedSize: Size(100, 50),)
I have the following Flutter widget:
return SizedBox(
height: 40.0,
width: 40.0,
child: InkWell(
splashColor: Colors.grey,
onTap: callback,
child: Center(child: image),
),
);
The problem is that the highlight on this button is rectangular. I would like to change it to a circle, but the highlightShape property is not available for modification. How can this button be given a circular highlight?
Following #pskink's comment, I used customBorder:
return SizedBox(
height: 40.0,
width: 40.0,
child: InkWell(
splashColor: Colors.grey,
onTap: callback,
child: Center(child: image),
customBorder: CircleBorder(),
),
);
return ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
child: SizedBox(width: 56, height: 56, child: Icon(Icons.settings)),
onTap: () {},
),
),
);
You can use ClipOval to achieve this
ClipOval(
child: Material(
child: SizedBox(
height: 40.0,
width: 40.0,
child: InkWell(
splashColor: Colors.grey,
onTap: () {},
child: Center(child: Icon(Icons.directions_car)),
),
),
),
)