Related
I created a custom button that I want to give a color and an elevation. Works finde, except when I give the button the color Colors.transparent. Here is an example to showcase my problem:
Widget buildButton(void Function() onPressed, String label, double? elevation) {
return OutlinedButton(
onPressed: onPressed,
child: Text(label),
style: OutlinedButton.styleFrom(
backgroundColor: Colors.white,
side: BorderSide(
width: 2,
color: Colors.blue,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: elevation ?? 0
),
);
}
class ButtonsDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
buildButton(() {}, "Button", null),
buildButton(() {}, "Button", 5),
],
),
),
);
}
}
The buttons look like this:
Here is how they should look like (I set the color of the buttons to the background color of the screen to showcase them, but I can't do that in my code):
I tried this answer but it only got me so far (I don't know if I did it completely wrong, but it looks so):
I also tried this answer and it got me there:
So, as you can see, both of them answers haven't helped me at all. Can anyone show me how I can add elevation to a transparent button?
The best solution to your problem is to use ElevatedButton instead of OutlinedButton and to give it a shadowColor. The code below is for the second button, please give it a try.
ElevatedButton(
onPressed: () {},
child: Text(
'Elevated',
style: TextStyle(color: Colors.black),
),
style: ElevatedButton.styleFrom(
elevation: 5,
primary: Colors.transparent,
shadowColor: Colors.transparent.withOpacity(0.1),
side: BorderSide(
width: 2,
color: Colors.blue,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
),
For my Flutter App I want that four buttons together are a circle. Here an Image of what i kinda want.
I don't know how to style the corners of a button in flutter.
In case of button 1 my idea would be to take the upper left corner and set the border radius and leave the other corners normal. With the other buttons I would do the same with the appropriated corners. To arrange my "pizza slices" i would use Colums and Rows.
I just don't know and couldn't figure out how to style only one corner.
Thanks for everyone in advance for helping.
Hi I do that with Grid View and "Clip R Rec t"
enter image description here
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Container(
height: 120,
width: 120,
child: GridView.count(
primary: false,
padding: const EdgeInsets.all(0),
crossAxisSpacing: 3,
mainAxisSpacing: 3,
crossAxisCount: 2,
children: [
ElevatedButton(
onPressed: () {},
child: Text("1", textAlign: TextAlign.right),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
ElevatedButton(
onPressed: () {},
child: Text("2", textAlign: TextAlign.center),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
ElevatedButton(
onPressed: () {},
child: Text("3", textAlign: TextAlign.center),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
ElevatedButton(
onPressed: () {},
child: Text("4", textAlign: TextAlign.center),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
],
),
),
),
),
),
);
}
}
and you can use Align Widget and put your numbers in align to you have a beautiful UI like this : enter image description here
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Container(
height: 120,
width: 120,
child: GridView.count(
primary: false,
padding: const EdgeInsets.all(0),
crossAxisSpacing: 3,
mainAxisSpacing: 3,
crossAxisCount: 2,
children: [
ElevatedButton(
onPressed: () {},
child: Align(
alignment: Alignment(0.5, 0),
child: Text("1", textAlign: TextAlign.center),
),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
ElevatedButton(
onPressed: () {},
child: Align(
alignment: Alignment(-0.5, 0),
child: Text("2", textAlign: TextAlign.center),
),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
ElevatedButton(
onPressed: () {},
child: Align(
alignment: Alignment(0.5, 0),
child: Text("3", textAlign: TextAlign.center),
),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
ElevatedButton(
onPressed: () {},
child: Align(
alignment: Alignment(-0.5, 0),
child: Text("4", textAlign: TextAlign.center),
),
style: ElevatedButton.styleFrom(
primary: Colors.blueGrey,
),
),
],
),
),
),
),
),
);
}
}
you can compare between images and code and If you liked my answer and it was useful, I will be happy for you to rate my answer.
Thank You.
One possible solution would be to create a Container with a fixed width and height. Then you set a background color and the border radius with BorderRadius.only for topLeft, topRight etc.
Now you only have to create a column with two rows containing your respective containers.
E.g.:
// pizza_button.dart
enum PizzaPosition { topLeft, topRight, bottomLeft, bottomRight }
class PizzaButton extends StatelessWidget {
final PizzaPosition pizzaPosition;
final _buttonSize = 60.0;
const PizzaButton({Key? key, required this.pizzaPosition}) : super(key: key);
BorderRadiusGeometry? _generateBorderRadius() {
switch (pizzaPosition) {
case PizzaPosition.topLeft:
return BorderRadius.only(
topLeft: Radius.circular(_buttonSize),
);
case PizzaPosition.topRight:
return BorderRadius.only(
topRight: Radius.circular(_buttonSize),
);
case PizzaPosition.bottomLeft:
return BorderRadius.only(
bottomLeft: Radius.circular(_buttonSize),
);
case PizzaPosition.bottomRight:
return BorderRadius.only(
bottomRight: Radius.circular(_buttonSize),
);
}
}
#override
Widget build(BuildContext context) {
return Container(
width: _buttonSize,
height: _buttonSize,
margin: EdgeInsets.all(1.0),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: _generateBorderRadius(),
),
child: Text("1"),
);
}
}
And for the whole "pizza" an example widget would be
class Pizza extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
PizzaButton(pizzaPosition: PizzaPosition.topLeft),
PizzaButton(pizzaPosition: PizzaPosition.topRight),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
PizzaButton(pizzaPosition: PizzaPosition.bottomLeft),
PizzaButton(pizzaPosition: PizzaPosition.bottomRight),
],
)
],
),
);
}
}
Now to have it work as buttons you should wrap the containers inside PizzaButton in GestureDetectors and specify your action onTap which can be hold as another property of PizzaButton for example.
you can do it inside a card like this
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(60.0),
),
child: SizedBox(
width: 120,
height: 120,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Row(
children: [
Expanded(
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text("1"),
)),
),
Expanded(
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text("2"),
)),
)
],
),
),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text("1"),
)),
),
Expanded(
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text("2"),
)),
)
],
),
)
],
),
),
),
),
));
}
Thank you to everyone here!
I got an solution based of this Question:
[https://stackoverflow.com/questions/53138955/how-can-i-make-a-buttons-corner-only-rounded-on-the-top]
And based of the answer of #fusion
My solution looks like this:
import 'package:flutter/material.dart';
enum QuarterPosition { topLeft, topRight, bottomLeft, bottomRight }
class QuarterButton extends StatelessWidget {
const QuarterButton({Key? key, required this.position, this.size = 100, this.text = ""}) : super(key: key);
final QuarterPosition position;
final double size;
final String text;
BorderRadiusGeometry _generateBorderRadius() {
switch (position) {
case QuarterPosition.topLeft:
return BorderRadius.only(
topLeft: Radius.circular(size),
);
case QuarterPosition.topRight:
return BorderRadius.only(
topRight: Radius.circular(size),
);
case QuarterPosition.bottomLeft:
return BorderRadius.only(
bottomLeft: Radius.circular(size),
);
case QuarterPosition.bottomRight:
return BorderRadius.only(
bottomRight: Radius.circular(size),
);
}
}
#override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {},
child: Text(text, style: TextStyle(fontSize: 30, color: Colors.white)),
style: ElevatedButton.styleFrom(
primary: Colors.black54,
fixedSize: Size(size, size),
shape: RoundedRectangleBorder(
borderRadius: _generateBorderRadius(),
),
side: BorderSide(color: Colors.white)),
);
}
}
And I can use it now like that.
Column(
children: [
Row(
children: [
QuarterButton(position: QuarterPosition.topLeft, size: 100, text: "1"),
QuarterButton(position: QuarterPosition.topRight, size: 100, text: "2"),
],
),
Row(
children: [
QuarterButton(position: QuarterPosition.bottomLeft, size: 100, text: "3"),
QuarterButton(position: QuarterPosition.bottomRight, size: 100, text: "4"),
],
),
],
);
Thanks for all the quick answers. Great community! :)
I am learning flutter. How can I have to make the following design? ignore the container border have to make a chip buttons
This is the button design as you mentioned
ElevatedButton(
onPressed: () {},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.white),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red),
),
),
),
child: Text(
'data',
style: TextStyle(color: Colors.black),
),
);
try to follow this article and you will find your answer
chip-widgets
Widget _buildChip(String label, Color color) {
return Chip(
labelPadding: EdgeInsets.all(2.0),
avatar: CircleAvatar(
backgroundColor: Colors.white70,
child: Text(label[0].toUpperCase()),
),
label: Text(
label,
style: TextStyle(
color: Colors.white,
),
),
backgroundColor: color,
elevation: 6.0,
shadowColor: Colors.grey[60],
padding: EdgeInsets.all(8.0),
);
}
}
chipList() {
return Wrap(
spacing: 6.0,
runSpacing: 6.0,
children: <Widget>[
_buildChip('Gamer', Color(0xFFff6666)),
_buildChip('Hacker', Color(0xFF007f5c)),
_buildChip('Developer', Color(0xFF5f65d3)),
_buildChip('Racer', Color(0xFF19ca21)),
_buildChip('Traveller', Color(0xFF60230b)),
],
);
}
I want to add the items to the cart. The cart will be Floating action button and item count I want to show on top of it. Please help me with this.
I want something like this
In case, you don't want to install any 3rd party package, you can always use the Stack widget to create your own badge.
Basically, while setting the floatingActionButton property of you Scaffold, you can use a Stack widget to build your Badge.
For example:
class BadgeExample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(),
floatingActionButton: Container(
child: FittedBox(
child: Stack(
alignment: Alignment(1.4, -1.5),
children: [
FloatingActionButton( // Your actual Fab
onPressed: () {},
child: Icon(Icons.add),
backgroundColor: Colors.deepOrange,
),
Container( // This is your Badge
child: Center(
// Here you can put whatever content you want inside your Badge
child: Text('4', style: TextStyle(color: Colors.white)),
),
padding: EdgeInsets.all(8),
constraints: BoxConstraints(minHeight: 32, minWidth: 32),
decoration: BoxDecoration( // This controls the shadow
boxShadow: [
BoxShadow(
spreadRadius: 1,
blurRadius: 5,
color: Colors.black.withAlpha(50))
],
borderRadius: BorderRadius.circular(16),
color: Colors.blue, // This would be color of the Badge
),
),
],
),
),
),
);
}
}
Output
Well, the floatingActionButton receive Widget type, this mean that you can make Widget a FloactionActionButton, so, you can use badges package, like this:
Badge(
toAnimate: true,
shape: BadgeShape.circle,
badgeColor: Colors.red,
borderRadius: BorderRadius.circular(8),
badgeContent: Text('0', style: TextStyle(color: Colors.white)),
child: Icon(
Icons.shopping_cart,
),
)
Link to the package: https://pub.dev/packages/badges
This is the output:
I try to make an app but when I use the TextButton, I get the space between two Buttons
I need one by one without space
If I use the Expanded Widget, ScrollChildView doesn't work
I try but I can't clear this stuff.
I try to make this type of TextButton.
Anyone know or have any idea about this?
import "package:flutter/material.dart";
import 'package:audioplayers/audio_cache.dart';
class Account extends StatefulWidget {
Account({Key key}) : super(key: key);
#override
_AccountState createState() => _AccountState();
}
class _AccountState extends State<Account> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
children: [
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextButton(
child: Container(
child: Text(
'One',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.red),
),
onPressed: () {
final player = AudioCache();
player.play('note1.wav');
},
),
SizedBox(
height: 1,
),
TextButton(
child: Container(
child: Text(
'Two',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.green),
),
onPressed: () {
final player = AudioCache();
player.play('note2.wav');
},
),
TextButton(
child: Container(
child: Text(
'Three',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.blue),
),
onPressed: () {
final player = AudioCache();
player.play('note3.wav');
},
),
TextButton(
child: Container(
child: Text(
'Four',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey),
),
onPressed: () {
final player = AudioCache();
player.play('note4.wav');
},
),
TextButton(
child: Container(
child: Text(
'Five',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.purple),
),
onPressed: () {
final player = AudioCache();
player.play('note5.wav');
},
),
],
),
),
],
),
),
),
);
}
}
You just wrap your text button with the SizedBox and set height and width as follows:
SizedBox(
height: 30,
width: 150,
child: TextButton(...),
)
Full available height:
SizedBox(
height: double.infinity, // <-- match_parent
child: TextButton(...)
)
Specific height:
SizedBox(
height: 100, // <-- Your height
child: TextButton(...)
)
In Flutter 2.0, you can set the height of the TextButton directly without depending on other widgets by changing the ButtonStyle.fixedSize:
TextButton(
child: Text('Text Button'),
style: TextButton.styleFrom(fixedSize: Size.fromHeight(150)),
),
If you want to modify all TextButtons, put it in the ThemeData like below:
return MaterialApp(
theme: ThemeData(
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(fixedSize: Size.fromHeight(150)),
),
),
Live Demo
use the following to even add your preferred size as well
N/B: child sized box is the main child widget inside Padding widget
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(30.0),
child: SizedBox(
height: 60,
width: 200,
child: ElevatedButton.icon(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RegistrationMenu()));
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.red.shade800),
),
icon: Icon(Icons.person_add_alt_1_rounded, size: 18),
label: Text("Register Users"),
),
),
),
],
),
Wrap the TextButton in an "Expanded" Widget.
Expanded(
child: TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.red,
padding: EdgeInsets.zero,
),
child: const Text(''),
onPressed: () {
playSound(1);
},
),
),
Another solution would be wrapping with ConstrainedBox and using minWidth & minHeight
properties.
ConstrainedBox(
constraints:BoxConstraints(
minHeight:80,
minWidth:200
),
child:TextButton(..)
)
You need to do two things
Determine text button height using
Sizedbox
Remove padding around text button using
TextStyle.StyleFrom()
SizedBox(
height: 24.0,
child: TextButton(
onPressed: () {},
child: Text('See more'),
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
),
),
),
TextButton(
onPressed: _submitOrder,
child: Padding(
padding: EdgeInsets.only(left: 20, right: 20),
child: Text("Raise")),
style: ButtonStyle(
shape: MaterialStateProperty.all(
const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(50)),
side: BorderSide(color: Colors.green)))),
)
TextButton(
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap
),
child: Text(''),
);